diff --git a/packages/theme-chalk/src/col.scss b/packages/theme-chalk/src/col.scss
index 6c100c810e..1566c1bb27 100644
--- a/packages/theme-chalk/src/col.scss
+++ b/packages/theme-chalk/src/col.scss
@@ -14,11 +14,19 @@
 
 @for $i from 0 through 24 {
   .#{$namespace}-col-#{$i} {
-    display: if($i == 0, none, block);
+    @if $i == 0 {
+      display: none;
+    } @else {
+      display: block;
+    }
     max-width: (math.div(1, 24) * $i * 100) * 1%;
     flex: 0 0 (math.div(1, 24) * $i * 100) * 1%;
     @include when(guttered) {
-      display: if($i == 0, none, block);
+      @if $i == 0 {
+        display: none;
+      } @else {
+        display: block;
+      }
     }
   }
 
diff --git a/packages/theme-chalk/src/mixins/_col.scss b/packages/theme-chalk/src/mixins/_col.scss
index 162b7c9296..5607374f30 100644
--- a/packages/theme-chalk/src/mixins/_col.scss
+++ b/packages/theme-chalk/src/mixins/_col.scss
@@ -7,11 +7,19 @@
   @include res($size) {
     @for $i from 0 through 24 {
       .#{$namespace}-col-#{$size}-#{$i} {
-        display: if($i == 0, none, block);
+        @if $i == 0 {
+          display: none;
+        } @else {
+          display: block;
+        }
         max-width: (math.div(1, 24) * $i * 100) * 1%;
         flex: 0 0 (math.div(1, 24) * $i * 100) * 1%;
         @include when(guttered) {
-          display: if($i == 0, none, block);
+          @if $i == 0 {
+            display: none;
+          } @else {
+            display: block;
+          }
         }
       }