Replaced deprecated node-sass with sass, fixed deprecations in _mixin…

…s.scss (#1491)
Automattic · Jan 21, 2022 · 63d72d2 · 63d72d2
1 parent 1c59bd6
commit 63d72d2
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,4 +3,5 @@
 package-lock.json
 composer.lock
 style.css.map
-.DS_Store
+.DS_Store
+.idea/
diff --git a/package.json b/package.json
@@ -19,8 +19,8 @@
   "devDependencies": {
     "@wordpress/scripts": "^19.2.2",
     "dir-archiver": "^1.1.1",
-    "node-sass": "^7.0.1",
-    "rtlcss": "^3.5.0"
+    "rtlcss": "^3.5.0",
+    "sass": "^1.35.1"
   },
   "rtlcssConfig": {
     "options": {
@@ -36,8 +36,8 @@
     "map": false
   },
   "scripts": {
-    "watch": "node-sass sass/ -o ./ --source-map true --output-style expanded --indent-type tab --indent-width 1 -w",
-    "compile:css": "node-sass sass/ -o ./ && stylelint '*.css' --fix || true && stylelint '*.css' --fix",
+    "watch": "sass sass/:./ --source-map --style expanded --indented -w",
+    "compile:css": "sass sass/:./ && stylelint *.css --fix || true && stylelint *.css --fix",
     "compile:rtl": "rtlcss style.css style-rtl.css",
     "lint:scss": "wp-scripts lint-style 'sass/**/*.scss'",
     "lint:js": "wp-scripts lint-js 'js/*.js'",

diff --git a/sass/abstracts/mixins/_mixins.scss b/sass/abstracts/mixins/_mixins.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 // Center block
 @mixin center-block {
 	display: block;
@@ -7,5 +9,5 @@
 
 // Column width with margin
 @mixin column-width($numberColumns: 3) {
-	width: map-get($columns, $numberColumns) - ( ( $columns__margin * ( $numberColumns - 1 ) ) / $numberColumns );
+	width: map-get($columns, $numberColumns) - math.div(($columns__margin * ($numberColumns - 1)), $numberColumns);
 }