SASS compiles empty CSS file?

Question

I'm trying to compile this small piece of SCSS to CSS:

$font-size: 16px;
$em: $font-size / 1em;

$column: 48px;
$gutter: 24px;

 $cols1: ( 1 * ($column + $gutter) - $gutter) / $em;
 $cols2: ( 2 * ($column + $gutter) - $gutter) / $em;
 $cols3: ( 3 * ($column + $gutter) - $gutter) / $em;
 $cols4: ( 4 * ($column + $gutter) - $gutter) / $em;
 $cols5: ( 5 * ($column + $gutter) - $gutter) / $em;
 $cols6: ( 6 * ($column + $gutter) - $gutter) / $em;
 $cols7: ( 7 * ($column + $gutter) - $gutter) / $em;
 $cols8: ( 8 * ($column + $gutter) - $gutter) / $em;
 $cols9: ( 9 * ($column + $gutter) - $gutter) / $em;
$cols10: (10 * ($column + $gutter) - $gutter) / $em;
$cols11: (11 * ($column + $gutter) - $gutter) / $em;
$cols12: (12 * ($column + $gutter) - $gutter) / $em;
$cols13: (13 * ($column + $gutter) - $gutter) / $em;
$cols14: (14 * ($column + $gutter) - $gutter) / $em;
$cols15: (15 * ($column + $gutter) - $gutter) / $em;
$cols16: (16 * ($column + $gutter) - $gutter) / $em;

Tried it with both sass grid.scss grid.css and sass --watch grid.scss:grid.css - all I get is a blank css file. What's going on?

What are you expecting the css file to contain? All you're doing in the scss file is defining variables which won't be output in the css file until you use them inside a css rule. — pjumble
– pjumble, Commented Aug 18, 2012 at 13:18

rudolph9 · Accepted Answer · 2012-08-18 13:53:34Z

10

As stated by @pjumble comment, you are only defining variables. Taking your code and adding the additional hello_world statement:

$font-size: 16px;
$em: $font-size / 1em;

$column: 48px;
$gutter: 24px;

 $cols1: ( 1 * ($column + $gutter) - $gutter) / $em;
 $cols2: ( 2 * ($column + $gutter) - $gutter) / $em;
 $cols3: ( 3 * ($column + $gutter) - $gutter) / $em;
 $cols4: ( 4 * ($column + $gutter) - $gutter) / $em;
 $cols5: ( 5 * ($column + $gutter) - $gutter) / $em;
 $cols6: ( 6 * ($column + $gutter) - $gutter) / $em;
 $cols7: ( 7 * ($column + $gutter) - $gutter) / $em;
 $cols8: ( 8 * ($column + $gutter) - $gutter) / $em;
 $cols9: ( 9 * ($column + $gutter) - $gutter) / $em;
$cols10: (10 * ($column + $gutter) - $gutter) / $em;
$cols11: (11 * ($column + $gutter) - $gutter) / $em;
$cols12: (12 * ($column + $gutter) - $gutter) / $em;
$cols13: (13 * ($column + $gutter) - $gutter) / $em;
$cols14: (14 * ($column + $gutter) - $gutter) / $em;
$cols15: (15 * ($column + $gutter) - $gutter) / $em;
$cols16: (16 * ($column + $gutter) - $gutter) / $em;

.hello_world{ width: $column }

The command sass grid.scss grid.css produces:

.hello_world {
  width: 48px; }

answered Aug 18, 2012 at 13:53

rudolph9

8,1499 gold badges55 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rudolph9 Over a year ago

Consider bumping @pjumble's comment on the original question as he identified the problem before I answered the question.

fullstackplus Over a year ago

Done, thanks. I expected $font-size: 16px; to be compiled to font-size: 16px;at the very least, but I see what you mean.

Collectives™ on Stack Overflow

SASS compiles empty CSS file?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related