diff --git a/helpers/sass_helpers.rb b/helpers/sass_helpers.rb index 6ee15ee54..fec560bed 100644 --- a/helpers/sass_helpers.rb +++ b/helpers/sass_helpers.rb @@ -344,10 +344,10 @@ 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 @@ -355,10 +355,10 @@ def heads_up # 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 diff --git a/source/guide.html.haml b/source/guide.html.haml index a251f7a38..3b6688b2f 100644 --- a/source/guide.html.haml +++ b/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