Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

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...
commit 565ef545d6cb032711eb8a07e57966ec9b7d013d 1 parent 8425456
Adam Stacoviak authored August 10, 2011
9  Rakefile
... ...
@@ -0,0 +1,9 @@
  1
+namespace :sass do
  2
+
  3
+  desc "Converts the Sass to SCSS"
  4
+  task :convert do
  5
+    puts "*** Converting Sass to SCSS ***"
  6
+    system "sass-convert stylesheets/*.sass stylesheets/*.scss"
  7
+  end
  8
+
  9
+end
32  stylesheets/_rem.sass
... ...
@@ -0,0 +1,32 @@
  1
+// Baseline, measured in pixels
  2
+// The value should be the same as the font-size value for the html element
  3
+// If the html element's font-size is set to 62.5% (of the browser's default font-size of 16px),
  4
+// then the variable below would be 10px.
  5
+$baseline-px: 10px
  6
+
  7
+=rem($property, $px-values)
  8
+  // Convert the baseline into rems
  9
+  $baseline-rem: $baseline-px / 1rem
  10
+  
  11
+  // Print the first line in pixel values
  12
+  #{$property}: $px-values
  13
+  
  14
+  // If there is only one (numeric) value, return the property/value line for it.
  15
+  @if type-of($px-values) == "number"
  16
+    #{$property}: $px-values / $baseline-rem
  17
+  @else
  18
+
  19
+    // Create an empty list that we can dump values into
  20
+    $rem-values: ""
  21
+
  22
+    @each $value in $px-values
  23
+      
  24
+      // If the value is zero, return 0
  25
+      @if $value == 0
  26
+        $rem-values: append($rem-values, $value)
  27
+
  28
+      @else
  29
+        $rem-values: append($rem-values, $value / $baseline-rem)
  30
+
  31
+    // Return the property and its list of converted values
  32
+    #{$property}: $rem-values
62  stylesheets/_rem.scss
@@ -2,44 +2,24 @@
2 2
 // The value should be the same as the font-size value for the html element
3 3
 // If the html element's font-size is set to 62.5% (of the browser's default font-size of 16px),
4 4
 // then the variable below would be 10px.
5  
-$baseline_px: 10px;
6  
-
7  
-@mixin rem($property, $px_values) {
8  
-
9  
-	// Convert the baseline into rems
10  
-	$baseline_rem: ($baseline_px / 1rem);
11  
-
12  
-	// Print the first line in pixel values
13  
-	#{$property}: $px_values;
14  
-
15  
-	// If there is only one (numeric) value, return the property/value line for it.
16  
-	@if type-of($px_values) == 'number' {
17  
-		#{$property}: $px_values / $baseline_rem;
18  
-	}
19  
-
20  
-	// If there is more than one value, create a list and perform equations on each value
21  
-	@else {
22  
-
23  
-		// Create an empty list that we can dump values into
24  
-		$rem_values: ();
25  
-
26  
-		@each $value in $px_values {
27  
-
28  
-			// If the value is zero, return 0
29  
-			@if $value == 0 { 
30  
-				$rem_values: append($rem_values, $value); 
31  
-			}
32  
-
33  
-			// If the value is not zero, convert it from px to rem
34  
-			@else {
35  
-				$rem_values: append($rem_values, ($value / $baseline_rem) );
36  
-			}
37  
-
38  
-		}
39  
-
40  
-		// Return the property and its list of converted values
41  
-		#{$property}: $rem_values;
42  
-
43  
-	}
44  
-
45  
-}
  5
+$baseline-px: 10px;
  6
+
  7
+@mixin rem($property, $px-values) {
  8
+  // Convert the baseline into rems
  9
+  $baseline-rem: $baseline-px / 1rem;
  10
+  // Print the first line in pixel values
  11
+  #{$property}: $px-values;
  12
+  // If there is only one (numeric) value, return the property/value line for it.
  13
+  @if type-of($px-values) == "number" {
  14
+    #{$property}: $px-values / $baseline-rem; }
  15
+  @else {
  16
+    // Create an empty list that we can dump values into
  17
+    $rem-values: "";
  18
+    @each $value in $px-values {
  19
+      // If the value is zero, return 0
  20
+      @else if $value == 0 {
  21
+        $rem-values: append($rem-values, $value); }
  22
+      @else {
  23
+        $rem-values: append($rem-values, $value / $baseline-rem); } }
  24
+    // Return the property and its list of converted values
  25
+    #{$property}: $rem-values; } }

0 notes on commit 565ef54

Please sign in to comment.
Something went wrong with that request. Please try again.