Actually convert the .scss files to .css.

Author: philipwalton

assets/css/base/breakpoints.css

@@ -0,0 +1,3 @@
+@custom-media --break-sm (min-width: 384px);
+@custom-media --break-md (min-width: 576px);
+@custom-media --break-lg (min-width: 768px);

assets/styles/_base.scss renamed to assets/css/base/elements.css

@@ -1,4 +1,6 @@
-*, *::before, *::after {
+*,
+*::after
+*::before {
   box-sizing: border-box;
 }
 
@@ -27,11 +29,13 @@ h3 {
   font-size: 1em;
 }
 
-pre, p {
+p,
+pre {
   margin: 0 0 1em;
 }
 
-pre, code {
+code,
+pre {
   font-family: "source-code-pro", monospace;
 }
 
@@ -50,12 +54,14 @@ a {
   border-bottom: 1px dashed hsla(150, 45%, 50%, 0.5);
   color: hsl(150, 45%, 50%);
   text-decoration: none;
-  &:hover, &:focus {
-    border-bottom: 1px solid hsl(150, 45%, 50%);
-  }
+}
+a:focus,
+a:hover {
+  border-bottom: 1px solid hsl(150, 45%, 50%);
 }
 
-ul, ol {
+ol,
+ul {
   margin: 0;
   padding: 0;
   list-style: none;

assets/css/base/variables.css

@@ -0,0 +1,3 @@
+:root {
+  --bg-color: hsl(150, 45%, 50%);
+}

assets/styles/components/_aligner.scss renamed to assets/css/components/aligner.css

@@ -1,15 +1,19 @@
+/*
+ * 1. `height` is needed for IE10-11 for this bug
+ *    http://bit.ly/16b1Xhx
+ * 2. Other browser use `min-height`.
+ */
+
 .Aligner {
   display: flex;
   align-items: center;
+  height: 24em; /* 1 */
   justify-content: center;
-
-  // height is needed for IE10-11 for this bug
-  // http://bit.ly/16b1Xhx
-  height: 24em;
-  // other browsers use min-height
-  @supports not (-ms-flex: 1) {
-    height: auto;
-    min-height: 24em;
+}
+@supports not (-ms-flex: 1) {
+  .Aligner {
+    height: auto; /* 2 */
+    min-height: 24em; /* 2 */
   }
 }
 

assets/styles/components/_browser-logo.scss renamed to assets/css/components/browser-logo.css

@@ -1,8 +1,10 @@
+@import '../base/breakpoints';
+
 .BrowserLogo {
   width: 64px;
   height: 64px;
   margin-bottom: 0.5em;
-  background: url("../images/browser-logos.jpg") no-repeat 0 0;
+  background: url('../images/browser-logos.jpg') no-repeat 0 0;
   background-size: auto 100%;
 }
 

assets/styles/components/_browser-matrix.scss renamed to assets/css/components/browser-matrix.css

@@ -1,3 +1,5 @@
+@import '../base/breakpoints';
+
 .BrowserMatrix {
   display: flex;
   flex-wrap: wrap;
@@ -8,10 +10,6 @@
   flex: none;
   margin: 0.5em 1em;
   text-align: center;
-
-  @include breakpoint("large") {
-    margin: 0.5em 1.5em;
-  }
 }
 
 .BrowserMatrix-title {
@@ -26,3 +24,8 @@
   white-space: nowrap;
 }
 
+@media (--break-lg) {
+  .BrowserMatrix-item {
+    margin: 0.5em 1.5em;
+  }
+}

assets/styles/components/_button.scss renamed to assets/css/components/button.css

@@ -12,27 +12,30 @@
   line-height: normal;
   text-decoration: none;
   white-space: nowrap;
-  &:focus {
-    outline: thin dotted #666;
-    text-decoration:none;
-  }
-  &:hover, &:active, &:focus {
-    border: 0;
-    background: hsla(31, 15%, 50%, 0.25);
-    text-decoration:none;
-  }
+}
+.Button:focus {
+  outline: thin dotted #666;
+  text-decoration:none;
+}
+.Button:active,
+.Button:focus
+.Button:hover {
+  border: 0;
+  background: hsla(31, 15%, 50%, 0.25);
+  text-decoration:none;
 }
 
 .Button--action {
   background-color: hsl(150, 45%, 50%);
   color: #fff;
-  &:hover, &:active, &:focus {
-    background-color: hsl(150, 45%, 40%);
-  }
+}
+.Button--action:active,
+.Button--action:focus,
+.Button--action:hover {
+  background-color: hsl(150, 45%, 40%);
 }
 
 .Button--wide {
   padding-right: 1.5em;
   padding-left: 1.5em;
 }
-

assets/styles/components/_container.scss renamed to assets/css/components/container.css

@@ -1,4 +1,4 @@
 .Container {
   max-width: 50rem;
   margin: 0 auto;
-}
+}

assets/styles/components/_demo.scss renamed to assets/css/components/demo.css

@@ -4,15 +4,15 @@
   margin-bottom: 1em;
   background: hsla(31, 15%, 50%, 0.1);
   border-radius: 3px;
-  &::after {
-    content: "";
-    display: block;
-    margin-top: 0.8em;
-    height: 1px;
-  }
+}
+.Demo::after {
+  content: "";
+  display: block;
+  margin-top: 0.8em;
+  height: 1px;
 }
 
 .Demo-title {
   margin-bottom: 0.25rem;
   font-size: 1em;
-}
+}

assets/styles/components/_error.scss renamed to assets/css/components/error.css

@@ -4,4 +4,4 @@
   color: #fff;
   font-weight: 700;
   text-align: center;
-}
+}