Skip to content

Commit

Permalink
Added Calc for sass 2.0 deprecation
Browse files Browse the repository at this point in the history
  • Loading branch information
@ggedde
ggedde committed Jan 6, 2022
1 parent 9e019f6 commit 57a1e5d
Show file tree
Hide file tree
Showing 9 changed files with 106 additions and 39 deletions.
18 changes: 18 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
####### Misc Files #######
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
ehthumbs.db
*[Tt]humbs.db
*.Trashes
*.lock
*.DS_Store
*.swp
*.out
*.log
error_log
access_log
.sass-cache
node_modules
36 changes: 18 additions & 18 deletions _grid.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,26 +30,26 @@
grid-template-columns: repeat( auto-fit, minmax(#{$i}00px, 1fr));
}
.row.columns-#{$i} > * {
flex: 0 calc(#{(round(percentage(1 / $i) * 1000) / 1000)} - #{(map-get($gaps, 'default') - (round((map-get($gaps, 'default') / $i) * 1000) / 1000))});
flex: 0 calc(#{calc(round(percentage(calc(1 / $i)) * 1000) / 1000)} - #{(map-get($gaps, 'default') - calc(round(calc(map-get($gaps, 'default') / $i) * 1000) / 1000))});
}
@if $i > 1 {
.row.g-0.columns-#{$i} > * {
max-width: #{(round(percentage(1 / $i) * 1000) / 1000)};
flex: 0 #{(round(percentage(1 / $i) * 1000) / 1000)};
max-width: #{calc(round(percentage(calc(1 / $i)) * 1000) / 1000)};
flex: 0 #{calc(round(percentage(calc(1 / $i)) * 1000) / 1000)};
}
}

.row > .col-#{$i} {
flex: calc(#{(round(percentage($i / 12) * 1000) / 1000)} - #{map-get($gaps, 'default')});
flex: calc(#{calc(round(percentage(calc($i / 12)) * 1000) / 1000)} - #{map-get($gaps, 'default')});
@if $i < 12 {
max-width: calc(#{(round(percentage($i / 12) * 1000) / 1000)} - #{(round((map-get($gaps, 'default') / $i) * 1000) / 1000)});
max-width: calc(#{calc(round(percentage(calc($i / 12)) * 1000) / 1000)} - #{calc(round(calc(map-get($gaps, 'default') / $i) * 1000) / 1000)});
}
}

.row.g-0 > .col-#{$i} {
flex: 0 #{(round(percentage($i / 12) * 1000) / 1000)};
flex: 0 #{calc(round(percentage(calc($i / 12)) * 1000) / 1000)};
@if $i < 12 {
max-width: #{(round(percentage($i / 12) * 1000) / 1000)};
max-width: #{calc(round(percentage(calc($i / 12)) * 1000) / 1000)};
}
}

Expand Down Expand Up @@ -92,26 +92,26 @@
grid-template-columns: repeat($i, 1fr)
}
.row.#{$breakpoint}-columns-#{$i} > * {
flex: 0 calc(#{(round(percentage(1 / $i) * 1000) / 1000)} - #{(map-get($gaps, $breakpoint) - (round((map-get($gaps, $breakpoint) / $i) * 1000) / 1000))});
flex: 0 calc(#{calc(round(percentage(calc(1 / $i)) * 1000) / 1000)} - #{(map-get($gaps, $breakpoint) - calc(round(calc(map-get($gaps, $breakpoint) / $i) * 1000) / 1000))});
}
@if $i > 1 {
.row.g-0.#{$breakpoint}-columns-#{$i} > * {
max-width: #{(round(percentage(1 / $i) * 1000) / 1000)};
flex: 0 #{(round(percentage(1 / $i) * 1000) / 1000)};
max-width: #{calc(round(percentage(calc(1 / $i)) * 1000) / 1000)};
flex: 0 #{calc(round(percentage(calc(1 / $i)) * 1000) / 1000)};
}
}

.row > .#{$breakpoint}-col-#{$i} {
flex: calc(#{(round(percentage($i / 12) * 1000) / 1000)} - #{map-get($gaps, $breakpoint)});
flex: calc(#{calc(round(percentage(calc($i / 12)) * 1000) / 1000)} - #{map-get($gaps, $breakpoint)});
@if $i < 12 {
max-width: calc(#{(round(percentage($i / 12) * 1000) / 1000)} - #{(round((map-get($gaps, $breakpoint) / $i) * 1000) / 1000)});
max-width: calc(#{calc(round(percentage(calc($i / 12)) * 1000) / 1000)} - #{calc(round(calc(map-get($gaps, $breakpoint) / $i) * 1000) / 1000)});
}
}

.row.g-0 > .#{$breakpoint}-col-#{$i} {
flex: 0 #{(round(percentage($i / 12) * 1000) / 1000)};
flex: 0 #{calc(round(percentage(calc($i / 12)) * 1000) / 1000)};
@if $i < 12 {
max-width: #{(round(percentage($i / 12) * 1000) / 1000)};
max-width: #{calc(round(percentage(calc($i / 12)) * 1000) / 1000)};
}
}

Expand All @@ -137,9 +137,9 @@

@for $i from 1 through 12 {
.row.g-#{$s} > .col-#{$i} {
flex: calc(#{(round(percentage($i / 12) * 1000) / 1000)} - #{$space});
flex: calc(#{calc(round(percentage(calc($i / 12)) * 1000) / 1000)} - #{$space});
@if $i < 12 {
max-width: calc(#{(round(percentage($i / 12) * 1000) / 1000)} - #{(round(($space / (12 / $i)) * 1000) / 1000)});
max-width: calc(#{calc(round(percentage(calc($i / 12)) * 1000) / 1000)} - #{calc(round(calc($space / (12 / $i)) * 1000) / 1000)});
}
}
}
Expand All @@ -152,9 +152,9 @@
.row.#{$breakpoint}-g-#{$s} > .col-#{$i},
.row.#{$breakpoint}-g-#{$s} > .#{$breakpoint}-col-#{$i},
.row.#{$breakpoint}-g-#{$s} > [class*="col-"].#{$breakpoint}-col-#{$i} {
flex: calc(#{(round(percentage($i / 12) * 1000) / 1000)} - #{$space});
flex: calc(#{calc(round(percentage(calc($i / 12)) * 1000) / 1000)} - #{$space});
@if $i < 12 {
max-width: calc(#{(round(percentage($i / 12) * 1000) / 1000)} - #{(round(($space / (12 / $i)) * 1000) / 1000)});
max-width: calc(#{calc(round(percentage(calc($i / 12)) * 1000) / 1000)} - #{calc(round(calc($space / (12 / $i)) * 1000) / 1000)});
}
}
}
Expand Down
5 changes: 2 additions & 3 deletions dist/spry.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/spry.min.css.map
View file

Large diffs are not rendered by default.

5 changes: 2 additions & 3 deletions docs/spry.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/spry.min.css.map
View file

Large diffs are not rendered by default.

68 changes: 59 additions & 9 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 4 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@ggedde/spry-css",
"version": "1.4.3",
"version": "1.4.4",
"description": "A simple and customizable CSS Toolkit while being as lightweight as possible",
"repository": {
"type": "git",
Expand All @@ -18,13 +18,14 @@
"homepage": "https://github.com/ggedde/spry-css#readme",
"scripts": {
"dev": "node_modules/.bin/chokidar *.scss -c 'npm run build'",
"build": "sass --style=compressed ./spry.scss | node_modules/.bin/postcss --map false --use autoprefixer --use postcss-combine-media-query -o ./dist/spry.min.css; sass --style=compressed ./spry.scss | node_modules/.bin/postcss --map false --use autoprefixer --use postcss-combine-media-query -o ./docs/spry.min.css"
"build": "node_modules/.bin/sass --style=compressed ./spry.scss | node_modules/.bin/postcss --map false --use autoprefixer --use postcss-combine-media-query -o ./dist/spry.min.css; sass --style=compressed ./spry.scss | node_modules/.bin/postcss --map false --use autoprefixer --use postcss-combine-media-query -o ./docs/spry.min.css"
},
"dependencies": {
"autoprefixer": "^10.2.5",
"chokidar-cli": "^2.1.0",
"postcss": "^8.2.15",
"postcss-cli": "^8.3.1",
"postcss-combine-media-query": "^1.0.1"
"postcss-combine-media-query": "^1.0.1",
"sass": "^1.46.0"
}
}
2 changes: 1 addition & 1 deletion spry.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*!
* SpryCss v1.4.3
* SpryCss v1.4.4
* license: MIT
* author: https://github.com/ggedde/spry-css
*/
Expand Down

0 comments on commit 57a1e5d

Please sign in to comment.