Mention the two syntaxes in /guide

Closes #615

helpers/sass_helpers.rb

@@ -344,21 +344,21 @@ def release_url(impl)
   # Returns HTML for a warning.
   #
   # The contents should be supplied as a block.
-  def heads_up
+  def heads_up(&block)
     _concat(content_tag :div, [
       content_tag(:h3, '⚠️ Heads up!'),
-      _render_markdown(_capture {yield})
+      _render_markdown(_capture(&block))
     ], class: 'sl-c-callout sl-c-callout--warning')
   end
 
   # Returns HTML for a fun fact that's not directly relevant to the main
   # documentation.
   #
   # The contents should be supplied as a block.
-  def fun_fact
+  def fun_fact(&block)
     _concat(content_tag :div, [
       content_tag(:h3, '💡 Fun fact:'),
-      _render_markdown(_capture {yield})
+      _render_markdown(_capture(&block))
     ], class: 'sl-c-callout sl-c-callout--fun-fact')
   end
 
@@ -535,6 +535,7 @@ def _capture(&block)
   # HTML is nested within Markdown. Adds newlines before and after the content
   # to ensure that it doesn't cause adjacent markdown not to be parsed.
   def _concat(text)
-    concat("\n\n" + text.gsub("\n", " ") + "\n\n")
+    text = "\n\n" + text.gsub("\n", " ") + "\n\n"
+    is_haml? ? haml_concat(text) : concat()
   end
 end

source/guide.html.haml

@@ -58,7 +58,14 @@ introduction: >
     Sass would watch all files in the `app/sass` folder for changes, and
     compile CSS to the `public/stylesheets` folder.
 
-    ---
+  - fun_fact do
+    Sass has two syntaxes! The SCSS syntax (`.scss`) is used most commonly. It's
+    a superset of CSS, which means all valid CSS is also valid SCSS. The
+    indented syntax (`.sass`) is more unusual: it uses indentation rather than
+    curly braces to nest statements, and newlines instead of semicolons to
+    separate them. All our examples are available in both syntaxes.
+
+  %hr
 
 %section#topic-2
   :markdown