diff --git a/helpers/sass_helpers.rb b/helpers/sass_helpers.rb index 485ee79..20c30c0 100644 --- a/helpers/sass_helpers.rb +++ b/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 diff --git a/source/code-snippets/_homepage-extend-css.md b/source/code-snippets/_homepage-extend-css.md deleted file mode 100644 index c9777ad..0000000 --- a/source/code-snippets/_homepage-extend-css.md +++ /dev/null @@ -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; -} -``` diff --git a/source/code-snippets/_homepage-import-css.md b/source/code-snippets/_homepage-import-css.md deleted file mode 100644 index ebc7cee..0000000 --- a/source/code-snippets/_homepage-import-css.md +++ /dev/null @@ -1,11 +0,0 @@ -```css -html, body, ul, ol { - margin: 0; - padding: 0; -} - -body { - font: 100% Helvetica, sans-serif; - background-color: #efefef; -} -``` diff --git a/source/code-snippets/_homepage-mixins-css.md b/source/code-snippets/_homepage-mixins-css.md deleted file mode 100644 index e0b9d76..0000000 --- a/source/code-snippets/_homepage-mixins-css.md +++ /dev/null @@ -1,7 +0,0 @@ -```css -.box { - -webkit-transform: rotate(30deg); - -ms-transform: rotate(30deg); - transform: rotate(30deg); -} -``` diff --git a/source/code-snippets/_homepage-nesting-css.md b/source/code-snippets/_homepage-nesting-css.md deleted file mode 100644 index aba6c8e..0000000 --- a/source/code-snippets/_homepage-nesting-css.md +++ /dev/null @@ -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; -} -``` diff --git a/source/code-snippets/_homepage-operators-css.md b/source/code-snippets/_homepage-operators-css.md deleted file mode 100644 index cadb24b..0000000 --- a/source/code-snippets/_homepage-operators-css.md +++ /dev/null @@ -1,15 +0,0 @@ -```css -.container { - width: 100%; -} - -article[role="main"] { - float: left; - width: 62.5%; -} - -aside[role="complementary"] { - float: right; - width: 31.25%; -} -``` diff --git a/source/code-snippets/_homepage-variables-css.md b/source/code-snippets/_homepage-variables-css.md deleted file mode 100644 index b91e51f..0000000 --- a/source/code-snippets/_homepage-variables-css.md +++ /dev/null @@ -1,6 +0,0 @@ -```css -body { - font: 100% Helvetica, sans-serif; - color: #333; -} -``` diff --git a/source/guide.html.haml b/source/guide.html.haml index 3301101..fc7db99 100644 --- a/source/guide.html.haml +++ b/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 ul, li, and a selectors are nested inside the nav 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 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 $property 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 @include 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 %equal-heights doesn't print because it is never used. - - ~ partial "code-snippets/homepage-extend-css" + Note that the CSS in %equal-heights isn't generated, because + %equal-heights 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.