Automatically generate CSS for the syntax switcher by default

helpers/sass_helpers.rb

@@ -87,14 +87,25 @@ module SassHelpers
   # Padding is added to the bottom of each section to make it the same length as
   # the section in the other language.
   #
-  # A third section may optionally be provided to represent compiled CSS.
-  def example
+  # A third section may optionally be provided to represent compiled CSS. If
+  # it's not passed and `autogen_css` is `true`, it's generated from the SCSS
+  # source.
+  def example(autogen_css: true)
     contents = capture_haml {yield}
     scss, sass, css = contents.split("\n===\n")
     throw ArgumentError.new("Couldn't find === in:\n#{contents}") if sass.nil?
 
     scss_sections = scss.split("\n---\n").map(&:strip)
     sass_sections = sass.split("\n---\n").map(&:strip)
+
+
+    if css.nil? && autogen_css
+      if scss_sections.length != 1
+        throw ArgumentError.new("Can't auto-generate CSS from more than one SCSS file.")
+      end
+
+      css = Sass::Engine.new(scss, syntax: :scss, style: :expanded).render
+    end
     css_sections = css ? css.split("\n---\n").map(&:strip) : []
 
     # Calculate the lines of padding to add to the bottom of each section so

source/code-snippets/_homepage-extend-css.md

@@ -1,19 +0,0 @@
-```css
-.message, .success, .error, .warning {
-  border: 1px solid #cccccc;
-  padding: 10px;
-  color: #333;
-}
-
-.success {
-  border-color: green;
-}
-
-.error {
-  border-color: red;
-}
-
-.warning {
-  border-color: yellow;
-}
-```

source/code-snippets/_homepage-import-css.md

@@ -1,11 +0,0 @@
-```css
-html, body, ul, ol {
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  font: 100% Helvetica, sans-serif;
-  background-color: #efefef;
-}
-```

source/code-snippets/_homepage-mixins-css.md

@@ -1,7 +0,0 @@
-```css
-.box {
-  -webkit-transform: rotate(30deg);
-  -ms-transform: rotate(30deg);
-  transform: rotate(30deg);
-}
-```

source/code-snippets/_homepage-nesting-css.md

@@ -1,17 +0,0 @@
-```css
-nav ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-nav li {
-  display: inline-block;
-}
-
-nav a {
-  display: block;
-  padding: 6px 12px;
-  text-decoration: none;
-}
-```

source/code-snippets/_homepage-operators-css.md

@@ -1,15 +0,0 @@
-```css
-.container {
-  width: 100%;
-}
-
-article[role="main"] {
-  float: left;
-  width: 62.5%;
-}
-
-aside[role="complementary"] {
-  float: right;
-  width: 31.25%;
-}
-```

source/code-snippets/_homepage-variables-css.md

@@ -1,6 +0,0 @@
-```css
-body {
-  font: 100% Helvetica, sans-serif;
-  color: #333;
-}
-```

source/guide.html.haml

@@ -94,8 +94,6 @@ title: Sass Basics
       extremely powerful when working with brand colors and keeping them
       consistent throughout the site.
 
-    ~ partial "code-snippets/homepage-variables-css"
-
     %hr/
 
   %li#topic-3
@@ -148,10 +146,7 @@ title: Sass Basics
     :markdown
       You'll notice that the <code>ul</code>, <code>li</code>, and
       <code>a</code> selectors are nested inside the <code>nav</code> selector.
-      This is a great way to organize your CSS and make it more readable. When
-      you generate the CSS you'll get something like&nbsp;this:
-
-    ~ partial "code-snippets/homepage-nesting-css"
+      This is a great way to organize your CSS and make it more readable.
 
     %hr/
 
@@ -259,16 +254,16 @@ title: Sass Basics
       :plain
         @mixin transform($property) {
           -webkit-transform: $property;
-              -ms-transform: $property;
-                  transform: $property;
+          -ms-transform: $property;
+          transform: $property;
         }
 
         .box { @include transform(rotate(30deg)); }
         ===
         =transform($property)
           -webkit-transform: $property
-          -ms-transform:     $property
-          transform:         $property
+          -ms-transform: $property
+          transform: $property
 
         .box
           +transform(rotate(30deg))
@@ -279,9 +274,7 @@ title: Sass Basics
       the variable <code>$property</code> inside the parentheses so we can pass in
       a transform of whatever we want. After you create your mixin, you can then
       use it as a CSS declaration starting with <code>@include</code> followed
-      by the name of the mixin. When your CSS is generated it'll look like this:
-
-    ~ partial "code-snippets/homepage-mixins-css"
+      by the name of the mixin.
 
     %hr/
 
@@ -300,19 +293,19 @@ title: Sass Basics
 
     - example do
       :plain
-        // This CSS won't print because %equal-heights is never extended.
-        %equal-heights {
-          display: flex;
-          flex-wrap: wrap;
-        }
-
-        // This CSS will print because %message-shared is extended.
+        /* This CSS will print because %message-shared is extended. */
         %message-shared {
           border: 1px solid #ccc;
           padding: 10px;
           color: #333;
         }
 
+        // This CSS won't print because %equal-heights is never extended.
+        %equal-heights {
+          display: flex;
+          flex-wrap: wrap;
+        }
+
         .message {
           @extend %message-shared;
         }
@@ -332,20 +325,23 @@ title: Sass Basics
           border-color: yellow;
         }
         ===
-        // This CSS won't print because %equal-heights is never extended.
-        %equal-heights
-          display: flex
-          flex-wrap: wrap
-
-        // This CSS will print because %message-shared is extended.
+        /* This CSS will print because %message-shared is extended. */
         %message-shared
           border: 1px solid #ccc
           padding: 10px
           color: #333
 
+
+        // This CSS won't print because %equal-heights is never extended.
+        %equal-heights
+          display: flex
+          flex-wrap: wrap
+
+
         .message
           @extend %message-shared
 
+
         .success
           @extend %message-shared
           border-color: green
@@ -376,10 +372,8 @@ title: Sass Basics
       sure you aren't extending a class that's nested elsewhere in your
       styles, which can result in unintended selectors in your CSS.
 
-      When you generate your CSS it will look like this. Note that the CSS
-      in <code>%equal-heights</code> doesn't print because it is never used.
-
-    ~ partial "code-snippets/homepage-extend-css"
+      Note that the CSS in <code>%equal-heights</code> isn't generated, because
+      <code>%equal-heights</code> is never extended.
 
     %hr/
 
@@ -394,8 +388,9 @@ title: Sass Basics
 
     - example do
       :plain
-        .container { width: 100%; }
-
+        .container {
+          width: 100%;
+        }
 
         article[role="main"] {
           float: left;
@@ -410,6 +405,7 @@ title: Sass Basics
         .container
           width: 100%
 
+
         article[role="main"]
           float: left
           width: 600px / 960px * 100%
@@ -422,6 +418,4 @@ title: Sass Basics
     :markdown
       We've created a very simple fluid grid, based on 960px. Operations in Sass
       let us do something like take pixel values and convert them to percentages
-      without much hassle. The generated CSS will look like:
-
-    ~ partial "code-snippets/homepage-operators-css"
+      without much hassle.