Escape colons

Author: qeet

responsive-utilities.scss

@@ -29,5 +29,5 @@
 @include responsiveUtilitiesGenerator(
    (640px, 768px, 1024px, 1280px),   // breakpoints
    'px',              // breakpoint type 'px' or 'em'
-   ('sm:','md:','lg:','xl:')     // breakpoint prefixes
+   ('sm\\:','md\\:','lg\\:','xl\\:')     // breakpoint prefixes
 );

utils.css

@@ -44,129 +44,129 @@
   width: 1000px; }
 
 @media (min-width: 640px) {
-  .sm:w-full {
+  .sm\:w-full {
     width: 100%; }
-  .sm:w-1\/2 {
+  .sm\:w-1\/2 {
     width: 50%; }
-  .sm:w-1\/3 {
+  .sm\:w-1\/3 {
     width: 33.333333%; }
-  .sm:w-2\/3 {
+  .sm\:w-2\/3 {
     width: 66.666667%; }
-  .sm:w-1\/4 {
+  .sm\:w-1\/4 {
     width: 25%; }
-  .sm:w-2\/4 {
+  .sm\:w-2\/4 {
     width: 50%; }
-  .sm:w-3\/4 {
+  .sm\:w-3\/4 {
     width: 75%; }
-  .sm:w-1\/5 {
+  .sm\:w-1\/5 {
     width: 20%; }
-  .sm:w-2\/5 {
+  .sm\:w-2\/5 {
     width: 40%; }
-  .sm:w-3\/5 {
+  .sm\:w-3\/5 {
     width: 60%; }
-  .sm:w-4\/5 {
+  .sm\:w-4\/5 {
     width: 80%; }
-  .sm:w-700 {
+  .sm\:w-700 {
     width: 700px; }
-  .sm:w-800 {
+  .sm\:w-800 {
     width: 800px; }
-  .sm:w-900 {
+  .sm\:w-900 {
     width: 900px; }
-  .sm:w-1000 {
+  .sm\:w-1000 {
     width: 1000px; } }
 
 @media (min-width: 768px) {
-  .md:w-full {
+  .md\:w-full {
     width: 100%; }
-  .md:w-1\/2 {
+  .md\:w-1\/2 {
     width: 50%; }
-  .md:w-1\/3 {
+  .md\:w-1\/3 {
     width: 33.333333%; }
-  .md:w-2\/3 {
+  .md\:w-2\/3 {
     width: 66.666667%; }
-  .md:w-1\/4 {
+  .md\:w-1\/4 {
     width: 25%; }
-  .md:w-2\/4 {
+  .md\:w-2\/4 {
     width: 50%; }
-  .md:w-3\/4 {
+  .md\:w-3\/4 {
     width: 75%; }
-  .md:w-1\/5 {
+  .md\:w-1\/5 {
     width: 20%; }
-  .md:w-2\/5 {
+  .md\:w-2\/5 {
     width: 40%; }
-  .md:w-3\/5 {
+  .md\:w-3\/5 {
     width: 60%; }
-  .md:w-4\/5 {
+  .md\:w-4\/5 {
     width: 80%; }
-  .md:w-700 {
+  .md\:w-700 {
     width: 700px; }
-  .md:w-800 {
+  .md\:w-800 {
     width: 800px; }
-  .md:w-900 {
+  .md\:w-900 {
     width: 900px; }
-  .md:w-1000 {
+  .md\:w-1000 {
     width: 1000px; } }
 
 @media (min-width: 1024px) {
-  .lg:w-full {
+  .lg\:w-full {
     width: 100%; }
-  .lg:w-1\/2 {
+  .lg\:w-1\/2 {
     width: 50%; }
-  .lg:w-1\/3 {
+  .lg\:w-1\/3 {
     width: 33.333333%; }
-  .lg:w-2\/3 {
+  .lg\:w-2\/3 {
     width: 66.666667%; }
-  .lg:w-1\/4 {
+  .lg\:w-1\/4 {
     width: 25%; }
-  .lg:w-2\/4 {
+  .lg\:w-2\/4 {
     width: 50%; }
-  .lg:w-3\/4 {
+  .lg\:w-3\/4 {
     width: 75%; }
-  .lg:w-1\/5 {
+  .lg\:w-1\/5 {
     width: 20%; }
-  .lg:w-2\/5 {
+  .lg\:w-2\/5 {
     width: 40%; }
-  .lg:w-3\/5 {
+  .lg\:w-3\/5 {
     width: 60%; }
-  .lg:w-4\/5 {
+  .lg\:w-4\/5 {
     width: 80%; }
-  .lg:w-700 {
+  .lg\:w-700 {
     width: 700px; }
-  .lg:w-800 {
+  .lg\:w-800 {
     width: 800px; }
-  .lg:w-900 {
+  .lg\:w-900 {
     width: 900px; }
-  .lg:w-1000 {
+  .lg\:w-1000 {
     width: 1000px; } }
 
 @media (min-width: 1280px) {
-  .xl:w-full {
+  .xl\:w-full {
     width: 100%; }
-  .xl:w-1\/2 {
+  .xl\:w-1\/2 {
     width: 50%; }
-  .xl:w-1\/3 {
+  .xl\:w-1\/3 {
     width: 33.333333%; }
-  .xl:w-2\/3 {
+  .xl\:w-2\/3 {
     width: 66.666667%; }
-  .xl:w-1\/4 {
+  .xl\:w-1\/4 {
     width: 25%; }
-  .xl:w-2\/4 {
+  .xl\:w-2\/4 {
     width: 50%; }
-  .xl:w-3\/4 {
+  .xl\:w-3\/4 {
     width: 75%; }
-  .xl:w-1\/5 {
+  .xl\:w-1\/5 {
     width: 20%; }
-  .xl:w-2\/5 {
+  .xl\:w-2\/5 {
     width: 40%; }
-  .xl:w-3\/5 {
+  .xl\:w-3\/5 {
     width: 60%; }
-  .xl:w-4\/5 {
+  .xl\:w-4\/5 {
     width: 80%; }
-  .xl:w-700 {
+  .xl\:w-700 {
     width: 700px; }
-  .xl:w-800 {
+  .xl\:w-800 {
     width: 800px; }
-  .xl:w-900 {
+  .xl\:w-900 {
     width: 900px; }
-  .xl:w-1000 {
+  .xl\:w-1000 {
     width: 1000px; } }