CODEWITHSUNDEEP
csssass
fullstackplus
fullstackplus

Reputation: 1071

SASS compiles empty CSS file?

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?

Upvotes: 5

Views: 2948

Answers (1)

rudolph9
rudolph9

Reputation: 8119

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; }

Upvotes: 10

Related Questions