Tools

So what do we need to get SASSy?

• Text editor
• Local Compass instance (Ruby)

We use...

• jRuby
• gem install of Compass
• A homegrown IntelliJ plugin

Other options:

• Scout, Compass.app
  • easier to setup, but less configurable
• Command line install of Ruby and Compass
  • seriously easy

Workflow: Local dev environment

Nesting

#navbar {
  width: 80%;
  height: 23px;

  ul { list-style-type: none; }
  li {
    float: left;
    a { font-weight: bold; }
  }
}

Outputs To:

#navbar {
  width: 80%;
  height: 23px; }
  #navbar ul {
    list-style-type: none; }
  #navbar li {
    float: left; }
    #navbar li a {
      font-weight: bold; }
                        

Nesting 201

Pseudo classes and the Almighty Ampersand

a {
  color: #ce4dd6;
  &:hover { color: #ffb3ff; }
  &:visited { color: #c458cb; }
}						

Outputs To:

a {
  color: #ce4dd6; }
  a:hover {
    color: #ffb3ff; }
  a:visited {
    color: #c458cb; }

Nesting: Things to Note

Nesting tags within each other translates to a SPACE (descendant selector).

#siteContainer{
  .block{}
}

/* Outputs to... */ 
#siteContainer .block{}

Nesting: &:pseudo or &.class

Using the ampersand in FRONT removes the space.

#siteContainer{
  &.block{}
  &:hover{}
}

/* Outputs to... */ 
#siteContainer.block{}
#siteContainer:hover{}

Nesting: .class &

Using the ampersand BEHIND specifies a parent selector.

#siteContainer{
  color: red;
  .blue &{
    color: blue;
  }
}

/* Outputs to... */
#siteContainer{ color: red; }
.blue #siteContainer{ color: blue; }

Variables

Variables are used to store/reuse commonly used pieces of information

$green: #8fc357;

#siteNavContainer{
  background-color: $green;
}

Variable Math

You can do addition, subtraction, multiplication and division on variables.

$margin: 16px;

.border {
  padding: $margin / 2;
  margin: $margin + 5px;
}

Variable Output/Interpolation

This standard output format will work in most cases:

color: $green; 

But what if you want to use the variable as part of the property name?

/* doesn't work */
border-$direction: 1px solid $green;

/* does work */
border-{$direction}: 1px solid $green;

@import - CSS Includes

Allows you to include smaller stylesheets inside larger ones.

@import "partials/filename"

Fun with Partials

@import "partials/filename"

• The files you include are called 'partials'
  • Partials usually begin with an underscore, e.g., _base.scss
  • The underscore tells SASS not to compile them to their own stylesheets
• You can import libraries (like Compass) or your own partials
• Partials are awesome because they allow to you to split up large files into small pieces and then recombine later

Color Manipulation

$green: #128c7f;
$light-green: lighten($green, 20%);
$dark-green: darken($green, 20%);

Other Color Methods

• saturate
• desaturate
• grayscale
• invert
• opacify
• transparentize
• rbga

Browser Prefix Management

Old way:

.rounded-corner{
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -khtml-border-radius: 4px;
  border-radius: 4px; 
}

.rounded-corner{ 
  @include border-radius(4px); 
}

Other Browser Prefix Helpers

• translate
• rotate
• box-sizing
• linear-gradient
• radial-gradient
• column-count
• opacity
• transition

Sprites

Compass gives you tools to generate sprites automagically.

@import "my-icons/*.png";

Sprite Basic Steps

@import "my-icons/*.png";
.actions {
  .new    { @include my-icons-sprite(new);    }
  .edit   { @include my-icons-sprite(edit);   }
}

Sprite Benefits

• You don't have to keep track of where the image is in the sprite... you can call it by name
• You can get dimensions/position from mixins

  $width: my-icons-sprite-width(new);

• Code is more human-readable

Sprite Drawbacks

• Sprite order is inconsistent (alpha vs. by file size)
  • Unusable for retina versions
• Assumes sprites will be on your local filesystem (vs. Interwoven)
• No compression
• If you update and forget to commit an image file, builds will fail

Sprite Verdict

• Good for original generation
• Not so good for upkeep
• One option... use Compass to generate original sprite, then take generated CSS moving forward

Full Compass sprite documentation

Mixins 201:

Rolling Your Own Mixin

@mixin green-me(){
  background-color: #9f9;
  border: 2px solid #096;
}

p{
  @include green-me;
}

Passing Arguments to Mixins

You can define arguments to be passed into your mixin to change the output.

@mixin green-me($border-style: solid){
  background-color: #9f9;
  border: 2px $border-style #096;
}

p{
  @include green-me($border-style: dashed);
}

Using Logic in Mixins

You can use basic control structures (if/else, for loops) in mixins.

@mixin color-me($color: blue, $border-style: solid){
  @if $color == blue{
    background-color: #b2deed;
    border: 2px $border-style #008bb4;
  }@else if $color == green{
    background-color: #9f9;
    border: 2px $border-style #096;
  }
}

p{
  @include color-me($color: green, $border-style: dashed);
}

When to Use a Mixin vs. a Partial

• In general, mixins should be used for shorter chunks of code
• Partials should be used when there's larger chunks
• The more mixins you add, the longer it takes to compile
• The more partials you have, the more confusing your file structure

Balance it out somewhere in the middle.

Specific problems we solved with SASS for Parents.com

• Grid layout for responsive design
• Creating responsive & non-responsive versions of stylesheets
• Reducing upkeep on image.css and secureimage.css
• Built a reusable style library using mixins
• Browser prefix management enabled us to use cool CSS3 features with more confidence

Creating responsive & non-responsive versions of stylesheets

We used imports of partials with media queries.

// ---- core-responsive.scss ---
/* mobile layout */
@media screen and (max-width: 653px){
  @import "partials/narrow/core";
}
/* tablet portrait */
@media screen and (min-width: 654px){
  @import "partials/normal/core";
}
/*  Widescreen layout */
@media screen and (min-width: 990px){
  @import "partials/wide/core";
}  

// ---- core.scss ---
@import "partials/narrow/core";
@import "partials/normal/core";
@import "partials/wide/core";

Identical image.css and secureimage.css

Same trick, with additional variables

// ---- image.scss ----
$secure: false;
@import "partials/image";

// ---- secureimage.scss ----
$secure: true;
@import "partials/image";

// ---- partials/image.scss ----
$image_path: "http://images.meredith.com/parents/";
$secure_image_path: "https://secure.parents.com/parents/";
@if $secure{
  $image_path: $secure_image_path;    
}

#header{
  background: url("#{$image_path}image.png";
}

Example Code: Output

                        
/* ---- image.css ---- */
#header{ 
  background: url("http://images.meredith.com/image.png"; 
}

/* ---- secureimage.css ---- */
#header{ 
  background: url("https://secure.parents.com/image.png"; 
}

Built a reusable mixin library

a.more{ 
  @include block-more-link;
}

ul{
  @include pink-bullets;
}

.blogModule{
  @include content-box;
}

.up{
  @include triangle($direction: up, $size: 10px);
}