Skip to content

Commit fc71297

Browse files
authored
Update README.md (SASS deprecation)
Updated SASS code to not used deprecated methods.
1 parent 6ed2653 commit fc71297

File tree

1 file changed

+9
-7
lines changed

1 file changed

+9
-7
lines changed

README.md

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -247,18 +247,20 @@ and so on.
247247
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:
248248

249249
```sass
250-
@use "sass:math";
251250
.grid-stack > .grid-stack-item {
251+
$gridstack-columns: 2;
252252
253-
$gridstack-columns: 12;
254-
255-
min-width: 100%/$gridstack-columns;
253+
min-width: calc(100% / $gridstack-columns);
256254
257255
@for $i from 0 through $gridstack-columns {
258-
&[gs-w='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
259-
&[gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
256+
&[gs-w='#{$i}'] {
257+
width: (calc(100% / $gridstack-columns)) * $i;
258+
}
259+
&[gs-x='#{$i}'] {
260+
left: (calc(100% / $gridstack-columns)) * $i;
261+
}
260262
}
261-
}
263+
}
262264
```
263265

264266
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.

0 commit comments

Comments
 (0)