Fixed sass grid

hugojunior · Apr 19, 2024 · 1fac13a · 1fac13a
1 parent 7b4cbc2
commit 1fac13a
Showing 1 changed file with 12 additions and 14 deletions.
diff --git a/_sass/1-tools/_grid.scss b/_sass/1-tools/_grid.scss
@@ -1,5 +1,3 @@
-@use "sass:math";
-
 $columns: 12;
 $container-base-width: 1200px;
 $container-offset: $base-spacing-unit;
@@ -46,19 +44,19 @@ $mq: ( $mobile:$columns, $tablet:$columns, $desktop:$columns );
 
 @for $i from 0 through $columns {
   .col-#{$i} {
-    width: percentage(math.div($i, $columns));
+    width: calc(#{$i} / #{$columns} * 100%);
   }
 }
 
 @for $i from 0 through $columns {
   .push-#{$i} {
-    margin-left: percentage(math.div($i, $columns));
+    margin-left: calc(#{$i} / #{$columns} * 100%);
   }
 }
 
 @for $i from 0 through $columns {
   .pull-#{$i} {
-    margin-right: percentage(math.div($i, $columns));
+    margin-right: calc(#{$i} / #{$columns} * 100%);
   }
 }
 
@@ -70,19 +68,19 @@ $mq: ( $mobile:$columns, $tablet:$columns, $desktop:$columns );
 
     @for $i from 0 through $columns {
       .col-d-#{$i} {
-        width: percentage(math.div($i, $columns));
+        width: calc(#{$i} / #{$columns} * 100%);
       }
     }
 
     @for $i from 0 through $columns {
       .push-d-#{$i} {
-        margin-left: percentage(math.div($i, $columns));
+        margin-left: calc(#{$i} / #{$columns} * 100%);
       }
     }
 
     @for $i from 0 through $columns {
       .pull-d-#{$i} {
-        margin-right: percentage(math.div($i, $columns));
+        margin-right: calc(#{$i} / #{$columns} * 100%);
       }
     }
   }
@@ -93,19 +91,19 @@ $mq: ( $mobile:$columns, $tablet:$columns, $desktop:$columns );
 
     @for $i from 0 through $columns {
       .col-t-#{$i} {
-        width: percentage(math.div($i, $columns));
+        width: calc(#{$i} / #{$columns} * 100%);
       }
     }
 
     @for $i from 0 through $columns {
       .push-t-#{$i} {
-        margin-left: percentage(math.div($i, $columns));
+        margin-left: calc(#{$i} / #{$columns} * 100%);
       }
     }
 
     @for $i from 0 through $columns {
       .pull-t-#{$i} {
-        margin-right: percentage(math.div($i, $columns));
+        margin-right: calc(#{$i} / #{$columns} * 100%);
       }
     }
   }
@@ -115,19 +113,19 @@ $mq: ( $mobile:$columns, $tablet:$columns, $desktop:$columns );
 
     @for $i from 0 through $columns {
       .col-m-#{$i} {
-        width: percentage(math.div($i, $columns));
+        width: calc(#{$i} / #{$columns} * 100%);
       }
     }  
 
     @for $i from 0 through $columns {
       .push-m-#{$i} {
-        margin-left: percentage(math.div($i, $columns));
+        margin-left: calc(#{$i} / #{$columns} * 100%);
       }
     }
 
     @for $i from 0 through $columns {
       .pull-m-#{$i} {
-        margin-right: percentage(math.div($i, $columns));
+        margin-right: calc(#{$i} / #{$columns} * 100%);
       }
     }
   }