Update division usage for the future versions of Dart Sass.

CHANGELOG.md

@@ -1,94 +1,64 @@
 # Change Log
 _Change is the essence._
 
-## 1.2.7
-
-### Removed
-
-- Removed `yarn.lock` file.
+## 1.3.0
 
-## 1.2.6
+- **Updated:** The usage of division outside of calc() has been updated for the future versions of Dart Sass. Deprecated codes have been replaced with math.div() method. **Updated mixins and functions are as follows:** `background-dots`, `ratio-box`, `responsive-video`, `triangle`, `clear-unit`, `convert-to-em`, `remify`.
+- **Added:** `@use "sass:math";` at rule has been added at the top of `gerillass.scss` and `gerillass-prefix.scss` files in order to be able to use `math.div()` method.
 
-### Added
+## 1.2.7
 
-- Added `sass-loader` package.
-- Added `sass` package.
+- **Removed:** `yarn.lock` file is removed.
 
-### Removed
+## 1.2.6
 
-- Removed `node-sass` in order to fix vulnerability issues.
+- **Added:** `sass-loader` package has been added.
+- **Added:** `sass` package has been added.
+- **Removed:** `node-sass` package is removed in order to fix vulnerability issues.
 
 ## 1.2.5
 
-### Updated
-
-- Updated `node-sass` version from ^4.14.1 to ^7.0.1.
+- **Updated:** `node-sass` version is updated from ^4.14.1 to ^7.0.1.
 
 ## 1.2.4
 
-### Updated
-
-- Updated `extend` usage for Loadify mixin.
-- Updated the title of `CHANGELOG.md` file.
+- **Updated:** `extend` usage is updated for Loadify mixin.
+- **Updated:** The title of `CHANGELOG.md` file has been changed.
 
 ## 1.2.3
 
-### Added
-
-- Added `__isTime` function to validate the time values.
-
-### Updated
-
-- Loadify mixin has been refactored.
+- **Added:** `__isTime` function is added to validate the time values.
+- **Updated:** Loadify mixin has been refactored.
 
 ## 1.2.2
 
-### Changed
-
-- Improved Loadify mixin. The `init` argument is now available to initialize the mixin at the root level of stylesheet.
-
-### Removed
-
-- Removed `.travis.yml` file. Travis CI integration no longer available.
+- **Updated:** Loadify mixin has been updated. The `init` argument is now available to initialize the mixin at the root level of stylesheet.
+- **Removed:** `.travis.yml` file. Travis CI integration no longer available.
 
 ## 1.2.1
 
-### Added
-
-- The `extend` directive has been added to use Loadify mixin for multiple selectors.
+- **Added:** The `extend` directive has been added to use Loadify mixin for multiple selectors.
 
 ## 1.2.0
 
-### Added
-
-- Added Loadify: A new mixin to help page elements render more natural during the time of page loads.
+- **Added:** Loadify mixin added to the library in order to help page elements render more natural during the time of page loads.
 
 ## 1.1.3
 
-### Added
-
-- Added box-sizing property to Columnizer mixin.
+- **Updated:** `box-sizing` property has been added to the Columnizer mixin.
 
 ## 1.1.2
 
-### Updated
-
-- Uptade for security vulnerabilities.
+- **Uptaded:** An update for security vulnerabilities.
 
 ## 1.1.1
 
-### Fixed
-
 - Bugfix for a comment.
 
 ## 1.1.0
 
-### Removed
-
 - Remove all the `gls-` prefixes from the mixin files under the `library` folder and make prefix usage optional (`gls-` prefix still can ben use).
 
 ## 0.0.1
 
-### Added
-
 - Changelog created!

gulpfile.js

@@ -24,11 +24,18 @@ function add_charset(done) {
   done();
 }
 
+function add_sassmath(done) {
+  return src("scss/_gerillass-prefix.scss")
+    .pipe(header('\n@use "sass:math";'))
+    .pipe(dest("scss"));
+  done();
+}
+
 function add_prefix(done) {
   return src("scss/_gerillass-prefix.scss")
     .pipe(replace('@mixin ', "@mixin gls-"))
     .pipe(dest("scss"));
   done();
 }
 
-exports.start = series(gather_mixins, del_charset, add_charset, add_prefix);
+exports.start = series(gather_mixins, del_charset, add_sassmath, add_charset, add_prefix);

package.json

@@ -6,7 +6,7 @@
   "author": "Halil İbrahim Çakıroğlu",
   "main": "scss/_gerillass.scss",
   "license": "Apache-2.0",
-  "version": "1.2.7",
+  "version": "1.3.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/selfishprimate/gerillass"

scss/_gerillass-prefix.scss

@@ -1,4 +1,5 @@
 @charset "UTF-8";
+@use "sass:math";
 
 @mixin gls-adaptive($gutter: 30px) {
   $actual-breakpoints: map-remove($map-for-breakpoints, "xsmall");
@@ -107,21 +108,21 @@
     @if $diagonal == true {
       background-image: radial-gradient($color $size, transparent 0),
         radial-gradient($color $size, transparent 0);
-      background-position: ($gutter / 2) ($gutter / 2),
+      background-position: math.div($gutter, 2) math.div($gutter, 2),
         ($gutter * 2) ($gutter * 2);
     } @else if $diagonal == false {
       background-image: radial-gradient($color $size, transparent 0);
-      background-position: ($gutter / 2) ($gutter / 2);
+      background-position: math.div($gutter, 2) math.div($gutter, 2);
     }
   } @else if $color {
     @if $diagonal == true {
       background-image: radial-gradient(nth($color, 1) $size, transparent 0),
         radial-gradient(nth($color, length($color)) $size, transparent 0);
-      background-position: ($gutter / 2) ($gutter / 2),
+      background-position: math.div($gutter, 2) math.div($gutter, 2),
         ($gutter * 2) ($gutter * 2);
     } @else if $diagonal == false {
       background-image: radial-gradient(nth($color, 1) $size, transparent 0);
-      background-position: ($gutter / 2) ($gutter / 2);
+      background-position: math.div($gutter, 2) math.div($gutter, 2);
       @if length($color) > 1 {
         @error "Please do not pass more than one argument when you disable 'diagonal' property! Simply remove the argument(s) after '#{nth($color, 1)}' to resolve the problem.";
       }
@@ -975,10 +976,10 @@
           $width: __convertToNumber(str-slice($ratio, 1, $colon-index - 1));
           $height: __convertToNumber(str-slice($ratio, $colon-index + 1));
         }
-        $calc: ($height / $width) * 100;
+        $calc: math.div($height, $width) * 100;
         padding-top: #{$calc * 1%};
       } @else if type-of($ratio) == number {
-        padding-top: (1 / $ratio) * 100%;
+        padding-top: math.div(1, $ratio) * 100%;
       }
     }
   }
@@ -1129,10 +1130,10 @@
           $width: __convertToNumber(str-slice($ratio, 1, $colon-index - 1));
           $height: __convertToNumber(str-slice($ratio, $colon-index + 1));
         }
-        $calc: ($height / $width) * 100;
+        $calc: math.div($height, $width) * 100;
         padding-top: #{$calc * 1%};
       } @else if type-of($ratio) == number {
-        padding-top: (1 / $ratio) * 100%;
+        padding-top: math.div(1, $ratio) * 100%;
       }
     }
   }
@@ -1519,25 +1520,25 @@
       border-style: solid;
       @if $direction == "top"{
         border-color: transparent transparent $color;
-        border-width: 0 (nth($size, 1) / 2) if(length($size) == 2, nth($size, 2), nth($size, 1));
+        border-width: 0 math.div(nth($size, 1), 2) if(length($size) == 2, nth($size, 2), nth($size, 1));
       } @else if $direction == "top-right" {
         border-color: transparent $color transparent transparent;
         border-width: 0 nth($size, 1) nth($size, 1) 0;
       } @else if $direction == "right" {
         border-color: transparent transparent transparent $color;
-        border-width: (if(length($size) == 2, nth($size, 2), nth($size, 1)) / 2) 0 (if(length($size) == 2, nth($size, 2), nth($size, 1)) / 2) nth($size, 1);
+        border-width: math.div(if(length($size) == 2, nth($size, 2), nth($size, 1)),  2) 0 math.div(if(length($size) == 2, nth($size, 2), nth($size, 1)), 2) nth($size, 1);
       } @else if $direction == "bottom-right" {
         border-color: transparent transparent $color;
         border-width: 0 0 nth($size, 1) nth($size, 1);
       } @else if $direction == "bottom" {
         border-color: $color transparent transparent;
-        border-width: if(length($size) == 2, nth($size, 2), nth($size, 1)) (nth($size, 1) / 2) 0;
+        border-width: if(length($size) == 2, nth($size, 2), nth($size, 1)) math.div(nth($size, 1), 2) 0;
       } @else if $direction == "bottom-left" {
         border-color: transparent transparent transparent $color;
         border-width: nth($size, 1) 0 0 nth($size, 1);
       } @else if $direction == "left" {
         border-color: transparent $color transparent transparent;
-        border-width: (if(length($size) == 2, nth($size, 2), nth($size, 1)) / 2) nth($size, 1) (if(length($size) == 2, nth($size, 2), nth($size, 1)) / 2) 0;
+        border-width: math.div(if(length($size) == 2, nth($size, 2), nth($size, 1)), 2) nth($size, 1) math.div(if(length($size) == 2, nth($size, 2), nth($size, 1)), 2) 0;
       } @else if $direction == "top-left" {
         border-color: $color transparent transparent;
         border-width: nth($size, 1) nth($size, 1) 0 0;

scss/_gerillass.scss

@@ -1,4 +1,5 @@
 @charset "UTF-8";
+@use "sass:math";
 
 // https://www.gerillass.com/
 // Copyright 2020 by Halil İbrahim Çakıroğlu

scss/library/_background-dots.scss

@@ -12,21 +12,21 @@
     @if $diagonal == true {
       background-image: radial-gradient($color $size, transparent 0),
         radial-gradient($color $size, transparent 0);
-      background-position: ($gutter / 2) ($gutter / 2),
+      background-position: math.div($gutter, 2) math.div($gutter, 2),
         ($gutter * 2) ($gutter * 2);
     } @else if $diagonal == false {
       background-image: radial-gradient($color $size, transparent 0);
-      background-position: ($gutter / 2) ($gutter / 2);
+      background-position: math.div($gutter, 2) math.div($gutter, 2);
     }
   } @else if $color {
     @if $diagonal == true {
       background-image: radial-gradient(nth($color, 1) $size, transparent 0),
         radial-gradient(nth($color, length($color)) $size, transparent 0);
-      background-position: ($gutter / 2) ($gutter / 2),
+      background-position: math.div($gutter, 2) math.div($gutter, 2),
         ($gutter * 2) ($gutter * 2);
     } @else if $diagonal == false {
       background-image: radial-gradient(nth($color, 1) $size, transparent 0);
-      background-position: ($gutter / 2) ($gutter / 2);
+      background-position: math.div($gutter, 2) math.div($gutter, 2);
       @if length($color) > 1 {
         @error "Please do not pass more than one argument when you disable 'diagonal' property! Simply remove the argument(s) after '#{nth($color, 1)}' to resolve the problem.";
       }

scss/library/_ratio-box.scss

@@ -20,10 +20,10 @@
           $width: __convertToNumber(str-slice($ratio, 1, $colon-index - 1));
           $height: __convertToNumber(str-slice($ratio, $colon-index + 1));
         }
-        $calc: ($height / $width) * 100;
+        $calc: math.div($height, $width) * 100;
         padding-top: #{$calc * 1%};
       } @else if type-of($ratio) == number {
-        padding-top: (1 / $ratio) * 100%;
+        padding-top: math.div(1, $ratio) * 100%;
       }
     }
   }

scss/library/_responsive-video.scss

@@ -20,10 +20,10 @@
           $width: __convertToNumber(str-slice($ratio, 1, $colon-index - 1));
           $height: __convertToNumber(str-slice($ratio, $colon-index + 1));
         }
-        $calc: ($height / $width) * 100;
+        $calc: math.div($height, $width) * 100;
         padding-top: #{$calc * 1%};
       } @else if type-of($ratio) == number {
-        padding-top: (1 / $ratio) * 100%;
+        padding-top: math.div(1, $ratio) * 100%;
       }
     }
   }

scss/library/_triangle.scss

@@ -10,25 +10,25 @@
       border-style: solid;
       @if $direction == "top"{
         border-color: transparent transparent $color;
-        border-width: 0 (nth($size, 1) / 2) if(length($size) == 2, nth($size, 2), nth($size, 1));
+        border-width: 0 math.div(nth($size, 1), 2) if(length($size) == 2, nth($size, 2), nth($size, 1));
       } @else if $direction == "top-right" {
         border-color: transparent $color transparent transparent;
         border-width: 0 nth($size, 1) nth($size, 1) 0;
       } @else if $direction == "right" {
         border-color: transparent transparent transparent $color;
-        border-width: (if(length($size) == 2, nth($size, 2), nth($size, 1)) / 2) 0 (if(length($size) == 2, nth($size, 2), nth($size, 1)) / 2) nth($size, 1);
+        border-width: math.div(if(length($size) == 2, nth($size, 2), nth($size, 1)),  2) 0 math.div(if(length($size) == 2, nth($size, 2), nth($size, 1)), 2) nth($size, 1);
       } @else if $direction == "bottom-right" {
         border-color: transparent transparent $color;
         border-width: 0 0 nth($size, 1) nth($size, 1);
       } @else if $direction == "bottom" {
         border-color: $color transparent transparent;
-        border-width: if(length($size) == 2, nth($size, 2), nth($size, 1)) (nth($size, 1) / 2) 0;
+        border-width: if(length($size) == 2, nth($size, 2), nth($size, 1)) math.div(nth($size, 1), 2) 0;
       } @else if $direction == "bottom-left" {
         border-color: transparent transparent transparent $color;
         border-width: nth($size, 1) 0 0 nth($size, 1);
       } @else if $direction == "left" {
         border-color: transparent $color transparent transparent;
-        border-width: (if(length($size) == 2, nth($size, 2), nth($size, 1)) / 2) nth($size, 1) (if(length($size) == 2, nth($size, 2), nth($size, 1)) / 2) 0;
+        border-width: math.div(if(length($size) == 2, nth($size, 2), nth($size, 1)), 2) nth($size, 1) math.div(if(length($size) == 2, nth($size, 2), nth($size, 1)), 2) 0;
       } @else if $direction == "top-left" {
         border-color: $color transparent transparent;
         border-width: nth($size, 1) nth($size, 1) 0 0;

scss/utilities/_clear-unit.scss

@@ -1,5 +1,5 @@
 @charset "UTF-8";
 
 @function __clearUnit($value) {
-  @return $value / ($value * 0 + 1);
+  @return math.div($value, ($value * 0 + 1));
 }

scss/utilities/_convert-to-em.scss

@@ -2,6 +2,6 @@
 
 @function __convertToEm($value) {
   $base-value: 16px;
-  $rem-value: $value / $base-value;
+  $rem-value: math.div($value, $base-value);
   @return $rem-value + unquote("em");
 }

scss/utilities/_remify.scss

@@ -2,6 +2,6 @@
 
 @function __remify($value) {
   $base-value: 16px;
-  $rem-value: $value / $base-value;
+  $rem-value: math.div($value, $base-value);
   @return $rem-value * 1rem;
 }