Merge pull request #69 from space150/dart-sass

Addressing sass deprecation warnings by replacing / divider with math.div().

CHANGELOG.md

@@ -1,3 +1,10 @@
+### 4.2.0 (Mar 2, 2022)
+
+* Replace / divider with math.div().
+* Allow images with width/height attributes to remain fluid.
+* Remove i rule.
+
+
 ### 4.1.0 (June 24, 2021)
 
 * Add sass npm scripts for compilation.

README.md

@@ -74,4 +74,4 @@ You can remove (if downloaded from Git):
 
 spaceBase is free to use under the [MIT License](LICENSE.md).
 
-Copyright 2013-2021 [space150](http://www.space150.com)
+Copyright 2013-2022 [space150](http://www.space150.com)

scss/_vars.scss

@@ -1,9 +1,10 @@
+@use "sass:math";
 //------------------------------------//
 //  $VARIABLES
 //------------------------------------//
 
 /*
-  spaceBase version: 4.1.0
+  spaceBase version: 4.2.0
   http://spacebase.space150.com
 */
 
@@ -21,10 +22,10 @@ $base-font-size--mobile: $base-font-size;
 // Set to px value if mobile requires different font size
 
 // Calculated measurements
-$line-height-ratio: $base-line-height / $base-font-size;
+$line-height-ratio: math.div($base-line-height, $base-font-size);
 
 $base-spacing-unit: $line-height-ratio * 1rem;
-$half-spacing-unit: $base-spacing-unit / 2;
+$half-spacing-unit: math.div($base-spacing-unit, 2);
 
 // Grid
 $gutter: $base-spacing-unit;

scss/base/_functions.scss

@@ -1,6 +1,7 @@
 //------------------------------------//
 //  $FUNCTIONS
 //------------------------------------//
+@use "sass:math";
 
 // px2em
 //   Convert pixels to ems
@@ -11,7 +12,7 @@
   } @else if unit($px) == em {
     @return $px;
   }
-  @return ($px / 16px) * 1em;
+  @return math.div($px, 16px) * 1em;
 }
 
 // get-breakpoint-width

scss/base/_helpers.scss

@@ -2,7 +2,6 @@
 //  $HELPERS
 //------------------------------------//
 
-
 // Clearfix
 .cf { @include clearfix; }
 

scss/base/_shared.scss

@@ -24,10 +24,6 @@ img {
   -ms-interpolation-mode: bicubic;
 }
 
-// Non-fluid images if you specify `width` and/or `height` attributes
-img[width],
-img[height] { max-width: none; }
-
 // Where `margin-bottom` is concerned, this value will be the same as the
 // base line-height. This allows us to keep a consistent vertical rhythm.
 // As per: csswizardry.com/2012/06/single-direction-margin-declarations

scss/base/_widths.scss

@@ -1,68 +1,69 @@
 //------------------------------------//
 //  $WIDTHS
 //------------------------------------//
+@use "sass:math";
 
 $grid-widths: (
   1:     one-whole,
 
-  1/2:   one-half
-         two-quarters
-         three-sixths
-         four-eighths
-         five-tenths
-         six-twelfths,
+  math.div(1, 2):   one-half
+                    two-quarters
+                    three-sixths
+                    four-eighths
+                    five-tenths
+                    six-twelfths,
 
-  1/3:   one-third
-         two-sixths
-         four-twelfths,
+  math.div(1, 3):   one-third
+                    two-sixths
+                    four-twelfths,
 
-  2/3:   two-thirds
-         four-sixths
-         eight-twelfths,
+  math.div(2, 3):   two-thirds
+                    four-sixths
+                    eight-twelfths,
 
-  1/4:   one-quarter
-         two-eighths
-         three-twelfths,
+  math.div(1, 4):   one-quarter
+                    two-eighths
+                    three-twelfths,
 
-  3/4:   three-quarters
-         six-eighths
-         nine-twelfths,
+  math.div(3, 4):   three-quarters
+                    six-eighths
+                    nine-twelfths,
 
-  1/5:   one-fifth
-         two-tenths,
+  math.div(1, 5):   one-fifth
+                    two-tenths,
 
-  2/5:   two-fifths
-         four-tenths,
+  math.div(2, 5):   two-fifths
+                    four-tenths,
 
-  3/5:   three-fifths
-         six-tenths,
+  math.div(3, 5):   three-fifths
+                    six-tenths,
 
-  4/5:   four-fifths
-         eight-tenths,
+  math.div(4, 5):   four-fifths
+                    eight-tenths,
 
-  1/6:   one-sixth
-         two-twelfths,
+  math.div(1, 6):   one-sixth
+                    two-twelfths,
 
-  5/6:   five-sixths
-         ten-twelfths,
+  math.div(5, 6):   five-sixths
+                    ten-twelfths,
 
   // Eighths
-  1/8:   one-eighth,
-  3/8:   three-eighths,
-  5/8:   five-eighths,
-  7/8:   seven-eighths,
+  math.div(1, 8):   one-eighth,
+  math.div(3, 8):   three-eighths,
+  math.div(5, 8):   five-eighths,
+  math.div(7, 8):   seven-eighths,
 
   // Tenths
-  1/10:  one-tenth,
-  3/10:  three-tenths,
-  7/10:  seven-tenths,
-  9/10:  nine-tenths,
-
-  //Twelfths
-  1/12:  one-twelfth,
-  5/12:  five-twelfths,
-  7/12:  seven-twelfths,
-  11/12: eleven-twelfths
+  math.div(1, 10):  one-tenth,
+  math.div(3, 10):  three-tenths,
+  math.div(7, 10):  seven-tenths,
+  math.div(9, 10):  nine-tenths,
+
+  // Twelfths
+  math.div(1, 12):  one-twelfth,
+  math.div(5, 12):  five-twelfths,
+  math.div(7, 12):  seven-twelfths,
+  math.div(11, 12): eleven-twelfths
 );
 
 @mixin grid-setup($namespace: "", $property: width) {

scss/ui/_lists.scss

@@ -1,6 +1,7 @@
 //------------------------------------//
 //  $LISTS
 //------------------------------------//
+@use "sass:math";
 
 .h-list,
 .v-list {
@@ -45,5 +46,5 @@
 }
 
 .v-list > li {
-  margin-top: $half-spacing-unit / 2;
+  margin-top: math.div($half-spacing-unit, 2);
 }

scss/ui/_typography.scss

@@ -1,9 +1,10 @@
 //------------------------------------//
 //  $TYPOGRAPHY
 //------------------------------------//
+@use "sass:math";
 
 html {
-  font: #{($base-font-size--mobile/16px)*1em}/#{$line-height-ratio} $font-body;
+  font: #{math.div($base-font-size--mobile, 16px)*1em}/#{$line-height-ratio} $font-body;
   color: $black;
   background: $white;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -16,8 +17,6 @@ a {
   &:hover, &:focus { text-decoration: underline; }
 }
 
-i { font-style: normal; }
-
 h1, .h1,
 h2, .h2,
 h3, .h3,