diff --git a/flexboxgrid.scss b/flexboxgrid.scss index db69661e..e4570558 100644 --- a/flexboxgrid.scss +++ b/flexboxgrid.scss @@ -1,3 +1,5 @@ +@use 'sass:math'; + // // -- Start editing -- // // @@ -80,8 +82,8 @@ $name: xs; @for $i from 1 through $flexboxgrid-grid-columns { .col-#{$name}-#{$i} { @include flexboxgrid-sass-col-common; - @include flex-basis(100% / $flexboxgrid-grid-columns * $i); - max-width: 100% / $flexboxgrid-grid-columns * $i; + @include flex-basis(math.div(100%, $flexboxgrid-grid-columns) * $i); + max-width: math.div(100%, $flexboxgrid-grid-columns) * $i; } } @for $i from 0 through $flexboxgrid-grid-columns { @@ -90,7 +92,7 @@ $name: xs; @if $i == 0 { margin-left: 0; } @else { - margin-left: 100% / $flexboxgrid-grid-columns * $i; + margin-left: math.div(100%, $flexboxgrid-grid-columns) * $i; } } } @@ -147,7 +149,7 @@ $name: xs; $name: nth($breakpoint, 1); $size: nth($breakpoint, 2); $container: nth($breakpoint, 3); - @media only screen and (min-width: $size) { + @media screen and (min-width: $size) { .container { width: $container; } @@ -159,8 +161,8 @@ $name: xs; @for $i from 1 through $flexboxgrid-grid-columns { .col-#{$name}-#{$i} { @include flexboxgrid-sass-col-common; - @include flex-basis(100% / $flexboxgrid-grid-columns * $i); - max-width: 100% / $flexboxgrid-grid-columns * $i; + @include flex-basis(math.div(100%, $flexboxgrid-grid-columns) * $i); + max-width: math.div(100%, $flexboxgrid-grid-columns) * $i; } } @for $i from 0 through $flexboxgrid-grid-columns { @@ -169,7 +171,7 @@ $name: xs; @if $i == 0 { margin-left: 0; } @else { - margin-left: 100% / $flexboxgrid-grid-columns * $i; + margin-left: math.div(100%, $flexboxgrid-grid-columns) * $i; } } } diff --git a/package.json b/package.json index ec5e19ee..af16b525 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "flexboxgrid-sass", - "version": "8.0.5", + "version": "8.0.6", "description": "Grid based off of CSS3 flexbox specification", "style": "dist/flexboxgrid.css", "main": "dist/flexboxgrid.css",