fix #472

primer · Jul 18, 2018 · ac762d2 · ac762d2
1 parent c73a52b
commit ac762d2
Showing 1 changed file with 16 additions and 16 deletions.
diff --git a/modules/primer-utilities/lib/margin.scss b/modules/primer-utilities/lib/margin.scss
@@ -6,41 +6,41 @@
   @include breakpoint($breakpoint) {
     // Loop through the spacer values
     @for $i from 1 through length($spacers) {
-      $size: #{nth($spacers, $i)}; // sm, md, lg, xl
-      $scale: #{$i - 1};  // 0, 1, 2, 3, 4, 5, 6
+      $size: nth($spacers, $i); // sm, md, lg, xl
+      $scale: $i - 1;  // 0, 1, 2, 3, 4, 5, 6
 
       /* Set a #{$size} margin to all sides at the breakpoint #{$breakpoint} */
-      .m#{$variant}-#{$scale}  { margin: #{$size} !important; }
+      .m#{$variant}-#{$scale}  { margin: $size !important; }
       /* Set a #{$size} margin on the top at the breakpoint #{$breakpoint} */
-      .mt#{$variant}-#{$scale} { margin-top: #{$size} !important; }
+      .mt#{$variant}-#{$scale} { margin-top: $size !important; }
       /* Set a #{$size} margin on the right at the breakpoint #{$breakpoint} */
-      .mr#{$variant}-#{$scale} { margin-right: #{$size} !important; }
+      .mr#{$variant}-#{$scale} { margin-right: $size !important; }
       /* Set a #{$size} margin on the bottom at the breakpoint #{$breakpoint} */
-      .mb#{$variant}-#{$scale} { margin-bottom: #{$size} !important; }
+      .mb#{$variant}-#{$scale} { margin-bottom: $size !important; }
       /* Set a #{$size} margin on the left at the breakpoint #{$breakpoint} */
-      .ml#{$variant}-#{$scale} { margin-left: #{$size} !important; }
+      .ml#{$variant}-#{$scale} { margin-left: $size !important; }
 
-      @if $size != 0 {
+      @if ($size != 0) {
         /* Set a negative #{$size} margin on top at the breakpoint #{$breakpoint} */
-        .mt#{$variant}-n#{$scale} { margin-top   : -#{$size} !important; }
+        .mt#{$variant}-n#{$scale} { margin-top   : -$size !important; }
         /* Set a negative #{$size} margin on the right at the breakpoint #{$breakpoint} */
-        .mr#{$variant}-n#{$scale} { margin-right : -#{$size} !important; }
+        .mr#{$variant}-n#{$scale} { margin-right : -$size !important; }
         /* Set a negative #{$size} margin on the bottom at the breakpoint #{$breakpoint} */
-        .mb#{$variant}-n#{$scale} { margin-bottom: -#{$size} !important; }
+        .mb#{$variant}-n#{$scale} { margin-bottom: -$size !important; }
         /* Set a negative #{$size} margin on the left at the breakpoint #{$breakpoint} */
-        .ml#{$variant}-n#{$scale} { margin-left  : -#{$size} !important; }
+        .ml#{$variant}-n#{$scale} { margin-left  : -$size !important; }
       }
 
       /* Set a #{$size} margin on the left & right at the breakpoint #{$breakpoint} */
       .mx#{$variant}-#{$scale} {
-        margin-right: #{$size} !important;
-        margin-left: #{$size} !important;
+        margin-right: $size !important;
+        margin-left: $size !important;
       }
 
       /* Set a #{$size} margin on the top & bottom at the breakpoint #{$breakpoint} */
       .my#{$variant}-#{$scale} {
-        margin-top: #{$size} !important;
-        margin-bottom: #{$size} !important;
+        margin-top: $size !important;
+        margin-bottom: $size !important;
       }
     }
   }