Stylesheet clean-up

Author: xsynaptic

src/scss/_config.scss

@@ -3,17 +3,17 @@
 // Set all your configuration variables here!
 
 // Width of the overall site as well as the left and right content columns
-$width-site: 1000px;
-$width-left: 650px;
-$width-right: 350px;
+$width-site:    1000px;
+$width-left:    650px;
+$width-right:   350px;
 
 // Breakpoints
-$break-small: 480px;
-$break-medium: 620px;
-$break-large: 800px;
+$break-small:   480px;
+$break-medium:  620px;
+$break-large:   800px;
 
 // A standard margin
-$spacer: 30px;
+$spacer:        30px;
 
 // A modest palette; see `_library.scss` for the color() function
 $color: (

src/scss/_general.scss

@@ -4,7 +4,7 @@ html {
   font-size: 18px;
 }
 body {
-  color: color("text");
+  color: color(text);
   font-family: "Noto Serif", Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
   line-height: 1.44444;
 }
@@ -24,10 +24,10 @@ a {
   transition: color .8s ease-out;
   .wrap-content &,
   .inline-menu & {
-    color: color("link");
+    color: color(link);
   }
   .wrap-sidebar & {
-    color: color("link-muted");
+    color: color(link-muted);
   }
 }
 figure {

src/scss/_helpers.scss

@@ -10,20 +10,20 @@
   @include scut-hide-visually;
 }
 %spacer-above {
-  margin-top: $spacer;
+  margin-top: spacer();
 }
 %spacer-above-2 {
-  margin-top: $spacer*2;
+  margin-top: spacer(2);
 }
 %spacer-above-3 {
-  margin-top: $spacer*3;
+  margin-top: spacer(3);
 }
 %spacer-below {
-  margin-bottom: $spacer;
+  margin-bottom: spacer();
 }
 %spacer-below-2 {
-  margin-bottom: $spacer*2;
+  margin-bottom: spacer(2);
 }
 %spacer-below-3 {
-  margin-bottom: $spacer*3;
+  margin-bottom: spacer(3);
 }

src/scss/_layout.scss

@@ -6,51 +6,51 @@
 // A general wrapper for various site elements
 %wrap {
   box-sizing: border-box; // Makes life a little easier
-  padding: 0 $spacer 0 $spacer;
+  padding: 0 spacer() 0 spacer();
 }
 .wrap-header {
   @extend %wrap;
-  background: color("header-background");
-  padding-bottom: $spacer/2;
-  padding-top: $spacer/2;
+  background: color(header-background);
+  padding-bottom: spacer(1/2);
+  padding-top: spacer(1/2);
   @include media-above($break-large) {
-    padding-left: $spacer*2;
-    padding-right: $spacer*2;
+    padding-left: spacer(2);
+    padding-right: spacer(2);
   }
 }
 .wrap-main { // Wrapper around content and sidebar
   @extend %clearfix;
   @include media-above($break-large) {
     @include scut-center-block($width-site);
-    padding: 0 $spacer*2 0 $spacer*2;
+    padding: 0 spacer(2) 0 spacer(2);
   }
 }
 .wrap-content {
   @extend %wrap;
-  padding: $spacer;
+  padding: spacer();
   @include media-above($break-large) {
     float: left;
     padding-left: 0;
-    padding-right: $spacer;
-    width: percentage( ( $width-left + $spacer ) / $width-site );
+    padding-right: spacer();
+    width: percentage( ( $width-left + spacer() ) / $width-site );
   }
 }
 .wrap-sidebar {
   @extend %wrap;
-  padding: $spacer;
+  padding: spacer();
   @include media-above($break-large) {
     float: right;
-    padding-left: $spacer;
+    padding-left: spacer();
     padding-right: 0;
-    width: percentage( 1 - ( ( $width-left + $spacer ) / $width-site ) );
+    width: percentage( 1 - ( ( $width-left + spacer() ) / $width-site ) );
   }
 }
 .wrap-footer {
   @extend %wrap;
-  padding-bottom: $spacer;
+  padding-bottom: spacer();
   @include media-above($break-large) {
-    padding-left: $spacer*2;
-    padding-right: $spacer*2;
+    padding-left: spacer(2);
+    padding-right: spacer(2);
   }
 }
 .site-header,

src/scss/_library.scss

@@ -34,6 +34,15 @@
 
 
 
+// == LAYOUT == //
+
+// Margins and positioning helper function
+@function spacer($val: 1) {
+  @return $spacer * $val + 0px;
+}
+
+
+
 // == PALETTE == //
 
 // A simple function to retrieve a color from the array; adapted from http://erskinedesign.com/blog/friendlier-colour-names-sass-maps/

src/scss/_menus.scss

@@ -9,7 +9,7 @@
     padding: 0;
     & > li {
       float: left;
-      margin-right: $spacer/2;
+      margin-right: spacer(1/2);
       &:last-of-type {
         margin-right: 0;
       }

src/scss/_navigation.scss

@@ -7,13 +7,13 @@
 .nav-previous {
   box-sizing: border-box;
   float: left;
-  padding-right: $spacer/2;
+  padding-right: spacer(1/2);
   width: 50%;
 }
 .nav-next {
   box-sizing: border-box;
   float: right;
-  padding-left: $spacer/2;
+  padding-left: spacer(1/2);
   text-align: right;
   width: 50%;
 }