Merge pull request #1864 from adumesny/master

use dart-sass

Author: adumesny

Gruntfile.js

@@ -9,7 +9,7 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-contrib-connect');
   grunt.loadNpmTasks('grunt-protractor-webdriver');
 
-  const sass = require('node-sass');
+  const sass = require('sass');
 
   grunt.initConfig({
     sass: {

README.md

@@ -189,10 +189,10 @@ GridStack.init( {column: N} );
 ```html
 <link href="node_modules/gridstack/dist/gridstack-extra.css" rel="stylesheet"/>
 
-<div class="grid-stack grid-stack-N">...</div>
+<div class="grid-stack">...</div>
 ```
 
-Note: class `.grid-stack-N` was added and we include `gridstack-extra.css` which defines CSS for grids with custom [2-11] columns. Anything more and you'll need to generate the SASS/CSS yourself (see next).
+Note: class `.grid-stack-N` will automatically be added and we include `gridstack-extra.css` which defines CSS for grids with custom [2-11] columns. Anything more and you'll need to generate the SASS/CSS yourself (see next).
 
 See example: [2 grids demo](http://gridstack.github.io/gridstack.js/demo/two.html) with 6 columns
 
@@ -204,11 +204,11 @@ For instance for 3-column grid you need to rewrite CSS to be:
 
 ```css
 .grid-stack-item[gs-w="3"]  { width: 100% }
-.grid-stack-item[gs-w="2"]  { width: 66.66666667% }
-.grid-stack-item[gs-w="1"]  { width: 33.33333333% }
+.grid-stack-item[gs-w="2"]  { width: 66.67% }
+.grid-stack-item[gs-w="1"]  { width: 33.33% }
 
-.grid-stack-item[gs-x="2"]  { left: 66.66666667% }
-.grid-stack-item[gs-x="1"]  { left: 33.33333333% }
+.grid-stack-item[gs-x="2"]  { left: 66.67% }
+.grid-stack-item[gs-x="1"]  { left: 33.33% }
 ```
 
 For 4-column grid it should be:
@@ -229,23 +229,23 @@ and so on.
 Better yet, here is a SASS code snippet which can make life much easier (Thanks to @ascendantofrain, [#81](https://github.com/gridstack/gridstack.js/issues/81) and @StefanM98, [#868](https://github.com/gridstack/gridstack.js/issues/868)) and you can use sites like [sassmeister.com](https://www.sassmeister.com/) to generate the CSS for you instead:
 
 ```sass
+@use "sass;math";
 .grid-stack > .grid-stack-item {
 
   $gridstack-columns: 12;
 
-  min-width: (100% / $gridstack-columns);
+  min-width: math.div(100%, $gridstack-columns);
 
-  @for $i from 1 through $gridstack-columns {
-    &[gs-w='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
-    &[gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
-    &[gs-min-w='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
-    &[gs-max-w='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
+  @for $i from 0 through $gridstack-columns {
+    &[gs-w='#{$i}'] { width: math.div(100%, $gridstack-columns) * $i; }
+    &[gs-x='#{$i}'] { left: math.div(100%, $gridstack-columns) * $i; }
+    &[gs-min-w='#{$i}'] { min-width: math.div(100%, $gridstack-columns) * $i; }
+    &[gs-max-w='#{$i}'] { max-width: math.div(100%, $gridstack-columns) * $i; }
   }
 }
 ```
 
-you can also use the SASS [src/gridstack-extra.scss](https://github.com/gridstack/gridstack.js/tree/master/src/gridstack-extra.scss) included in NPM package and modify to add more columns
-and also have the `.grid-stack-N` prefix to support letting the user change columns dynamically.
+you can also use the SASS [src/gridstack-extra.scss](https://github.com/gridstack/gridstack.js/tree/master/src/gridstack-extra.scss) included in NPM package and modify to add more columns.
 
 Sample gulp command for 30 columns:
 ```js

demo/two.html

@@ -39,12 +39,12 @@ <h1>Two grids demo</h1>
       <div class="col-md-6">
         <a onClick="toggleFloat(this, 0)" class="btn btn-primary" href="#">float: false</a>
         <a onClick="compact(0)" class="btn btn-primary" href="#">Compact</a>
-        <div class="grid-stack grid-stack-6"></div>
+        <div class="grid-stack"></div>
       </div>
       <div class="col-md-6">
         <a onClick="toggleFloat(this, 1)" class="btn btn-primary" href="#">float: true</a>
         <a onClick="compact(1)" class="btn btn-primary" href="#">Compact</a>
-        <div class="grid-stack grid-stack-6"></div>
+        <div class="grid-stack"></div>
       </div>
     </div>
   </div>

doc/CHANGES.md

@@ -64,6 +64,7 @@ Change log
 
 ## 4.2.7-dev (TBD)
 * fix [#1860](https://github.com/gridstack/gridstack.js/issues/1860) nested grid save inf loop fix
+* use latest `dart-sass`, updated comments
 
 ## 4.2.7 (2021-9-12)
 

package.json

@@ -54,7 +54,6 @@
     "url": "https://github.com/gridstack/gridstack.js/issues"
   },
   "homepage": "http://gridstack.github.io/gridstack.js/",
-  "dependencies": {},
   "devDependencies": {
     "@types/jasmine": "^3.5.9",
     "@types/jquery": "^3.5.1",
@@ -83,9 +82,9 @@
     "karma-cli": "^2.0.0",
     "karma-jasmine": "^4.0.1",
     "karma-typescript": "4.1.1",
-    "node-sass": "^5.0.0",
     "protractor": "^7.0.0",
     "puppeteer": "^5.4.1",
+    "sass": "^1.42.1",
     "serve-static": "^1.14.1",
     "ts-loader": "^8.0.7",
     "typescript": "^3.7",

src/gridstack-extra.scss

@@ -3,20 +3,22 @@
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
+@use "sass:math";
+
 $gridstack-columns-start: 2 !default;
 $gridstack-columns: 11 !default;
 
 @mixin grid-stack-items($columns) {
   .grid-stack.grid-stack-#{$columns} {
 
     > .grid-stack-item {
-      min-width: 100% / $columns;
+      min-width: math.div(100%, $columns);
 
       @for $i from 1 through $columns {
-        &[gs-w='#{$i}'] { width: (100% / $columns) * $i; }
-        &[gs-x='#{$i}'] { left: (100% / $columns) * $i; }
-        &[gs-min-w='#{$i}'] { min-width: (100% / $columns) * $i; }
-        &[gs-max-w='#{$i}'] { max-width: (100% / $columns) * $i; }
+        &[gs-w='#{$i}'] { width: math.div(100%, $columns) * $i; }
+        &[gs-x='#{$i}'] { left: math.div(100%, $columns) * $i; }
+        &[gs-min-w='#{$i}'] { min-width: math.div(100%, $columns) * $i; }
+        &[gs-max-w='#{$i}'] { max-width: math.div(100%, $columns) * $i; }
       }
     }
   }

src/gridstack.scss

@@ -3,6 +3,8 @@
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
+@use "sass:math";
+
 $gridstack-columns: 12 !default;
 $animation_speed: .3s !default;
 
@@ -36,7 +38,7 @@ $animation_speed: .3s !default;
   }
 
   > .grid-stack-item {
-    min-width: 100% / $gridstack-columns;
+    min-width: math.div(100%, $gridstack-columns);
     position: absolute;
     padding: 0;
 
@@ -97,10 +99,10 @@ $animation_speed: .3s !default;
     }
 
     @for $i from 0 through $gridstack-columns {
-      &[gs-w='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
-      &[gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
-      &[gs-min-w='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
-      &[gs-max-w='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
+      &[gs-w='#{$i}'] { width: math.div(100%, $gridstack-columns) * $i; }
+      &[gs-x='#{$i}'] { left: math.div(100%, $gridstack-columns) * $i; }
+      &[gs-min-w='#{$i}'] { min-width: math.div(100%, $gridstack-columns) * $i; }
+      &[gs-max-w='#{$i}'] { max-width: math.div(100%, $gridstack-columns) * $i; }
     }
   }