Compiling Sass to CSS

To run once:

compass compile
            

To have compass monitor changes in your partials

compass watch
            

Nesting and Inheritance

ul.list {
  margin-top: 1em;

  li {
    list-style-type: none;

    &:nth-child(even) {
      margin-bottom: 1em;
    }

    .svg & {
      list-style-type: url(image.svg);
    }
  }
}
              

ul.list {
  margin-top: 1em;
}

ul.list li {
  list-style-type: none;
}

ul.list li:nth-child(even) {
  margin-bottom: 1em;
}

.svg ul.list li {
  list-style-type: url(image.svg);
}
              

Commenting

/**
 * Standard CSS commenting.
 * This will display
 */


// Sass inline commenting.
// This won't display.

.redness {
  color: $red; // We make this red so it is red.
}
              

/**
 * Standard CSS commenting, will display
 */

.redness {
  color: #FF0000;
}

              

Variables

$green: #66B360;
$verdana: Verdana, Tahoma, "DejaVu Sans", sans-serif;
$legacy-support-for-ie8: true;
$base-size: 16px;
$base-line-height: 1em;
              

h1 {
  font-size: $base-size * 2;
}
h4 {
  font-size: $base-size + 4px;
}
              

h1 {
  font-size: 32px;
}
h4 {
  font-size: 20px;
}
              

Functions

Functions are just like PHP, they return a value of some kind.

@function pixel-to-em($pixel, $font-size: 16px) {
  @return $pixel / $font-size * 1em;
}

.testin {
  font-size: pixel-to-em(25px, 20px);
}
            

I have never once needed a function

Mixins

Mixins are similar to functions, except they return blocks of CSS

@mixin button-make($color: #66B360) {
  @include border-radius(5px);
  background-color: $color;
  border: 2px solid lighten($color, 20%);
}

.button-one {
  @include button-make;
}

.button-two {
  @include button-make($color-facebook);
}
            

Extendables

.duru {
  font-family: 'duru-sans', 'sans-serif';
}

#page-title {
  @extend .duru;
  font-size: 2em;
}
              

.duru, #page-title {
  font-family: duru-sans, sans-serif;
}

#page-title {
  font-size: 2em;
}
              

Partials

Partials allow you to better organize files by having many small files each with their own section of code.

By default, Compass will only compile files that do NOT begin with an underscore, therefore all partials files that should not be compiled individually will have an underscore in front of it.

By having an "@import 'file_name'; " in your Sass file "file_name.scss" (or "_file_name.scss") into your stylesheet, and include it in a single file.

The Corona distribution of Aurora contains the partial structure we will be using going forward

What is Susy?

Susy is a simple, easy way to create a fluid grid layout for your site.

You set the number of columns you want, their width, and the gutters inbetween... then susy will handle everything else for you.

Variables

$total-columns          : 12;
$column-width           : 4em;
$gutter-width           : 1em;
$grid-padding           : $gutter-width;

$show-grid-backgrounds  : false;
              

Basic usage

#main {
  @include container;
  @include susy-grid-background;

  #left {
    @include span-columns(7);
  }

  #right {
    @include span-columns(5 omega);
  }
}
            

Basic usage CSS

#main {
  max-width: 59em;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1em;
  padding-right: 1em;
}

#main #left {
  width: 57.62712%;
  float: left;
  margin-right: 1.69492%;
}

#main #right {
  width: 40.67797%;
  float: right;
  margin-right: 0;
}
            

Media queries done right

Breakpoint writes all your media queries for you, simply and easily.

Respond-to is a wrapper for breakpoint. Allowing you to have a single variables that defines all of your media queries.

Variables

$breakpoints: 'small' 450px,
              'medium' 700px,
              'medium only' (700px 899px),
              'large' 900px;
            

Writin' MQs like a BOSS

#content {

  @include span-columns(12);
  background-color: yellow;

  @include respond-to('small') {
    @include span-columns(10);
    background-color: purple;
  }

  @include respond-to('medium only') {
    background-color: salmon;
  }
}
            

Media Query Magic

#content {
  width: 100%;
  float: left;
  margin-right: 1.69492%;
  background-color: yellow;
}
@media (min-width: 450px) {
  #content {
    width: 83.05085%;
    float: left;
    margin-right: 1.69492%;
  }
}
@media (min-width: 700px) and (max-width: 899px) {
  #content {
    background-color: salmon;
  }
}
            

github.com/ChinggizKhan/Corona

Corona is just a sub-theme distribution that will start your theme building with an awesome Sass partial structure.

The bulk of every Aurora sub-theme (from the compass extension) is the same. The only difference is the partial structure.

Using a Aurora / Corona Sub-theme

compass create THEME_NAME -r aurora --using aurora/corona

compass create THEME_NAME -r aurora --using aurora/corona --sass-dir "sass" --css-dir "css" --javascripts-dir "js" --images-dir "img"

Partial Structure

style.scss
maintenance.scss
print.scss
partials
 |--> base
 |     |--> _base.scss
 |     |--> _functions.scss
 |     |--> _mixins.scss
 |     |--> _variables.scss
 |--> global
 |     |--> _global.scss
 |     |--> _extendables.scss
 |     |--> _defaults.scss
 |     |--> _type.scss
 |     |--> _forms.scss
 |--> design
       |--> _design.scss
       |--> EVERYTHING ELSE!!!
            

Partial Structure

Base and Global already have within it a variables and files to start you off, but nothing too complex. Design is completely empty and just waiting for you to start designing.