Automattic#1491 - Replaced deprecated node-sass with sass, fixed depr…

…ecations in _mixins.scss

.gitignore

@@ -3,4 +3,5 @@
 package-lock.json
 composer.lock
 style.css.map
-.DS_Store
+.DS_Store
+.idea/

package.json

@@ -19,8 +19,8 @@
   "devDependencies": {
     "@wordpress/scripts": "^12.1.0",
     "dir-archiver": "^1.1.1",
-    "node-sass": "^4.14.1",
-    "rtlcss": "^2.5.0"
+    "rtlcss": "^2.5.0",
+    "sass": "^1.35.1"
   },
   "rtlcssConfig": {
     "options": {
@@ -36,11 +36,11 @@
     "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'",
+    "lint:scss": "wp-scripts lint-style sass/**/*.scss",
+    "lint:js": "wp-scripts lint-js js/*.js",
     "bundle": "dir-archiver --src . --dest ../_s.zip --exclude .DS_Store .stylelintrc.json .eslintrc .git .gitattributes .github .gitignore README.md composer.json composer.lock node_modules vendor package-lock.json package.json .travis.yml phpcs.xml.dist sass style.css.map"
   }
 }

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);
 }