Permalink
Browse files

Added Rake task with rake sass:convert for converting the .sass to .s…

…css, added the .sass version and updated vars from underscores to the dashes best practice
  • Loading branch information...
1 parent 8425456 commit 565ef545d6cb032711eb8a07e57966ec9b7d013d @adamstac adamstac committed Aug 10, 2011
Showing with 62 additions and 41 deletions.
  1. +9 −0 Rakefile
  2. +32 −0 stylesheets/_rem.sass
  3. +21 −41 stylesheets/_rem.scss
View
@@ -0,0 +1,9 @@
+namespace :sass do
+
+ desc "Converts the Sass to SCSS"
+ task :convert do
+ puts "*** Converting Sass to SCSS ***"
+ system "sass-convert stylesheets/*.sass stylesheets/*.scss"
+ end
+
+end
View
@@ -0,0 +1,32 @@
+// Baseline, measured in pixels
+// The value should be the same as the font-size value for the html element
+// If the html element's font-size is set to 62.5% (of the browser's default font-size of 16px),
+// then the variable below would be 10px.
+$baseline-px: 10px
+
+=rem($property, $px-values)
+ // Convert the baseline into rems
+ $baseline-rem: $baseline-px / 1rem
+
+ // Print the first line in pixel values
+ #{$property}: $px-values
+
+ // If there is only one (numeric) value, return the property/value line for it.
+ @if type-of($px-values) == "number"
+ #{$property}: $px-values / $baseline-rem
+ @else
+
+ // Create an empty list that we can dump values into
+ $rem-values: ""
+
+ @each $value in $px-values
+
+ // If the value is zero, return 0
+ @if $value == 0
+ $rem-values: append($rem-values, $value)
+
+ @else
+ $rem-values: append($rem-values, $value / $baseline-rem)
+
+ // Return the property and its list of converted values
+ #{$property}: $rem-values
View
@@ -2,44 +2,24 @@
// The value should be the same as the font-size value for the html element
// If the html element's font-size is set to 62.5% (of the browser's default font-size of 16px),
// then the variable below would be 10px.
-$baseline_px: 10px;
-
-@mixin rem($property, $px_values) {
-
- // Convert the baseline into rems
- $baseline_rem: ($baseline_px / 1rem);
-
- // Print the first line in pixel values
- #{$property}: $px_values;
-
- // If there is only one (numeric) value, return the property/value line for it.
- @if type-of($px_values) == 'number' {
- #{$property}: $px_values / $baseline_rem;
- }
-
- // If there is more than one value, create a list and perform equations on each value
- @else {
-
- // Create an empty list that we can dump values into
- $rem_values: ();
-
- @each $value in $px_values {
-
- // If the value is zero, return 0
- @if $value == 0 {
- $rem_values: append($rem_values, $value);
- }
-
- // If the value is not zero, convert it from px to rem
- @else {
- $rem_values: append($rem_values, ($value / $baseline_rem) );
- }
-
- }
-
- // Return the property and its list of converted values
- #{$property}: $rem_values;
-
- }
-
-}
+$baseline-px: 10px;
+
+@mixin rem($property, $px-values) {
+ // Convert the baseline into rems
+ $baseline-rem: $baseline-px / 1rem;
+ // Print the first line in pixel values
+ #{$property}: $px-values;
+ // If there is only one (numeric) value, return the property/value line for it.
+ @if type-of($px-values) == "number" {
+ #{$property}: $px-values / $baseline-rem; }
+ @else {
+ // Create an empty list that we can dump values into
+ $rem-values: "";
+ @each $value in $px-values {
+ // If the value is zero, return 0
+ @else if $value == 0 {
+ $rem-values: append($rem-values, $value); }
+ @else {
+ $rem-values: append($rem-values, $value / $baseline-rem); } }
+ // Return the property and its list of converted values
+ #{$property}: $rem-values; } }

0 comments on commit 565ef54

Please sign in to comment.