From 9a4d66643e666c7ceb2f60f31a74c792e2e7124a Mon Sep 17 00:00:00 2001 From: Jina Anne Date: Fri, 28 Dec 2018 17:03:29 -0800 Subject: [PATCH] add list documentation --- .../css/components/_sass-syntax-switcher.scss | 2 + source/guide.html.haml | 212 +++++++++++++++++- 2 files changed, 210 insertions(+), 4 deletions(-) diff --git a/source/assets/css/components/_sass-syntax-switcher.scss b/source/assets/css/components/_sass-syntax-switcher.scss index 7d95498..b0b3939 100644 --- a/source/assets/css/components/_sass-syntax-switcher.scss +++ b/source/assets/css/components/_sass-syntax-switcher.scss @@ -11,6 +11,8 @@ top: 4.78rem; margin-right: -1em; + a { border: 0; } + a:focus { outline: 0px !important; border:none !important; diff --git a/source/guide.html.haml b/source/guide.html.haml index eff48fe..6895ef5 100644 --- a/source/guide.html.haml +++ b/source/guide.html.haml @@ -19,6 +19,7 @@ introduction: > - [Mixins](#topic-6) - [Inheritance](#topic-7) - [Operators](#topic-8) + - [Lists](#topic-9) %section.sl-l-section.sl-l-section--small#topic-1 :markdown @@ -211,10 +212,10 @@ introduction: > background-color: #efefef; } -:markdown - Notice we're using `@import 'reset';` in the `base.scss` file. When you - import a file you don't need to include the file extension `.scss`. Sass - is smart and will figure it out for you. + :markdown + Notice we're using `@import 'reset';` in the `base.scss` file. When you + import a file you don't need to include the file extension `.scss`. Sass + is smart and will figure it out for you. %section.sl-l-section.sl-l-section--small#topic-6 :markdown @@ -562,3 +563,206 @@ introduction: > 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. + +%section.sl-l-section.sl-l-section--small#topic-8 + :markdown + ## Operators + + Doing math in your CSS is very helpful. Sass has a handful of standard + math operators like `+`, `-`, `*`, `/`, and `%`. In our example we're + going to do some simple math to calculate widths for an `aside` & + `article`. + + - example do + :plain + .container { + width: 100%; + } + + article[role="main"] { + float: left; + width: 600px / 960px * 100%; + } + + aside[role="complementary"] { + float: right; + width: 300px / 960px * 100%; + } + === + .container + width: 100% + + + article[role="main"] + float: left + width: 600px / 960px * 100% + + + aside[role="complementary"] + float: right + width: 300px / 960px * 100% + + :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. + + ## Mixins + + Some things in CSS are a bit tedious to write, especially with CSS3 and + the many vendor prefixes that exist. A mixin lets you make groups of CSS + declarations that you want to reuse throughout your site. You can even + pass in values to make your mixin more flexible. A good use of a mixin is + for vendor prefixes. Here's an example for transform. + + - example do + :plain + @mixin transform($property) { + -webkit-transform: $property; + -ms-transform: $property; + transform: $property; + } + + .box { @include transform(rotate(30deg)); } + === + =transform($property) + -webkit-transform: $property + -ms-transform: $property + transform: $property + + .box + +transform(rotate(30deg)) + + :markdown + To create a mixin you use the @mixin directive and give it a + name. We've named our mixin transform. We're also using + 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. + + %hr/ + + %li#topic-7 + :markdown + ## Extend/Inheritance + + This is one of the most useful features of Sass. Using + @extend lets you share a set of CSS properties from one + selector to another. It helps keep your Sass very DRY. In our example + we're going to create a simple series of messaging for errors, warnings + and successes using another feature which goes hand in hand with extend, + placeholder classes. A placeholder class is a special type of class + that only prints when it is extended, and can help keep your compiled + CSS neat and clean. + + - example do + :plain + /* 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; + } + + .error { + @extend %message-shared; + border-color: red; + } + + .warning { + @extend %message-shared; + border-color: yellow; + } + === + /* 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 + + + .error + @extend %message-shared + border-color: red + + + .warning + @extend %message-shared + border-color: yellow + + :markdown + What the above code does is tells .message, + .success, .error, & .warning + to behave just like %message-shared. That means anywhere + that %message-shared shows up, .message, + .success, .error, & .warning + will too. The magic happens in the generated CSS, where each of these + classes will get the same CSS properties as %message-shared. + This helps you avoid having to write multiple class names on HTML + elements. + + You can extend most simple CSS selectors in addition to placeholder + classes in Sass, but using placeholders is the easiest way to make + sure you aren't extending a class that's nested elsewhere in your + styles, which can result in unintended selectors in your CSS. + + Note that the CSS in %equal-heights isn't generated, because + %equal-heights is never extended. + + %hr/ + + %li#topic-9 + :markdown + ## Lists + + You can define a sequence of values as a list. These values can be + separated by commas, a space, parentheses, or square brackets. These can + be great for looping over. For example, you can loop over a list of colors + to generate class names for them. + + - example do + :plain + $colors: red yellow blue; + + @each $color in $colors { + .swatch--\#{$color} { + background: $color; + } + } + === + $colors: red orange yellow green blue indigo violet + + @each $color in $colors + .swatch--\#{$color} + background: $color