Refactor SCSS into separate files

src/css/classes.scss

@@ -0,0 +1,23 @@
+/*
+Crafting Guide - classes.scss
+
+Copyright (C) 2015 by Redwood Labs
+All rights reserved.
+*/
+
+.centered {
+    text-align: center;
+}
+
+.content {
+    background: $color-content;
+    box-shadow: 10px 10px 20px #666;
+    margin: 2em auto;
+    max-width: 96em;
+    position: relative;
+    width: 100%;
+}
+
+.error { background: $color-error; }
+
+.error-new { background: $color-error-new; }

src/css/main.scss

@@ -70,173 +70,10 @@ $layer-normal: 0;
 $layer-screen: 5;
 $layer-dialog: 10;
 
-// Common //////////////////////////////////////////////////////////////////////////////////////////////////////////////
-
-body {
-    background: $color-background url('/images/ice.png');
-    font-size: 10px;
-}
-
-button {
-    background: $color-gray-faint;
-    border: 0.1em solid $color-gray-medium;
-    border-radius: 1em;
-    color: $color-active;
-    cursor: pointer;
-    font-size: $font-size-normal;
-    font-weight: bold;
-    padding: 0.1em 1em;
-
-    &:hover {
-        background: white;
-        color: $color-active-hover;
-    }
-}
-
-h1 {
-    margin-bottom: 1em;
-
-    * { display: inline; }
-
-    img {
-        position: relative; height: 10em; width: 10em;
-        margin-right: 1em;
-        vertical-align: bottom;
-    }
-
-    p {
-        font-family: $font-family-header;
-        font-size: $font-size-xx-large;
-        position: relative; top: -0.5em;
-    }
-}
-
-h2 {
-    margin-bottom: 1em;
-
-    * { display: inline; }
-
-    img {
-        position: relative; height: 4em; width: 4em;
-        margin-right: 1em;
-        vertical-align: bottom;
-    }
-
-    p {
-        font-family: $font-family-header;
-        font-size: $font-size-x-large;
-        position: relative; top: -0.25em;
-    }
-}
-
-h3 {
-    font-family: $font-family-normal;
-    font-weight: bold;
-
-    p { font-size: $font-size-normal; }
-}
-
-p {
-    font-family: $font-family-normal;
-    font-size: $font-size-normal;
-}
-
-input {
-    font-family: $font-family-input;
-    font-size: $font-size-normal;
-}
-
-label {
-    font-family: $font-family-normal;
-    font-size: $font-size-normal;
-}
-
-.centered {
-    text-align: center;
-}
-
-.content {
-    background: $color-content;
-    box-shadow: 10px 10px 20px #666;
-    margin: 2em auto;
-    max-width: 96em;
-    position: relative;
-    width: 100%;
-}
-
-.error { background: $color-error; }
-
-.error-new { background: $color-error-new; }
-
-// Views ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
-
-.view__footer {
-    background: $color-footer;
-    color: $color-footer-text;
-    margin-top: 2em;
-
-    a {
-        color: $color-footer-text;
-    }
-
-    .divider {
-        position: relative; height: 3.2em; width: 100%;
-        clear: both;
-    }
-
-    .divider.top {
-        background: $color-dirt url('/images/grass_side.png');
-    }
-
-    .left, .center, .right  {
-        position: relative; width: 33%;
-        float: left;
-        padding: 2em;
-
-        p {
-            font-family: sans-serif;
-            font-size: $font-size-small;
-            padding-bottom: 1.0em;
-
-            &:last-child {
-                padding-bottom: 0;
-            }
-        }
-
-        h2 {
-            padding-bottom: 1.0em;
-
-            p {
-                font-family: $font-family-header;
-                font-size: 1.5em;
-            }
-        }
-    }
-
-    .divider.bottom {
-        background: $color-bedrock url('/images/bedrock.png');
-    }
-}
-
-.view__header {
-    background: $color-brick-light url('/images/stone_brick_light.png');
-    position: relative; height: 10em;
-    margin-top: 5em;
-
-    h1 { position: relative; top: -3em; left: -3em; }
-
-    .divider {
-        background: $color-brick-dark url('/images/stone_brick.png');
-        position: absolute; bottom: 0; height: 3.2em; width: 100%;
-    }
-}
-
-.view__screen {
-    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
-    display: none;
-    z-index: $layer-screen;
-}
-
 // Child Stylesheets ///////////////////////////////////////////////////////////////////////////////////////////////////
 
+@import 'classes';
+@import 'tags';
+@import 'views';
+
 @import 'templates/index';

src/css/tags.scss

@@ -0,0 +1,85 @@
+/*
+Crafting Guide - tags.scss
+
+Copyright (C) 2015 by Redwood Labs
+All rights reserved.
+*/
+
+body {
+    background: $color-background url('/images/ice.png');
+    font-size: 10px;
+}
+
+button {
+    background: $color-gray-faint;
+    border: 0.1em solid $color-gray-medium;
+    border-radius: 1em;
+    color: $color-active;
+    cursor: pointer;
+    font-size: $font-size-normal;
+    font-weight: bold;
+    padding: 0.1em 1em;
+
+    &:hover {
+        background: white;
+        color: $color-active-hover;
+    }
+}
+
+h1 {
+    margin-bottom: 1em;
+
+    * { display: inline; }
+
+    img {
+        position: relative; height: 10em; width: 10em;
+        margin-right: 1em;
+        vertical-align: bottom;
+    }
+
+    p {
+        font-family: $font-family-header;
+        font-size: $font-size-xx-large;
+        position: relative; top: -0.5em;
+    }
+}
+
+h2 {
+    margin-bottom: 1em;
+
+    * { display: inline; }
+
+    img {
+        position: relative; height: 4em; width: 4em;
+        margin-right: 1em;
+        vertical-align: bottom;
+    }
+
+    p {
+        font-family: $font-family-header;
+        font-size: $font-size-x-large;
+        position: relative; top: -0.25em;
+    }
+}
+
+h3 {
+    font-family: $font-family-normal;
+    font-weight: bold;
+
+    p { font-size: $font-size-normal; }
+}
+
+p {
+    font-family: $font-family-normal;
+    font-size: $font-size-normal;
+}
+
+input {
+    font-family: $font-family-input;
+    font-size: $font-size-normal;
+}
+
+label {
+    font-family: $font-family-normal;
+    font-size: $font-size-normal;
+}

src/css/views.scss

@@ -0,0 +1,73 @@
+/*
+Crafting Guide - views.scss
+
+Copyright (c) 2015 by Redwood Labs
+All rights reserved.
+*/
+
+.view__footer {
+    background: $color-footer;
+    color: $color-footer-text;
+    margin-top: 2em;
+
+    a {
+        color: $color-footer-text;
+    }
+
+    .divider {
+        position: relative; height: 3.2em; width: 100%;
+        clear: both;
+    }
+
+    .divider.top {
+        background: $color-dirt url('/images/grass_side.png');
+    }
+
+    .left, .center, .right  {
+        position: relative; width: 33%;
+        float: left;
+        padding: 2em;
+
+        p {
+            font-family: sans-serif;
+            font-size: $font-size-small;
+            padding-bottom: 1.0em;
+
+            &:last-child {
+                padding-bottom: 0;
+            }
+        }
+
+        h2 {
+            padding-bottom: 1.0em;
+
+            p {
+                font-family: $font-family-header;
+                font-size: 1.5em;
+            }
+        }
+    }
+
+    .divider.bottom {
+        background: $color-bedrock url('/images/bedrock.png');
+    }
+}
+
+.view__header {
+    background: $color-brick-light url('/images/stone_brick_light.png');
+    position: relative; height: 10em;
+    margin-top: 5em;
+
+    h1 { position: relative; top: -3em; left: -3em; }
+
+    .divider {
+        background: $color-brick-dark url('/images/stone_brick.png');
+        position: absolute; bottom: 0; height: 3.2em; width: 100%;
+    }
+}
+
+.view__screen {
+    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
+    display: none;
+    z-index: $layer-screen;
+}