SASS compiling an empty CSS file?

Question

I am trying to compile this small piece of SCSS for 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; 

I tried this with both sass grid.scss grid.css and sass --watch grid.scss:grid.css - all I get is an empty css file. What's happening?

Answer 1

As pointed out by @pjumble's comment, you only define variables. Taking your code and adding an additional hello_world :

 $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 sass grid.scss grid.css produces:

 .hello_world { width: 48px; }