From 6f964e72602e87d80a607976b451908d5919d183 Mon Sep 17 00:00:00 2001
From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Mon, 4 Dec 2017 19:28:07 +0000
Subject: [PATCH] Fix #1456

---
 CHANGELOG.md                               |  4 ++
 docs/.gitignore                            |  4 ++
 docs/documentation/overview/customize.html | 46 +++++++++++-----------
 package.json                               |  3 +-
 4 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 38e52b1acb..31dd63653e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@
 
 * New `.is-italic` helper
 
+### Bug fixes
+
+* #1456 Fix customize documentation
+
 ## 0.6.2
 
 ### Improvements
diff --git a/docs/.gitignore b/docs/.gitignore
index fb44390c20..54836f4c07 100644
--- a/docs/.gitignore
+++ b/docs/.gitignore
@@ -5,11 +5,15 @@
 _config.local.yml
 _config.version.yml
 bulma-test.sass
+bulma-test.scss
+bulma-test.css
 bulma-website-local.sass
 css/bulma-test.css
 css/bulma-docs.css.map
 PUBLISHING.md
 npm-debug.log
+test.sass
+test.scss
 
 # Folders
 
diff --git a/docs/documentation/overview/customize.html b/docs/documentation/overview/customize.html
index d956603fee..520497c7da 100644
--- a/docs/documentation/overview/customize.html
+++ b/docs/documentation/overview/customize.html
@@ -5,48 +5,48 @@
 doc-subtab: customize
 ---
 
-{% capture sass %}
+{% capture scss_code %}
 // 1. Import the initial variables
-@import "../sass/utilities/initial-variables"
-@import "../sass/utilities/functions"
+@import "../sass/utilities/initial-variables";
+@import "../sass/utilities/functions";
 
 // 2. Set your own initial variables
 // Update blue
-$blue: #72d0eb
+$blue: #72d0eb;
 // Add pink and its invert
-$pink: #ffb3b3
-$pink-invert: #fff
+$pink: #ffb3b3;
+$pink-invert: #fff;
 // Add a serif family
-$family-serif: "Merriweather", "Georgia", serif
+$family-serif: "Merriweather", "Georgia", serif;
 
 // 3. Set the derived variables
 // Use the new pink as the primary color
-$primary: $pink
-$primary-invert: $pink-invert
+$primary: $pink;
+$primary-invert: $pink-invert;
 // Use the existing orange as the danger color
-$danger: $orange
+$danger: $orange;
 // Use the new serif family
-$family-primary: $family-serif
+$family-primary: $family-serif;
 
 // 4. Setup your Custom Colors
-$linkedin: #0077B5
-$linkedin-invert: findColorInvert($linkedin)
-$twitter: #1DA1F2
-$twitter-invert: findColorInvert($twitter)
-$github: #222222
-$github-invert: findColorInvert($github)
+$linkedin: #0077b5;
+$linkedin-invert: findColorInvert($linkedin);
+$twitter: #55acee;
+$twitter-invert: findColorInvert($twitter);
+$github: #333;
+$github-invert: findColorInvert($github);
 
 // 5. Add new color variables to the color map.
-@import "../sass/utilities/derived-variables.sass"
+@import "../sass/utilities/derived-variables.sass";
 $addColors: (
   "twitter":($twitter, $twitter-invert),
   "linkedin": ($linkedin, $linkedin-invert),
   "github": ($github, $github-invert)
-)
-$colors: map-merge($colors, $addColors)
+);
+$colors: map-merge($colors, $addColors);
 
 // 6. Import the rest of Bulma
-@import "../bulma"
+@import "../bulma";
 {% endcapture %}
 
 {% include subnav-overview.html %}
@@ -84,10 +84,10 @@ <h2 class="subtitle">Create your <strong>own theme</strong> with a simple set of
           <strong>Set</strong> your variables
         </p>
         <p class="subtitle is-6">
-          Add your own colors, set new fonts, override Bulma's default styles...
+          Create a file called <code>mystyles.scss</code> and add your own colors, set new fonts, override Bulma's default styles...
         </p>
         <div class="highlight-full">
-          {% highlight sass %}{{ sass }}{% endhighlight %}
+          {% highlight sass %}{{ scss_code }}{% endhighlight %}
         </div>
       </div>
     </article>
diff --git a/package.json b/package.json
index efb3bdbbbb..86d8c053c5 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,8 @@
     "start": "npm run build-sass -- --watch",
     "start-docs": "npm run docs-sass -- --watch",
     "start-test": "npm run test-sass -- --watch",
-    "test-sass": "node-sass --output-style expanded docs/bulma-test.sass docs/css/bulma-test.css"
+    "test-sass": "node-sass --output-style expanded docs/bulma-test.sass docs/css/bulma-test.css",
+    "test-scss": "node-sass --output-style expanded docs/bulma-test.scss docs/css/bulma-test.css"
   },
   "files": [
     "css",