switch to using scss for better variable support

package.json

@@ -25,9 +25,11 @@
     "html-webpack-inline-source-plugin": "0.0.10",
     "html-webpack-plugin": "^3.2.0",
     "json-loader": "^0.5.7",
+    "node-sass": "^4.13.1",
     "raw-loader": "^4.0.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "sass-loader": "^8.0.2",
     "style-loader": "^1.1.3",
     "url-loader": "^3.0.0",
     "webpack": "^4.41.6",

src/web/home.coffee

@@ -1,5 +1,5 @@
 import React from "react"
-import "./styles/home.css"
+import "./styles/home.scss"
 
 class Home extends React.Component
   constructor: (props) ->

src/web/index.coffee

@@ -1,6 +1,6 @@
 import React from "react"
 import ReactDOM from "react-dom"
-import "./styles/index.css"
+import "./styles/index.scss"
 import Home from "./home"
 
 elem = document.createElement "div"

src/web/styles/home.css

@@ -1,28 +0,0 @@
-.content-wrapper {
-    width: 100vw;
-    padding-top: 100px;
-    padding-bottom: 100px;
-    background-image: url('../assets/spikes.png');
-    background-repeat: repeat;
-    text-align: center;
-}
-
-.content {
-    display: inline-block;
-    background-color: #FFFFFF;
-    width: 1000px;
-    height: 600px;
-    box-shadow: 0 2px 5px 5px rgba(0, 0, 0, 0.15);
-    border-radius: 20px;
-}
-
-/*
- * 800 = 600 + 200
- */
-@media screen and ( min-height: 800px ) {
-    .content-wrapper {
-        max-height: 100vh;
-        padding-top: calc((100vh - 600px) / 2);
-        padding-bottom: calc((100vh - 600px) / 2);
-    }
-}

src/web/styles/home.scss

@@ -0,0 +1,33 @@
+$content-padding: 100px;
+$content-width: 1000px;
+$content-height: 600px;
+$content-total-height: $content-height + 2 * $content-padding;
+
+.content-wrapper {
+    width: 100vw;
+    padding-top: $content-padding;
+    padding-bottom: $content-padding;
+    background-image: url('../assets/spikes.png');
+    background-repeat: repeat;
+    text-align: center;
+}
+
+.content {
+    display: inline-block;
+    background-color: #FFFFFF;
+    width: $content-width;
+    height: $content-height;
+    box-shadow: 0 2px 5px 5px rgba(0, 0, 0, 0.15);
+    border-radius: 20px;
+}
+
+/*
+ * when screen is higher than content + padding
+ */
+@media screen and ( min-height: $content-total-height ) {
+    .content-wrapper {
+        max-height: 100vh;
+        padding-top: calc((100vh - #{$content-height}) / 2);
+        padding-bottom: calc((100vh - #{$content-height}) / 2);
+    }
+}

webpack.config.web.js

@@ -27,8 +27,8 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.css$/,
-        use: [ 'style-loader', 'css-loader' ]
+        test: /\.scss$/,
+        use: [ 'style-loader', 'css-loader', 'sass-loader' ]
       },
       {
         test: /\.(png|jpg|gif)$/,