Permalink
Browse files

Simplify px-em conversion in SCSS

You don't need #{interpolations} for unit conversions in SCSS.
Just make sure the pxs (or ems) cancel each other where needed.
1 parent f187a78 commit b3497eabb40111f9f0f68bab7d79d5c9fcf835ee @pyrtsa pyrtsa committed Dec 18, 2011
Showing with 23 additions and 23 deletions.
  1. +23 −23 frameless.scss
View
@@ -9,41 +9,41 @@
// Configuration
//
-$font-size: 16; // Your base font-size in pixels
-$em: $font-size; // Shorthand for outputting ems
+$font-size: 16px; // Your base font-size in pixels
+$em: $font-size / 1em; // Shorthand for outputting ems
-$column: 48; // The column-width of your grid in pixels
-$gutter: 24; // The gutter-width of your grid in pixels
+$column: 48px; // The column-width of your grid in pixels
+$gutter: 24px; // The gutter-width of your grid in pixels
//
// Column-widths in variables, in ems
//
- $cols1: #{( 1 * ($column + $gutter) - $gutter) / $em}em;
- $cols2: #{( 2 * ($column + $gutter) - $gutter) / $em}em;
- $cols3: #{( 3 * ($column + $gutter) - $gutter) / $em}em;
- $cols4: #{( 4 * ($column + $gutter) - $gutter) / $em}em;
- $cols5: #{( 5 * ($column + $gutter) - $gutter) / $em}em;
- $cols6: #{( 6 * ($column + $gutter) - $gutter) / $em}em;
- $cols7: #{( 7 * ($column + $gutter) - $gutter) / $em}em;
- $cols8: #{( 8 * ($column + $gutter) - $gutter) / $em}em;
- $cols9: #{( 9 * ($column + $gutter) - $gutter) / $em}em;
-$cols10: #{(10 * ($column + $gutter) - $gutter) / $em}em;
-$cols11: #{(11 * ($column + $gutter) - $gutter) / $em}em;
-$cols12: #{(12 * ($column + $gutter) - $gutter) / $em}em;
-$cols13: #{(13 * ($column + $gutter) - $gutter) / $em}em;
-$cols14: #{(14 * ($column + $gutter) - $gutter) / $em}em;
-$cols15: #{(15 * ($column + $gutter) - $gutter) / $em}em;
-$cols16: #{(16 * ($column + $gutter) - $gutter) / $em}em;
+ $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;
//
// Column-widths in a function, in ems
//
@mixin width ($cols:1) {
- width: #{($cols * ($column + $gutter) - $gutter) / $em}em;
+ width: ($cols * ($column + $gutter) - $gutter) / $em;
}
@@ -182,12 +182,12 @@ body {
@media screen and (max-width: 1px) {
body {
- font-size: #{($font-size - 2)/16}em;
+ font-size: ($font-size - 2) / $em;
}
}
@media screen and (max-width: 1px) {
body {
- font-size: #{($font-size + 2)/16}em;
+ font-size: ($font-size + 2) / $em;
}
}

0 comments on commit b3497ea

Please sign in to comment.