Where its being used?

At this point you can find the good stuff here:

• styles.scss
• boostrap files
• bootstrap customizations

How its making managing our styles easier, cleaner, and more standardized

Not by design, it helps us with:

• helping modularlize our css
• Imports serve as a table of contents
• Inforcing standards and exhisting patterns with variables and mixins

How to install the preprocessor locally

Installing Sass

Installing Node

installing on your dev box may be trickier learn more here

installing Grunt

Sweet, its installed.. what now

Defining Variables

Stytax

what can be saved

any string!

.#{$main-color}-header{
    background-color: $main-color;
}

// compiles
.red-header {
    background-color: red; 
}

Operations and Functions

The standard math operations (+, -, *, /, and %) are supported for numbers, even those with units. For colors, there are all sorts of useful functions for changing the lightness, hue, saturation, and more.

Example

// Operations and Functions
$box-total-width: 500px;
$box-padding: 15px;
.box {
    padding: $box-padding;
    width: $box-total-width - $box-padding*2;
    background-color: lighten($black, 10%);
}
// compiles
.box {
  padding: 15px;
  width: 470px;
  background-color: #1a1a1a; }

Nesting, and the dangers of it

what is nesting?

Sass avoids repetition by nesting selectors within one another. The same thing works with properties.

Example

// Nesting example
$white: #fff;
$warning: #fe0000; // yellow
$error: #fe0000; //red
$info: #1fb1db; // blue
$alert-text-color: darken($white, 5%);
$alert-padding: 5px;

.alert {
    padding: $alert-padding;
    color: $alert-text-color;
    .warning {
        background-color: $warning;
    }
    .error {
        background-color: $error;
    }
    .info {
        background-color: $info;
    }
    &.strong {
        font-weight: bold;
    }
}

Example

// compiles

.alert, .new-alerts {
  padding: 5px;
  color: #f2f2f2; }
  .alert .warning, .new-alerts .warning {
    background-color: #fe0000; }
  .alert .error, .new-alerts .error {
    background-color: #fe0000; }
  .alert .info, .new-alerts .info {
    background-color: #1fb1db; }
  .alert.strong, .strong.new-alerts {
    font-weight: bold; }

Too much nesting?!?

We try to avoid nesting more than 4 layers deep, as it can become unruley

Imports & Nesting

You can import any scss document into a selector to namspace this widget

.naviance {
    @import alerts; 
}
// will import an alerts widget, and only call if if they alerts are within a .naviance class

Writing a mixin, and using it

mixins are a essentially functions for your css

@mixin alert-style($color){
    background-color: lighten($color, 30%);
    border: darken($color, 30%;)
    color: $color;
}
.alert {
    padding: $alert-padding;
    color: $alert-text-color;
    .warning {
        @include alert-style($warning);
    }
    .error {
        @include alert-style($error);
    }
    .info {
        @include alert-style($info);
    }
    &.strong {
        font-weight: bold;
    }
}

example

// compiles 

.alert, .new-alerts {
  padding: 5px;
  color: #f2f2f2; }
  .alert .warning, .new-alerts .warning {
    background-color: #ff9898;
    border: #650000;
    color: #fe0000; }
  .alert .error, .new-alerts .error {
    background-color: #ff9898;
    border: #650000;
    color: #fe0000; }
  .alert .info, .new-alerts .info {
    background-color: #a1e0f2;
    border: #0c4555;
    color: #1fb1db; }
  .alert.strong, .strong.new-alerts {
    font-weight: bold; }