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].
For more options, visit this group at http://groups.google.com/group/haml?hl=en.
