Interpolation is not allowed in @media directives. I've just pushed a change that causes this to print an error rather than producing bad CSS.
I've opened http://github.com/nex3/haml/issues#issue/229 to add support for actual interpolation in a future version. On Sun, Aug 8, 2010 at 11:20 AM, Venue Driver <[email protected]> wrote: > I'm working on some SCSS code for a responsive layout, for scaling the > font sizes up and down using media queries. I think that I may have > found a bug in the @media directive, but maybe I just don't know what > I'm doing. > > SCSS: > > $base_width: 960px; > $font_size: 18px; > $line_height: 24px; > > // Step down to the smallest width supported. > $current_width: $base_width; > @while $current_width > 360 { > $current_width: $current_width - $font_size; > } > // Step up through the widest width supported. > @while $current_width < 2048 { > $current_width: $current_width + $font_size; > $columns: 4; > @if ($current_width <= 512) { $columns: 2; } > @if ($current_width > 512 and $current_width <= 768) { $columns: > 3; } > $column_width: $current_width / $columns; > // SASS will not accept the $current_width variable and screws up on > #{} > @media screen and (min-width: #{$current_width} px ) { > html > body { > font-size: $column_width * $font_size / $column_width; > line-height: $column_width * $line_height / $column_width; > } > } > } > > This code is generating incorrect font sizes because of a dumb math > problem but that's a completely different problem. The point of the > code is that it's generating a series of @media rules, in the last few > lines. The problem is that this is the output: > > @media screen and (min-width: #{ px ) { > /* line 176, ../../app/stylesheets/screen.scss */ > html > body { > font-size: 18px; > line-height: 24px; > } > } > > @media screen and (min-width: #{ px ) { > /* line 176, ../../app/stylesheets/screen.scss */ > html > body { > font-size: 18px; > line-height: 24px; > } > } > > Note the "min-width: #{ px". The $current-width variable isn't > passing through. > > I can't use just this without the interpolation: > > @media screen and (min-width: $current_width px ) { > html > body { > font-size: $column_width * $font_size / $column_width; > line-height: $column_width * $line_height / $column_width; > } > } > > ...because then SCSS complains: > > error app/stylesheets/screen.scss (Line 175: Invalid CSS after "...nd > (min-width: ": expected expression (e.g. 1px, bold), was > "$current_width ...") > > (Same exact error without the "px".) > > So I was wondering: have I found a bug in the @media directive, or do > I just not know what I'm doing? > > -- > You received this message because you are subscribed to the Google Groups > "Haml" group. > To post to this group, send email to [email protected]. > To unsubscribe from this group, send email to > [email protected] <haml%[email protected]>. > For more options, visit this group at > http://groups.google.com/group/haml?hl=en. > > -- You received this message because you are subscribed to the Google Groups "Haml" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/haml?hl=en.
