Getting Sassy with CSS ~ Girl Develop It

Download the slides.
http://gdila.github.io/sass-shop
Open the exercises directory in your text editor of choice.
The exercises/kittens directory is where we'll be doing our work.
Navigate to the exercises/kittens directory via the command line.
Run sass -v to verify that Sass is installed.
Open exercises/kittens/index.html in your browser.
Yay, kittens!

Section I

What is Sass?

WHY The Trouble with CSS

Websites are becoming increasingly complex.
CSS is getting harder to maintain.
Writing styles is often tedious and repetitive.
CSS can only do so much for us...

Syntactically Awesome StyleSheets

Like CSS, but AWESOME

Sass Origins

2007: Designed by Hampton Catlin (Haml)
Developed by Natalie Weizenbaum and Chris Eppstein (Compass)
March 2014: Sass 3.3 was released!
August 2014: Sass 3.4 was released!
Pushing CSS ahead!

Repetition


                .header {
                  background-color: #531946;
                  border-radius: 5px;
                  padding: 5px 20px;
                }
                .header a {
                  color: #fff;
                }
                .header a:hover {
                  color: #095169;
                }

                .footer {
                  background-color: #30162B;
                  color: #fff;
                  border-radius: 5px;
                  padding: 5px 20px;
                }
                .footer a {
                  color: #095169;
                }
                .footer a:hover {
                  color: #fff;
                }

                .feature a {
                  background-color: #30162B;
                  color: #fff;
                  border-radius: 5px;
                  padding: 5px 20px;
                }
                .feature a:hover {
                  color: #531946;
                }

                .content {
                  background-color: #fff;
                  color: #222;
                  border-radius: 5px;
                  padding: 5px 20px;
                }

DRY

Don't Repeat Yourself

HEX Colors

Border Radius + Padding

Selectors

Repetition Colors

CSS


                .header {
                  background-color: #531946;
                }
                .header a {
                  color: #fff;
                }
                .header a:hover {
                  color: #095169;
                }

                .footer {
                  background-color: #30162B;
                  color: #fff;
                }
                .footer a {
                  color: #095169;
                }
                .footer a:hover {
                  color: #fff;
                }

                .feature a {
                  background-color: #30162B;
                  color: #fff;
                }

                .feature a:hover {
                  color: #531946;
                }

                .content {
                  background-color: #fff;
                  color: #222;
                }

Sass Variables


                $white: #ffffff;
                $black: #222222; // NOT! ;)
                $eggplant: #531946;
                $eggplantDark: #30162B;
                $teal: #095169;

                .header {
                  background-color: $eggplant;
                }
                .header a {
                  color: $white;
                }
                .header a:hover {
                  color: $teal;
                }

                .footer {
                  background-color: $eggplantDark;
                  color: $white;
                }
                .footer a {
                  color: $teal;
                }
                .footer a:hover {
                  color: $white;
                }

                .feature a {
                  background-color: $eggplantDark;
                  color: $white;
                }

                .feature a:hover {
                  color: $eggplant;
                }

                .content {
                  background-color: $white;
                  color: $black;
                }

Repetition Border Radius + Padding

CSS


                .header {
                  border-radius: 5px;
                  padding: 5px 20px;
                  /* ... */
                }

                .footer {
                  border-radius: 5px;
                  padding: 5px 20px;
                  /* ... */
                }

                .feature a {
                  border-radius: 5px;
                  padding: 5px 20px;
                  /* ... */
                }

                .content {
                  border-radius: 5px;
                  padding: 5px 20px;
                  /* ... */
                }

Sass Mixins


                @mixin rounded-box {
                  border-radius: 5px;
                  padding: 5px 20px;
                }

                .header {
                  @include rounded-box;
                  // ...
                }

                .footer {
                  @include rounded-box;
                  // ...
                }

                .feature a {
                  @include rounded-box;
                  // ...
                }

                .content {
                  @include rounded-box;
                  // ...
                }

Repetition Selectors

CSS


                .header {
                  /* ... */
                }
                .header a {
                  /* ... */
                }
                .header a:hover {
                  /* ... */
                }

                .footer {
                  /* ... */
                }
                .footer a {
                  /* ... */
                }
                .footer a:hover {
                  /* ... */
                }

                .feature a {
                  /* ... */
                }
                .feature a:hover {
                  /* ... */
                }

                .content {
                  /* ... */
                }

Sass Nesting


                .header {
                  // ...

                  a {
                    // ...

                    &:hover {
                      // ...
                    }
                  }
                }

                .footer {
                  // ...

                  a {
                    // ...

                    &:hover {
                      // ...
                    }
                  }
                }

                .feature a {
                  // ...

                  &:hover {
                    // ...
                  }
                }

                .content {
                  // ...
                }

RECAP Repetition

CSS


                .header {
                  background-color: #531946;
                  border-radius: 5px;
                  padding: 5px 20px;
                }
                .header a {
                  color: #fff;
                }
                .header a:hover {
                  color: #095169;
                }

                .footer {
                  background-color: #30162B;
                  color: #fff;
                  border-radius: 5px;
                  padding: 5px 20px;
                }
                .footer a {
                  color: #095169;
                }
                .footer a:hover {
                  color: #fff;
                }

                .feature a {
                  background-color: #30162B;
                  color: #fff;
                  border-radius: 5px;
                  padding: 5px 20px;
                }
                .feature a:hover {
                  color: #531946;
                }

                .content {
                  background-color: #fff;
                  color: #222;
                  border-radius: 5px;
                  padding: 5px 20px;
                }

Sass


                $white:        #ffffff;
                $grey:         #222222;
                $eggplant:     #531946;
                $eggplantDark: #30162B;
                $teal:         #095169;

                // Mixins
                @mixin rounded-box {
                  border-radius: 5px;
                  padding: 5px 20px;
                }

                // Site Stylez
                .header {
                  @include rounded-box;
                  background-color: $eggplant;

                  a {
                    color: $white;
                    &:hover { color: $teal; }
                  }
                }

                .footer {
                  @include rounded-box;
                  background-color: $eggplantDark;
                  color: $white;

                  a {
                    color: $teal;
                    &:hover { color: $white; }
                  }
                }

                .feature a {
                  @include rounded-box;
                  background-color: $eggplantDark;
                  color: $white;

                  &:hover { color: $eggplant; }
                }

                .content {
                  @include rounded-box;
                  background-color: $white;
                  color: $grey;
                }

RECAP Why Sass?

Reduced complexity.
Increased maintainability.
Minimized repetition.
Supercharged CSS!

What is Sass?

Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly...

~ Sass Documentation

What is Sass?

CSS Extension

SassScript Language

CSS Preprocessor

SassScript Interpreter

Sass CSS

Two SassScript Syntaxes

.scss (Sassy CSS)
Default syntax; Valid CSS == Valid SCSS


                $black: #000;
                $white: #fff;

                .this {
                  color: $black;
                  background: $white;
                }

                .that {
                  color: $white;
                  background: $black;
                }

                .this, .that {
                  display: block;

                  &:hover {
                    border: 1px solid;
                  }
                }

.sass (Indented)
Original syntax, still supported; Haml-esque


                $black: #000
                $white: #fff

                .this
                  color: $black
                  background: $white

                .that
                  color: $white
                  background: $black

                .this, .that
                  display: block
                  &:hover
                    border: 1px solid

Section II

The Sass Workflow

Sass Installation

Ruby

OS X? Lucky you, it's preinstalled!

Windows? Try RubyInstaller.

Sass

$ gem install sass

Running Sass

(aka Compiling Sass)

Sass CSS

$ sass source.scss output.css

$ sass source_dir output_dir

Running Sass

kittens
- index.html
- sass
  - application.scss
- css
  - application.css

$ sass sass/screen.scss css/screen.css

Sass Is Watching You...

$ sass --watch source.scss:output.css

This is the best thing EVER.

Gotchya: Colon vs. Space

More Sass Options

$ sass source.scss output.css

Compile source.scss to output.css. Gotchya: will fail if output directory doesn't exist.

$ sass --update source.scss:output.css

Compile source.scss to output.css. Will create directory if it doesn't exist.

$ sass --watch source.scss:output.css

Watch source.scss for changes. Will create directory if it doesn't exist.

$ sass --style expanded source.scss:output.css

Adjusts output format. Options: nested, expanded, compact, compressed

Demo Sass Workflow

Sass Sourcemaps

Sourcemaps tell browsers where the Sass that generated the CSS is.
You must enable sourcemaps in the browser to use this feature.

Workflow Let's develop it!

Open up your kittens project
Open index.html in the broswer
Optionally enable LivePage**
Copy css/application.css to sass/application.scss
mkdir sass && cp css/application.css sass/application.scss
Remove application.css
rm css/application.css
Run Sass (on one line):
sass --watch --style expanded sass/application.scss:css/application.css
Checkout your page in the browser to see your new sassified stylez!

kittens
- index.html
- css
  - application.css
- sass
  - application.scss

** You will need to enable "Allow access to file URLs" for LivePage in chrome://extensions

Break Time!

Enjoy some snacks!
courtesy of

Section III

Sass Basics

Nesting
Variables
Imports & Organization

Sass Basics Nesting

HTML has a clear hierarchy - elements are nested.

We can apply the same concept in Sass.

HTML


                <nav class="navigation">
                  <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                  </ul>
                </nav>

Sass


                .navigation {
                  float: right;

                  li {
                    display: inline-block;
                    list-style-type: none;
                    margin-left: 1.5em;
                  }

                  a {
                    display: block;
                    text-decoration: none;
                  }
                }

Nesting Output

Sass


                .navigation {
                  float: right;

                  li {
                    display: inline-block;
                    list-style-type: none;
                    margin-left: 1.5em;
                  }

                  a {
                    display: block;
                    text-decoration: none;
                  }
                }

CSS Output


                .navigation {
                  float: right;
                }

                .navigation li {
                  display: inline-block;
                  list-style-type: none;
                  margin-left: 1.5em;
                }

                .navigation a {
                  display: block;
                  text-decoration: none;
                }

Sass gives us organization.

Sass reduces repetition.

Nesting Gotchya

Mirroring HTML nesting is SUPER easy.

Overly verbose and overly specific.

Rule of thumb or "the Inception Rule": no more than 3 levels deep.

Sass


                body {
                  .header {
                    .navigation {
                      ul {
                        li {
                          a {
                            // ...
                          }
                        }
                      }
                    }
                  }
                }

CSS Output


                body .header .navigation ul li a {
                  // ...
                }

Nesting Parent Selectors

Sass allows us to reference the current parent selector(s) via the ampersand character:

Sass


                a {
                  color: #beedee;

                  &:hover {
                    color: #cbbebb;
                  }

                  &.btn {
                    background: #deede6;
                  }

                  .btn {
                    display: block;
                  }
                }

CSS Output


                a {
                  color: #beedee;
                }

                a:hover {
                  color: #cbbebb;
                }

                a.btn {
                  background: #deede6;
                }

                a .btn {
                  display: block;
                }

Nesting Parent Selectors

The & selector can follow other selectors. This will override the parent element's (&) styles when it exists within the preceding selector.

Sass


                a {
                  .footer & {
                    text-decoration: none;

                    span {
                      opacity: .5;
                    }
                  }

                  span {
                    .navigation & {
                      display: block;
                    }
                  }
                }

CSS Output


                .footer a {
                  text-decoration: none;
                }

                .footer a span {
                  opacity: .5;
                }

                .navigation a span {
                  display: block;
                }

Nesting Parent Selectors

The & selector can also be combined with strings.
PERFECT for BEM, child elements, states, and modifications.

Sass


                .module {
                  &__child {
                    margin-bottom: 1em;
                  }

                  &--modifier {
                    display: inline;
                  }
                }

CSS Output


                .module__child {
                  margin-bottom: 1em;
                }

                .module--modifier {
                  display: inline;
                }

Nesting Parent Selectors

The & contents can also be accessed as a string/list and used in SassScript.

Sass


                .thing.thang {
                  .thung {
                    content: &;
                    content: &--mod;
                    content: selector-append(&, '--mod');

                    &--mod { content: 'here'; }
                  }
                }

CSS Output


                .thing.thang .thung {
                  content: .thing.thang .thung;
                  content: .thing.thang .thung --mod;
                  content: .thing.thang .thung--mod;
                }
                .thing.thang .thung--mod {
                  content: 'here';
                }

There are a handful of additional selector methods.

Nesting Properties

You can also nest namespaced properties

Sass


                a {
                  border: {
                    color: #deedee;
                    style: solid;
                    width: 2px;
                  }
                }

CSS Output


                a {
                  border-color: #deedee;
                  border-style: solid;
                  border-width: 2px;
                }

Nesting Let's develop it!

NEST ALL THE THINGS!!

BUT Don't nest too deeply!

And just kidding...
You don't need to nest everything.

P.S. Don't Forget
The parent & selector.

Oh! And feel free to rename things!


                // good
                .navigation {
                  li {//...}
                  a  {
                    //...
                    &:hover { //... }
                  }
                }

                // bad
                body {
                  .header {
                    .navigation {
                      ul {
                        li {
                          a {
                            // ...
                          }
                        }
                      }
                    }
                  }
                }

sass --watch --style expanded sass/application.scss:css/application.css

Sass Basics

Variables

Sass Basics Variables

Some Uses

colors
font sizes
font families
font paths
padding
margins
breakpoints

Some More Uses

border-radius
content
gradients
shadows
SELECTORS!
LOGIC!
ALL THE THINGS!!!1!

Variables Assignment & Reference

Variables are defined à la CSS prop/val pairs: $property: value;

Variables are then referenced by their $-prefixed names.

Sass


                $grey: rgba(0,0,0,.5);
                $teal: #095169;
                $default-padding: 1em;

                a {
                  color: $teal;
                  padding: $default-padding;
                  &:hover {
                    color: $grey;
                    background: $teal;
                  }
                }

                p { padding-bottom: $default-padding; }

CSS Output


                a {
                  color: #095169;
                  padding: 1em;
                }

                a:hover {
                  color: rgba(0,0,0,.5);
                  background: #095169;
                }

                p {
                  padding-bottom: 1em;
                }

Variable Data Types

Types

Numbers
Strings
Colors
Lists
Booleans
Null
Maps

Uses


                $base-padding: 10px;
                $line-height: 1.5;

                $base-font: Verdana;
                $content: "Loading...";

                $feature-color: purple;
                $feature-background: rgba(0, 255, 0, 0.5);

                $base-margin: 20px 0 30px 10px;
                $base-font: "Trebuchet MS", "Verdana", "Arial";

                $bordered: true;
                $shadowed: false;

                $secondary: null;

                $map: (key1: value1, key2: value2, key3: value3);

Variable Simple Assignment

You can redeclare variables to override previous values

Sass


                $border-width: 2px;
                $border-width: 4px;

                a {
                  border: $border-width solid $teal;
                }

CSS Output


                a {
                  border: 4px solid #095169;
                }

Variable Guarded Assignment

The !default flag
Means: set if it does not already have a value

Sass


                $border-width: 2px;
                $border-width: 4px !default;

                a {
                  border: $border-width solid $teal;
                }

CSS Output


                a {
                  border: 2px solid #095169;
                }

Variable Scope

Variables are only available within the level of nested selectors where they're defined.

If they're defined outside of any nested selectors, they're available everywhere.

~ Sass Documentation

Sass


                $border-width: 4px; // Global

                a {
                  $color: orange;   // Local
                  border: $border-width solid $color;
                }

                p {
                  border: $border-width solid $color;
                  // ERROR!! Undefined variable "$color"
                }

Variable Globals

Changes to "global" variables within a selector are local to that selector.

UNLESS defined with the !global flag, in which case the change is set globally.

DEMO

Sass


                $border-width: 4px;
                $border-radius: 4px;

                a {
                  $border-width: 2px !global;
                  $border-radius: 8px;

                  border-width: $border-width;   //=> 2px
                  border-radius: $border-radius; //=> 8px
                }

                p {
                  border-width: $border-width;   //=> 2px
                  border-radius: $border-radius; //=> 4px
                }

Variable Interpolation

Variables can be injected into selectors,
property names and values, and strings via #{$variable}

Sass


                $side: left;

                .box-#{$side} {
                  border-#{$side}: 1px solid #ccc;

                  &:before {
                    content: "It's on the #{$side} side";
                  }
                }

CSS Output


                .box-left {
                  border-left: 1px solid #ccc;
                }

                .box-left:before {
                  content: "It's on the left side";
                }

PROTIP Modular Naming

OK Variables


                $white: #ffffff;
                $black: #222222;
                $eggplant: #531946;
                $eggplantDark: #30162B;
                $teal: #095169;

                .header {
                  background-color: $eggplant;
                }
                .header a {
                  color: $white;
                }
                .header a:hover {
                  color: $teal;
                }

                .footer {
                  background-color: $eggplant-dark;
                  color: $white;
                }
                .footer a {
                  color: $teal;
                }
                .footer a:hover {
                  color: $white;
                }

                .feature a {
                  background-color: $eggplant-dark;
                  color: $white;
                }

                .feature a:hover {
                  color: $eggplant;
                }

                .content {
                  background-color: $white;
                  color: $black;
                }

Better Variables


                // Descriptive Colors
                $white:        #ffffff;
                $grey:         #222222;
                $eggplant:     #531946;
                $eggplantDark: #30162B;
                $teal:         #095169;

                // Functional Colors
                $header--background:          $eggplant;
                $header__logo--color:         $white;
                $header__logo--color--hover:  $teal;

                $footer--background:          $eggplant--dark;
                $footer--color:               $white;
                $footer__nav--color:          $teal;
                $footer__nav--color--hover:   $white;

                $content--background:         $white;
                $content--color:              $grey;

                $feature__link--background:   $eggplant--dark;
                $feature__link--color:        $white;
                $feature__link--color--hover: $eggplant;

                .header {
                  background-color: $header--background;
                }
                .header a {
                  color: $header__logo--color;
                }
                .header a:hover {
                  color: $header__logo--color--hover;
                }

                .footer {
                  background-color: $footer--background;
                  color: $footer--color;
                }
                .footer a {
                  color: $footer__nav--color;
                }
                .footer a:hover {
                  color: $footer__nav--color--hover;
                }

                .feature a {
                  background-color: $feature__link--background;
                  color: $feature__link--color;
                }

                .feature a:hover {
                  color: $eggplant;
                }

                .content {
                  background-color: $content--background;
                  color: $content--color;
                }

Variables Let's develop it!

DRY Up Your Styles

Add Variables

colors values
font family
border width
border radius

Repetitious values.

"Arbitrary" values.

sass --watch --style expanded sass/application.scss:css/application.css

Sass Basics

Imports & Organization

Sass Basics Imports & Organization

CSS @import has always meant an extra file download.

Sass modifies @import to instead include the resource during compilation, rather than on the client side.

Organization OMGZZ!


              @import "vars";

              @import "compass";
              @import "fontawesome";

              @import "utilities";

              @import "grid";
              @import "base";

              @import "modules/all";
              @import "pages/all";

Organization Imports

@import takes a path to a Sass resource, the file extension is optional.

These @imports look for resources within the main Sass file's parent directory.


                @import "vars";

                @import "compass";
                @import "fontawesome";

                @import "utilities";

                @import "grid";
                @import "base";

                @import "modules/all";
                @import "pages/all";

Imports File Structure

application.scss


                @import "vars";
                @import "lib/compass";
                @import "lib/fontawesome";
                @import "utilities";
                @import "grid";
                @import "base";

$ sass sass/screen.scss css/screen.css

project_awesome
- sass
  - lib
    - compass.scss
    - fontawesome.scss
  - base.scss
  - grid.scss
  - screen.scss
  - utilities.scss
  - vars.scss
- css
  - screen.css

Imports Compiling Directories

$ sass sass/ css/

sass
- lib
  - compass.scss
  - fontawesome.scss
- base.scss
- grid.scss
- screen.scss
- utilities.scss
- vars.scss

css
- lib
  - compass.css
  - fontawesome.css
- base.css
- grid.css
- screen.css
- utilities.css
- vars.css

Imports Partials

$ sass sass/ css/

sass
- lib
  - _compass.scss
  - _fontawesome.scss
- _base.scss
- _grid.scss
- print.scss
- screen.scss
- _utilities.scss
- _vars.scss

css
- print.css
- screen.css

An _underscore creates a partial
Partials will not compile to .css on their own, they must be @imported
Partials allow us to break up our code into more modular, maintainable chunks!

Imports Organization

Common Practices

_vars.scss is a separate sheet for all your variables
_vars.scss is added first so that it's variables can override later !defaulted ones
Variables > Libraries > Base > Modules > Pages
OOCSS, BEM, SMACSS, Atomic Design
Modular Architecture

application.scss


                // Variables
                @import "vars";

                // Libraries
                @import "lib/compass";
                @import "lib/fontawesome";

                // Base Styles, Utility Classes, etc.
                @import "base/all";

                // Individual Components
                @import "modules/all";

                // Page Styles
                @import "pages/all";

Imports Let's develop it!

Update your Sass structure to look something like the one on the right.
Move ALL styles from application.scss to more modular / organized locations.
Update application.scss to @import your new partials.

kittens
- sass
  - base
    - _vars.scss
    - _base.scss
  - modules
    - _header.scss
    - _footer.scss
    - _kittens.scss
    - _info.scss
  - application.scss

sass --watch --style expanded sass/application.scss:css/application.css

Break Time!

Enjoy some snacks!
courtesy of

Part 1 Review

Sass Intro

Workflow

Nesting

Variables

Imports & Organization

Questions?

Getting Sassy with CSS

#SassShop

Day 1 Review

Sass Intro

Workflow

Nesting

Variables

Imports & Organization

Questions?

Day 2 Setup Let's develop it!

Load up the slides.
https://SassShop.com
Open the entire exercises directory in your text editor of choice.
The exercises/kittens directory is where we'll be doing our work.
Navigate to the exercises/kittens directory via the command line.
Use cd to navigate the file structure.
Run the Sass watch command.
sass --watch --style expanded sass/application.scss:css/application.css
Open exercises/kittens/index.html in your browser.
Yay, kittens!

Day 2 Sync Up Let's develop it!

Open the exercises director in your file browser.
OS X: Finder; Windows: File Explorer
In kittens, create a new folder called "day1".
The name really isn't too important.
Move the contents of kittens into the new day1 folder.
This should include: index.html, sass/, and css/.
Copy the contents of kittens-3-imports into the kittens folder.
Yay, nesting, variables, and imports!

Section IV

Advanced Sass

Mixins (@include)
Inheritance (@extend)
Math & Color
Directives (Overview)

Advanced Sass Mixins

Variables let you reuse single values.

Mixins let you reuse blocks of styles.

Mixins Use

CSS


                .header {
                  border-radius: 5px;
                  padding: 5px 20px;
                }

                .footer {
                  border-radius: 5px;
                  padding: 5px 20px;
                }

                .feature a {
                  border-radius: 5px;
                  padding: 5px 20px;
                }

                .content {
                  border-radius: 5px;
                  padding: 5px 20px;
                }

Sass Mixins


                @mixin rounded-box {
                  border-radius: 5px;
                  padding: 5px 20px;
                }

                .header {
                  @include rounded-box;
                }

                .footer {
                  @include rounded-box;
                }

                .feature a {
                  @include rounded-box;
                }

                .content {
                  @include rounded-box;
                }

Mixins Setup


                @mixin rounded-box {
                  border-radius: 5px;
                  padding: 5px 20px;
                }

                .header {
                  @include rounded-box;
                  color: $header-color;
                  // ...
                }

                .footer {
                  @include rounded-box;
                  // ...
                }

                .feature a {
                  @include rounded-box;
                  // ...
                }

                .content {
                  @include rounded-box;
                  // ...
                }

We define a mixin with the @mixin directive.
We reference a mixin with the @include directive.
Mixins must be defined before they're referenced.
Mixins accept optional arguments.
Mixins can be used with any other style rules.
You can nest within mixins just like you can elsewhere.

Mixins Output

Sass


                @mixin rounded-box {
                  border-radius: 5px;
                  padding: 5px 20px;
                }

                .header {
                  @include rounded-box;
                  color: $header-color;
                  // ...
                }

                .footer {
                  @include rounded-box;
                  // ...
                }

                .feature a {
                  @include rounded-box;
                  // ...
                }

                .content {
                  @include rounded-box;
                  // ...
                }

CSS Output


                .header {
                  border-radius: 5px;
                  padding: 5px 20px;
                  color: $header-color;
                  /* ... */
                }

                .footer {
                  border-radius: 5px;
                  padding: 5px 20px;
                  /* ... */
                }

                .feature a {
                  border-radius: 5px;
                  padding: 5px 20px;
                  /* ... */
                }

                .content {
                  border-radius: 5px;
                  padding: 5px 20px;
                  /* ... */
                }

Mixins Efficiency

Mixin Output


                .header {
                  border-radius: 5px;
                  padding: 5px 20px;
                  /* ... */
                }

                .footer {
                  border-radius: 5px;
                  padding: 5px 20px;
                  /* ... */
                }

                .feature a {
                  border-radius: 5px;
                  padding: 5px 20px;
                  /* ... */
                }

                .content {
                  border-radius: 5px;
                  padding: 5px 20px;
                  /* ... */
                }

CSS Grouping


                .header,
                .footer,
                .feature a,
                .content {
                  border-radius: 5px;
                  padding: 5px 20px;
                }

Mixins CSS3

Vendor Prefixes?!


                @mixin rounded-corners {
                  -webkit-border-radius: 10px;
                     -moz-border-radius: 10px;
                          border-radius: 10px;
                }

                .header {
                  @include rounded-corners;
                  // ...
                }

                .footer {
                  @include rounded-corners;
                  // ...
                }

But... we're still really just copying the same properties and values all over the place.

Mixins Arguments

Mixins are great for repeated blocks of styles
where the values differ from case to case.

Sass


                @mixin rounded-corners($radius) {
                  -webkit-border-radius: $radius;
                     -moz-border-radius: $radius;
                          border-radius: $radius;
                }

                .header {
                  @include rounded-corners(5px);
                  // ...
                }

                .footer {
                  @include rounded-corners(10px);
                  // ...
                }

CSS Output


                .header {
                  -webkit-border-radius: 5px;
                     -moz-border-radius: 5px;
                          border-radius: 5px;
                  // ...
                }

                .footer {
                  -webkit-border-radius: 10px;
                     -moz-border-radius: 10px;
                          border-radius: 10px;
                  // ...
                }

Mixins Argument Defaults

You can also set an argument's default value,
making it optional to pass one in.

Sass


                @mixin rounded-corners($radius: 5px) {
                  -webkit-border-radius: $radius;
                     -moz-border-radius: $radius;
                          border-radius: $radius;
                }

                .header {
                  @include rounded-corners;
                  // ...
                }

                .footer {
                  @include rounded-corners(10px);
                  // ...
                }

CSS Output


                .header {
                  -webkit-border-radius: 5px;
                     -moz-border-radius: 5px;
                          border-radius: 5px;
                  // ...
                }

                .footer {
                  -webkit-border-radius: 10px;
                     -moz-border-radius: 10px;
                          border-radius: 10px;
                  // ...
                }

Mixins Multiple Arguments

Comma separated, order matters.

Sass


                @mixin rounded-box($radius, $padding) {
                  border-radius: $radius;
                  padding: $padding;
                }

                .header {
                  @include rounded-box(5px, 20px);
                  color: $header-color;
                  // ...
                }

                .footer {
                  @include rounded-box(20px, 40px);
                  // ...
                }

CSS Output


                .header {
                  border-radius: 5px;
                  padding: 20px;
                  // ...
                }

                .footer {
                  border-radius: 20px;
                  padding: 40px;
                  // ...
                }

Mixins Optional Arguments

Optional arguments (ones with defaults) must be last in the set.

Sass


                @mixin rounded-box($radius: 5px, $padding: 20px) {
                  border-radius: $radius;
                  padding: $padding;
                }

                @mixin content($color, $font-size: 12px) {
                  color: $color;
                  font-size: $font-size;
                }

                .header {
                  @include rounded-box;
                  @include content(#aaa, 24px);
                  // ...
                }

                .footer {
                  @include rounded-box(20px, 40px);
                  @include content(#ccc);
                  // ...
                }

CSS Output


                .header {
                  border-radius: 5px;
                  padding: 20px;
                  color: #aaa;
                  font-size: 24px;
                  // ...
                }

                .footer {
                  border-radius: 20px;
                  padding: 40px;
                  color: #ccc;
                  font-size: 12px;
                  // ...
                }

Mixins Keyword Arguments

Order doesn't matter!


                @mixin rounded-box($radius: 5px, $padding: 20px) {
                  border-radius: $radius;
                  padding: $padding;
                }

                .header {
                  @include rounded-box($padding: 10px, $radius: 10px);
                }

                .footer {
                  @include rounded-box($padding: 40px);
                }

Mixin Variable Interpolation

Sass


                @mixin toolbar-border($side, $width: 2px) {
                  border-#{$side}: $width solid $toolbar-border;
                }

                .sidebar--left {
                  @include toolbar-border("right");
                }

                .sidebar--right {
                  @include toolbar-border("left");
                }

CSS Output


                .sidebar--left {
                  border-right: 2px solid #213213;
                }

                .sidebar--right {
                  border-left: 2px solid #213213;
                }

Mixins Let's develop it!

Create a mixins partial in your base directory and @import it in your main .scss file.
Create a border-radius @mixin with a required radius argument. Include common vendor prefixes.
Create a similar @mixin for scaled transformations.
ie. transform: scale(1.1);
@include these mixins wherever they can be applied.

Feel free to experiment and play around!

sass --watch --style expanded sass/application.scss:css/application.css

Advanced Sass

Inheritance

Mixin Efficiency

Mixin Output


                .header {
                  border-radius: 5px;
                  padding: 5px 20px;
                  /* ... */
                }

                .footer {
                  border-radius: 5px;
                  padding: 5px 20px;
                  /* ... */
                }

                .feature a {
                  border-radius: 5px;
                  padding: 5px 20px;
                  /* ... */
                }

                .content {
                  border-radius: 5px;
                  padding: 5px 20px;
                  /* ... */
                }

Grouping Optimiztion


                .header,
                .footer,
                .feature a,
                .content {
                  border-radius: 5px;
                  padding: 5px 20px;
                }

Advanced Sass Inheritance

@extend let's us group selectors together!

Sass


                .message {
                  border: 2px solid;
                  margin-bottom: 1em;
                  padding: 1em;
                  text-align: center;
                }

                .message-alert {
                  @extend .message;
                  @include message-colors($yellow);
                }

                .message-error {
                  @extend .message;
                  @include message-colors($red);
                }

                .message-notice {
                  @extend .message;
                  @include message-colors($green);
                }

CSS Output


                .message,
                .message-alert,
                .message-error,
                .message-notice {
                  border: 2px solid;
                  margin-bottom: 1em;
                  padding: 1em;
                  text-align: center;
                }

                .message-alert {
                  border-color: goldenrod;
                  color: goldenrod;
                }

                .message-error {
                  border-color: darkred;
                  color: darkred;
                }

                .message-notice {
                  border-color: green;
                  color: green;
                }

Inheritance Setup


                .message {
                  border: 2px solid;
                  margin-bottom: 1em;
                  padding: 1em;
                  text-align: center;
                }

                .message-alert {
                  @extend .message;
                  @include message-colors($yellow);
                }

                .message-error {
                  @extend .message;
                  @include message-colors($red);
                }

                .message-notice {
                  @extend .message;
                  @include message-colors($green);
                }

Any CSS class can be extended.
We reference a class to extend with the @extend directive.
Extended classes DO NOT need to be defined before they're referenced.
Extensions can be used with any other style rules.
You can nest within extended classes just like you can elsewhere.

Inheritance Output

If we don't need to apply both .message AND .message-alert to an element, then why do we even need .message anymore?!

Sass


                .message {
                  border: 2px solid;
                  margin-bottom: 1em;
                  padding: 1em;
                  text-align: center;
                }

                .message-alert {
                  @extend .message;
                  @include message-colors($yellow);
                }

                .message-error {
                  @extend .message;
                  @include message-colors($red);
                }

                .message-notice {
                  @extend .message;
                  @include message-colors($green);
                }

CSS Output


                .message,
                .message-alert,
                .message-error,
                .message-notice {
                  border: 2px solid;
                  margin-bottom: 1em;
                  padding: 1em;
                  text-align: center;
                }

                .message-alert {
                  border-color: goldenrod;
                  color: goldenrod;
                }

                .message-error {
                  border-color: darkred;
                  color: darkred;
                }

                .message-notice {
                  border-color: green;
                  color: green;
                }

Inheritance Placeholders

Placeholders are a special type of selector denoted by a %. They can be @extended but will never compile to the CSS on their own.

Sass


                %message {
                  border: 2px solid;
                  margin-bottom: 1em;
                  padding: 1em;
                  text-align: center;
                }

                .message-alert {
                  @extend %message;
                  @include message-colors($yellow);
                }

                .message-error {
                  @extend %message;
                  @include message-colors($red);
                }

                .message-notice {
                  @extend %message;
                  @include message-colors($green);
                }

CSS Output


                .message-alert,
                .message-error,
                .message-notice, {
                  border: 2px solid;
                  margin-bottom: 1em;
                  padding: 1em;
                  text-align: center;
                }

                .message-alert {
                  border-color: goldenrod;
                  color: goldenrod;
                }

                .message-error {
                  border-color: darkred;
                  color: darkred;
                }

                .message-notice {
                  border-color: green;
                  color: green;
                }

Placeholders or Mixins?
Which to use?

The best advice would be: if you need variables, use a mixin. Otherwise, extend a placeholder.
There are two reasons for this:

First, you can’t use variables in a placeholder. Actually you can but you cannot pass variables to your placeholders.

Second, how Sass handles mixins makes them very inconvenient when you don’t use them with contextual variables. To put it simply: Sass will duplicate the output of the mixin every time you use it.

@extend Let's develop it!

Create a placeholder partial in your base directory and @import it in your main .scss file.
Create a placeholder for %clearfix and @extend it on the appropriate selectors.
Also remove the .clearfix class from the markup.
Create a .navlist--inline class like the one on the right.
@extend that class on elements that match the pattern.
Hint: checkout the header and footer styles.

Let's get modular!


                .navlist--inline {
                  list-style-type: none;

                  li {
                    display: inline-block;
                  }

                  a {
                    display: block;
                  }
                }

sass --watch --style expanded sass/application.scss:css/application.css

Advanced Sass

Math & Color

Advanced Sass Math Operators

Sass allows us to do basic math operations*, like:
- + addition
- - subtraction
- * multiplication
- / division
- % modulus
  (remainder from division)
AND string concatenation


                $title: "Girl Develop It";
                $base-font-size: 16px;
                $padding-default: 2em;

                .header {
                  padding: $padding-default / 2;
                  font-size: $base-font-size * 2;

                  &:before {
                    content: "Welcome to " + $title;
                  }
                }

* Sass attempts to operate on mismatched units, but will throw an error if incompatible

Good: 20px * 2 | Bad: 20px + 4em

Math Division

CSS allows / to be used for separating values.

font: normal 1.5em/1.25 Tahoma, Arial, sans-serif;

SassScript maintains this support.
There are three alternative ways to trigger division:

If any part of the equation is a variable: $padding / 2
If the equation is surrounded by parentheses: (350 / .25)
If the equation involves another expression: 2 + 3 / 10

Math Utilities

Sass also comes with a set of math functions:

abs($num) - absolute value
ceil($num) - round up to closest whole number
floor($num) - round down to closest whole number
percentage($num) - convert to percentage
round($num) - round to closest whole number
max($list) - maximum list value
min($list) - minimum list value

Math Color

We can also use math to manipulate colors.

Math operations on colors work on pieces (r, g, b).


                .addition {
                  color: #555555 + #112233; // => #667788
                }
                .subtraction {
                  color: #555555 - #112233; // => #443322
                }
                .multiplication {
                  color: #555555 * 2;       // => #aaaaaa
                }
                .division {
                  color: (#555555 / 2);     // => #2a2a2a
                }

Advanced Sass Color Utilities

Sass comes with a set of color functions.

rgba($hex, $alpha)
Converts HEX to RGBA and sets alpha (opacity)
lighten($color, $percent)
Makes a color lighter
darken($color, $percent)
Makes a color darker
saturate($color, $percent)
Makes a color more saturated
desaturate($color, $percent)
Makes a color less saturated

mix($color1, $color2)
Mixes two colors together
grayscale($color)
Converts a color to grayscale
invert($color)
Inverts a color
complement($color)
Returns the complement of a color
AND SO MUCH MORE!

Here's are two awesome tools to help visualize color output.

Math & Color Let's develop it!

Use a color function to darken the background color of header nav links on hover.
Be sure to set the new color to a variable, too!
Use math operations to calculate any widths being set:
- See .wrapper and .kitten
- See .news, .events, and .location
Hint: use variables for "base" widths.

sass --watch --style expanded sass/application.scss:css/application.css

Advanced Sass

Directive

Advanced Sass Directive

Functions
Conditionals
Loops

Directives Functions

Sass let's us define
custom functions.


                @function fluidize($target, $context) {
                  @return ($target / $context) * 100%;
                }

                .sidebar {
                  width: fluidize(350px, 1000px);
                  // => width: 35%;
                }

We define a function with the @function directive.
We return a value with the @return directive.
We call a function by it's name and parens, passing arguments if needed.
Functions must be defined before they're referenced.
Functions accept arguments, they have the same rules as mixins (ie. defaults, order, keyword args, etc.)

Directives Conditionals

Sass let's us set
conditions.


                $theme: light !default;

                body {
                  @if $theme == dark {
                    background: #000;

                  } @else if $theme == dark-mid {
                    background: #4f4f4f;

                  } @else if $theme == light-mid {
                    background: #afafaf;

                  } @else {
                    background: #fff;
                  }
                }

We begin a conditon with the @if directive, then give it a comparison to evaluate
We have @else if for additional comparisons
And @else as a fallback if all prior comparisons evaluate to null or false

Comparators include:
* only compare numbers

== equal to
> greater than *
>= greater than or equal to *

!= not equal to
< less than *
<= less than or equal to *

Directives Each Loops

Sass let's us
loop through lists.


              $themes: dark dark-mid light-mid light;

              @each $theme in $themes {
                .theme-#{$theme} {
                  @include theme-colors($theme);
                }
              }

              // .theme-dark {
              //   background: #000;
              //   color: #fff;
              // }
              // .theme-dark-mid {
              //   background: #444;
              //   color: #eee;
              // }
              // ...

The @each directive takes the form of:
- @each $var in <list>
$var can be any variable name
<list> could be a list, or a variable storing one

Directives For Loops

Sass lets us loop
through # ranges.


              @for $i from 1 through 12 {
                .grid-col-#{$i} {
                  width: $grid-col-width * $i;
                }
              }

              // .grid-col-1 {
              //   width: 60px;
              // }
              // .grid-col-2 {
              //   width: 120px;
              // }
              // ...

Two forms of @for loops;
- @for $var from <start> through <end>
  Loop range includes start and end
- @for $var from <start> to <end>
  Loop range excludes end
$var can be any variable name
<start> and <end> can be an integer, or a variable storing one

Directives While Loops

Sass lets us
loop conditionally.


              $i: 1;

              @while $i <= 12 {
                .grid-col-#{$i} {
                  width: $grid-col-width * $i;
                }

                $i: $i + 1;
              }

              // .grid-col-1 {
              //   width: 60px;
              // }
              // .grid-col-2 {
              //   width: 120px;
              // }
              // ...

The @while directives take the form of:
- @while <comparison>
It will output styles until the comparison statement returns false
You must manually update the variable you're comparing against
The <comparison> variable will often be an integer that you increment, but it could be any data type that you modify as you go

Advanced Sass Demo

A little bit of list amazesauce for you.
via Roy Tomeij & Sass Conf 2013

Break Time!

Enjoy some snacks!
courtesy of

Part 2 Review

Mixins (@include)

Inheritance (@extend)

Math & Color

Functions

Conditionals

Loops

Questions?

Section V

Media Queries

Media Queries CSS3


                @media screen and (max-width: 500px) {
                  .sidebar {
                    float: none;
                    width: 100%;
                  }
                }

Media queries allow you to conditionally load styles based on things like page width, orientation, and even environmental lighting.

Responsive Web Design!

You nest declarations within media queries.

Media Queries Sass


                .sidebar {
                  float: left;
                  width: 35%;

                  @media screen and (max-width: 800px) {
                    width: 25%;
                  }

                  @media screen and (max-width: 500px) {
                    float: none;
                    width: 100%;

                    a { display: block; }
                  }
                }

In Sass, you can nest your media queries under any declaration.

OMG THIS IS SO AWESOME.

It becomes easy to see exactly how the module is morphing through breakpoints.

Media Queries Output

Media Queries "bubble up" beyond their containing declarations.

Sass


                .sidebar {
                  float: left;
                  width: 35%;

                  @media screen and (max-width: 800px) {
                    width: 25%;
                  }

                  @media screen and (max-width: 500px) {
                    float: none;
                    width: 100%;

                    a { display: block; }
                  }
                }

CSS Output


                .sidebar {
                  float: left;
                  width: 35%;
                }
                @media screen and (max-width: 800px) {
                  .sidebar {
                    width: 25%;
                  }
                }
                @media screen and (max-width: 500px) {
                  .sidebar {
                    float: none;
                    width: 100%;
                  }
                  .sidebar a { display: block; }
                }

Media Queries Variables

Sass


                $break-large: 800px;
                $break-small: 500px;

                .sidebar {
                  float: left;
                  width: 35%;

                  @media screen and (max-width: $break-large) {
                    width: 25%;
                  }

                  @media screen and (max-width: $break-small) {
                    float: none;
                    width: 100%;

                    a { display: block; }
                  }
                }

Breakpoints are often obscure numbers, and we repeat them all over the place.

Of course, we should make them variables!

Media Queries Variables II

Sass


                $mobile-med: "screen and (min-width: 480px)";
                $tablet-port: "screen and (min-width: 768px)";

                .sidebar {
                  float: left;
                  width: 35%;

                  @media #{$tablet-port} {
                    width: 25%;
                  }

                  @media #{$mobile-med} {
                    float: none;
                    width: 100%;

                    a { display: block; }
                  }
                }

Why not make the entire media query a variable?

We have to interpolate
#{} our variables so that Sass compiles them.

Media Queries @content


              @mixin respond-to($breakpoint) {
                @if $breakpoint == tablet-large {
                  @media only screen and (max-width: $width-large) {
                    @content;
                  }
                } @else if $breakpoint == mobile-large {
                  @media only screen and (max-width: $width-small) {
                    @content;
                  }
                }
              }

              .sidebar {
                width: 35%;
                @include respond-to(tablet-large) {
                  width: 25%;
                }
                @include respond-to(mobile-large) {
                  width: 100%;
                  a { display: block; }
                }
              }

The @content directive allows us to pass entire blocks of styles to a mixin, which then outputs that content back into the declaration that called the mixin.

WAT?

Media Query Gotchyas

Declarations created outside of a media
query cannot be @extended within it :(

Output can get rather lengthy :(

Media Query Output


                .sidebar {
                  float: left;
                  width: 35%;
                }

                @media only screen and (max-width: 760px) {
                  .sidebar {
                    width: 25%;
                  }
                }

                @media only screen and (max-width: 400px) {
                  .sidebar {
                    float: none;
                    width: 100%;
                  }
                  .sidebar a {
                    display: block;
                  }
                }

                .footer {
                  height: 100px;
                }

                @media only screen and (max-width: 760px) {
                  .footer {
                    height: 75px;
                  }
                }

                @media only screen and (max-width: 400px) {
                  .footer {
                    height: 50px;
                  }
                }

Sass doesn't group like media queries.

Sometimes it's best not to nest your media queries so granularly.

Keep an eye on your output!

Media Queries Let's develop it!

Turn this CSS Sass via the example methods below.
You get to decide the best way to organize and nest things.

CSS


                @media screen and (max-width: 480px) {
                  body     { text-align: center; }
                  .wrapper { width: 100%; }
                  .search  { margin-top: 1em; }

                  .header nav, .footer nav,
                  .footer .copy, .search {
                    float: none;
                  }

                  .kittens li,
                  .news, .events, .location {
                    float: none;
                    padding: 1em 0;
                    width: 100%;
                  }
                }

Sass


                @media screen and (max-width: $mobile-large) {
                  // ...
                }

                @media #{$tablet-small} {
                  // ...
                }

                @mixin respond-to($breakpoint) {
                  @if $breakpoint == desktop-large {
                    @media only screen and (max-width: $width-large) {
                      @content;
                    }
                  } @else if $breakpoint == mobile-large {
                    // ...
                  }
                }

Section VI

Modular Architecture

Modular Architecture Explained

Modular architecture is the abstraction of repetition into "objects".

Objects / Modules / Blocks
.header, .footer, .comment, .button, etc.
Parent - Child Relationships
.media, .media__img, .media__body, etc.
Modifiers & States
.btn--primary, .btn--small, .btn.is-selected, etc.

Modular Architecture Categorization

ALL THE CATEGORIZATION!!

Modular Architecture Methodology

Thinking in modules with various states.
.btn, .btn--primary, .btn--disabled
Classes VS. IDs VS. Child Selectors
Take that, specificity!
Naming Conventions
Semantic .content, .news__title, .callNow
Presentational .grid__col--9, .btn--small, .btn--primary

Modular Architecture Goals

Modularity
Added new page. Wrote 0 lines of CSS.
Scalability
I got 99 problems, but specificity ain't one.
Maintainability
Oh, you wanted a big button? .btn--large. BOOM.
DRY & Organized
That's just plain smart.

Modular Architecture Methodologies

OOCSS Nicole Sullivan
Object Oriented CSS
Structure vs. Skin | Container vs. Content
SMACSS Jonathan Snook
Scalable and Modular Architecture for CSS
Base > Layout > Module > State > Theme
Atomic Design Brad Frost
Atoms > Molecules > Organisms > Templates > Pages