Fix jgthms#1456

GlenIku · Dec 4, 2017 · 6f964e7 · 6f964e7
1 parent 31ec88e
commit 6f964e7
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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",