SASS: WDI lightning talk - supplemental reader

sass-demo.md

SASS

Summary: SASS brings common programming ideas and applies them to CSS. This makes CSS much easier and quicker to work with, and allows you create CSS dynamically based off of variables.

Setup: The thing about Rails and SASS is that it's there by default! All you need to do is change the .css file to a .scss file. Easy peasy!

Setting variables:

Variables are defined with a $ sign and can be used across your CSS:

$color-one: #4bc9ab;
$color-two: complement($color-one);
$color-three: rgb(183, 24, 196);
$div-radius: 10px;
$text-size:  20px;

Mix-ins:

Mix-ins allow you to define code to be repeated and pass values through it:

@mixin btn($bgcolor, $radius, $padding){
  background-color: complement($bgcolor);
  padding: $padding ($padding * 2);
  border-radius: $radius;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border: none;
  color: white;

  &:hover {
    background-color: darken(complement($bgcolor), 10);
  }
}

And all you need to type to call that later is:

button {
  @include btn($color-one, 10px, 15px);
}

Functions

You can perform functions on colors and values:

  background-color: darken(complement(#006666), 30);

becomes:

  background-color: #330000;

Nesting

You can nest your CSS instead of defining each piece separately:

div {
  h1 {
    color: lighten(#ff6666, 20);
  }
  h2 {
    color: adjust-hue(#ff6666, 70deg);
  }
  a {
    color: mix(#ff6666, #807333);
    &:hover {
      color: fade_out( mix(#ff6666, #807333) , 0.7 );
    }
  }
  .grey {
    background-color: grayscale(#ff6666);
  }
}

becomes:

div h1 {
  color: #ffcccc;
}
div h2 {
  color: #e6ff66;
}
div a {
  color: #c06d4d;
}
div a:hover {
  color: rgba(192, 109, 77, 0.3);
}
div .grey {
  background-color: #b3b3b3;
}

(with each piece having the div defined)

Math:

Instead of defining each individual value, you can perform math on a base value and set realtionships:

$text-size: 20px;

.text-example {
  font-size: $text-size;
  .big {
    font-size: $text-size * 3;
  }
  .small {
    font-size: $text-size / 2;
  }
}

becomes:

.text-example {
  font-size: 20px;
}
.text-example .big {
  font-size: 60px;
}
.text-example .small {
  font-size: 10px;
}

Keeping it DRY:

All of this allows you to have much more DRY code:

.one {
  @include cool-div($color-one, $div-radius);
}
.two {
  @include cool-div($color-two, $div-radius);
}
.three {
  @include cool-div($color-three, $div-radius);
}

Can define three completely different styles.

Resources

• SASS Basics
• SASS live compiler
• The docs

Example index.html.erb file

<div class = "one">
  <h1>I'm full of SASS</h1>
  <h2>So dang SASSy</h2>
  <p>
    This is a paragraph in a p tag. <a href="http://sass-lang.com/guide">This is a link</a> And here is a span with a grey class: <span class="grey">s s s s s sassssssss.</span>
  </p>

  <div class = "text-example">
    <span class = "big">I am big.</span> <span class = "small">I am small.</span> I'm just normal.
  </div>

  <button>I'm a button!</button>
</div>

<div class = "two">
  <h1>I'm full of SASS</h1>
  <h2>So dang SASSy</h2>
  <p>
    This is a paragraph in a p tag. <a href="http://sass-lang.com/guide">This is a link</a> And here is a span with a grey class: <span class="grey">s s s s s sassssssss.</span>
  </p>

  <div class = "text-example">
    <span class = "big">I am big.</span> <span class = "small">I am small.</span> I'm just normal.
  </div>

  <button>I'm a button!</button>
</div>

Example index.scss file (@import this into application.scss)

// Sassypants

// variables
$color-one: #4bc9ab;
$color-two: complement($color-one);
$color-three: rgb(183, 24, 196);
$div-radius: 10px;
$text-size:  20px;


// button mixin
@mixin btn($bgcolor, $radius, $padding){
  background-color: complement($bgcolor);
  padding: $padding ($padding * 2);
  border-radius: $radius;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border: none;
  color: white;

  &:hover {
    background-color: darken(complement($bgcolor), 10);
  }
}

// crazy mixin
@mixin cool-div($color, $rad){
  color: $color;
  background-color: darken(complement($color), 30);
  margin: 10%;
  padding: 10px 20px 20px 20px;
  border-radius: $rad;

  // can nest CSS a la HTML
  h1 {
    color: lighten($color, 20);
  }
  h2 {
    color: adjust-hue($color, 70deg);
  }
  a {
    color: mix($color, $color-three);
    &:hover {
      color: fade_out( mix($color, $color-three) , 0.7 );
    }
  }
  .grey {
    background-color: grayscale($color);
  }

  button {
    @include btn($color, 10px, 15px);
  }
}


// classes using the mixin
.one {
  @include cool-div($color-one, $div-radius);
}
.two {
  @include cool-div($color-two, $div-radius);
}
.three {
  @include cool-div($color-three, $div-radius);
}

// title
.text-example {
  font-size: $text-size;
  .big {
    font-size: $text-size * 3;
  }
  .small {
    font-size: $text-size / 2;
  }
}