Theme Sassification

Become a Sasskicker Overnight

Rona Kilmer

@rkunboxed

Slides: ronakilmer.com/wordcamp-oc/

What's the Plan?

  • Sass Intro
  • Getting Started
  • Magic
  • More Magic

What is Sass?

Syntactically Awesome Stylesheets
lovely but

Why?

"We’re building ever-bigger and more complex websites... we need to take the next step in making what we build more manageable and maintainable."
- Chris Coyier (css-tricks.com)
Specifically
  • Styles are easier to maintain.
  • You can separate files without taking a performance hit.
  • Sass helps you avoid CSS bloat. Quit repeating yourself!
  • Your teammates will thank you.

Installation (requires ruby)

Command Line

gem install sass

CodeKit

CodeKit Screenshot

Project Setup

Command Line

sass --watch input.scss:output.css

CodeKit

  • Drag in project folder
  • Set output path in Sass language settings

SASS or SCSS syntax?

Twenty Fourteen CSS

twenty fourteen table of contents
If your stylesheet needs a table of contents, it's time to look at Sass.

Folder Setup w/Partials

SCSS/
   styles.scss //input file
   _reset.scss
   _repeatable-patterns.scss
   _basic-structure.scss
   _header.scss
   _navigation.scss
   _content.scss
   _sidebar.scss
   _footer.scss
   _featured-content.scss
   _multisite.scss
   _media-queries.scss
   _print.scss

CSS/
   styles.css //output file

Main styles.scss Setup

@import "reset";
@import "repeatable-patterns";
@import "basic-structure";
@import "header";
@import "navigation";
@import "content";
@import "sidebar";
@import "footer";
@import "featured-content";
@import "multisite";
@import "media-queries";
@import "print";
sass --watch scss/styles.scss:css/styles.css

Comment Styles

// This comment will not be in the CSS.

/* This comment will show up in the CSS. */

Meet Your New Best Friends

  • nesting

  • variables

  • @extend

  • math

  • mixins

  • functions

Nesting

SCSS

.my-module {

   a {...}
   
   .title {...}
}

CSS

.my-module a {...}

.my-module .title {...}

Check the CSS Output

.wrapper .inner-wrapper .my-module ul li a {...}

sassmeister

Parent Selectors (ampersand for the win!)

SCSS

.my-module {
   a {
      color: #000099;

      &:hover {
         color: #FF0000;
      }
   }
}

CSS

.my-module a {
   color: #000099;
}

.my-module a:hover {
   color: #FF0000;
}

Parent Selectors

SCSS

.my-module {
   color: #000099;

   &.warning {
      color: #FF0000;
   }
}

CSS

.my-module {
   color: #000099;
}

.my-module.warning {
   color: #FF0000;
}

Parent Selectors

SCSS

.my-module {
   line-height: 1.4;

   .ie8 & {
      line-height: 1.3;
   }
}

CSS

.my-module {
   line-height: 1.4;
}

.ie8 .my-module {
   line-height: 1.3;
}

Variables

SCSS

$color-alert: #FF0000;

.my-module {
   a {
      color: $color-alert;
   }
}

CSS

.my-module a {
   color: #FF0000;
}

Extending Classes

SCSS

.my-module {
   border: 1px solid gray;
   color: black;
   padding: 10px;
}

.my-module2 {
   @extend .my-module;
   background-color: white;
   float: left;
}

CSS

.my-module,
.my-module2 {
   border: 1px solid gray;
   color: black;
   padding: 10px;
}

.my-module2 {
   background-color: white;
   float: left;
}

Extending Placeholders

SCSS

%box {
   background-color: #FFF;
   border: 1px solid #CCC;
   padding: 20px;
}

.box-error {
   @extend %box;
   font-size: 1.8em;
}

.box-warning {
   @extend %box;
   font-size: 1.5em;
}

CSS

.box-error,
.box-warning {
   background-color: #FFF;
   border: 1px solid #CCC;
   padding: 20px;
}

.box-error {
   font-size: 1.8em;
}

.box-warning {
   font-size: 1.5em;
}

Maths!

SCSS

$gutter: 20px;
	
.my-module {
   margin-bottom: $gutter * 2;
}

CSS

.my-module {
   margin-bottom: 40px;
}

Mixins

@mixin module-style {
   background-color: $grey;
   border: 1px solid $grey-dark;
   color: $dark-text;
   padding: 20px;
}
.my-module {
   @include module-style;
   width: 100%;
}
.my-module2 {
   @include module-style;
   width: 50%;
}

Mixin Result

.my-module {
   background-color: #ccc;
   border: 1px solid #444;
   color: #000;
   padding: 20px;
   width: 100%;
}
.my-module2 {
   background-color: #ccc;
   border: 1px solid #444;
   color: #000;
   padding: 20px;
   width: 50%;
}
Watch that repetition! Consider extending a class or placeholder here instead.

Mixins w/Arguments (it's where it's at)

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

.my-module {
   @include border-radius(3px);
}

Mixin Result

.my-module {
   -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
           border-radius: 3px;
}

Mixins w/Default Args

@mixin border-radius($radius: 4px) {
   -webkit-border-radius: $radius;
   -moz-border-radius: $radius;
   border-radius: $radius;
}

.my-module {
   @include border-radius;
}

Mixin Result

.my-module {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

Media Query Mixin

$medium: 760px;
$large: 1024px;

@mixin breakpoint($bp) {
   @media (min-width: $bp)  { @content; }
}

.my-module {
   width: 100%;

   @include breakpoint($medium) {
      width: 50%;
   }

   @include breakpoint($large) {
      width: 25%;
   }
}

Mixin Result

.my-module {
   width: 100%;
}

@media (min-width: 760px) {
   .my-module {
      width: 50%;
   }
}

@media (min-width: 1024px) {
   .my-module {
      width: 25%;
   }
}

Media Query Mixin+

$medium: 760px;
$large: 1024px;

@mixin breakpoint($bp, $mm: min) {
   @media (#{$mm}-width: $bp)  { @content; }
}

.my-module {
   width: 100%;

   @include breakpoint($medium, max) {
      width: 50%;
   }

   @include breakpoint($large, max) {
      width: 25%;
   }
}

Mixin Result

.my-module {
   width: 100%;
}

@media (max-width: 760px) {
   .my-module {
      width: 50%;
   }
}

@media (max-width: 1024px) {
   .my-module {
      width: 25%;
   }
}

Functions

  • rgba($color, $alpha)
  • lighten($color, $amount)
  • darken($color, $amount)
  • grayscale($color)
  • complement($color)
  • round($number)

Custom Function (hey look, more math)

@function percent-calc($el, $container) {
   @return ($el / $container) * 100%;
}

.my-module {
   width: percent-calc(650px, 1000px);
}

Result

.my-module {
   width: 65%;
}

Resources

Thank You!
Slides: ronakilmer.com/wordcamp-oc/

@rkunboxed