Skip to content

Commit 76a78cd

Browse files
authored
Merge pull request #2271 from ffxsam/patch-1
Update README.md (SASS deprecation)
2 parents 8c59a7c + 4d72b5e commit 76a78cd

File tree

1 file changed

+5
-7
lines changed

1 file changed

+5
-7
lines changed

README.md

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# gridstack.js
1+
be# gridstack.js
22

33
[![NPM version](https://img.shields.io/npm/v/gridstack.svg)](https://www.npmjs.com/package/gridstack)
44
[![Coverage Status](https://coveralls.io/repos/github/gridstack/gridstack.js/badge.svg?branch=develop)](https://coveralls.io/github/gridstack/gridstack.js?branch=develop)
@@ -248,18 +248,16 @@ and so on.
248248
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:
249249

250250
```sass
251-
@use "sass:math";
252251
.grid-stack > .grid-stack-item {
253-
254252
$gridstack-columns: 12;
255253
256-
min-width: 100%/$gridstack-columns;
254+
min-width: calc(100% / $gridstack-columns);
257255
258256
@for $i from 0 through $gridstack-columns {
259-
&[gs-w='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
260-
&[gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
257+
&[gs-w='#{$i}'] { width: (calc(100% / $gridstack-columns)) * $i; }
258+
&[gs-x='#{$i}'] { left: (calc(100% / $gridstack-columns)) * $i; }
261259
}
262-
}
260+
}
263261
```
264262

265263
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)