CSS Preprocessors

Advantages of using CSS Preprocessors

• Speed
• Organization ( Can use different files for different screen widths )
• Modification ( Small changes that cascade through entire style sheets )
• Minification 
• Errors

The 3 languages which can be used for Preprocessing

1. Less
2. Stylus
3. Saas

Dry vs Wet

    Wet : Write everything twice

   Dry: No duplication

Features of Sass

Partials & imports

A partial is simply a Sass file named with a leading underscore. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file

The  drawback of using an @import is CSS is that  it creates another HTTP request. Sass builds on top of the current CSS @import but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you're importing into so you can serve a single CSS file to the web browser.

partial saas

// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

Notice we're using @import 'reset'; in the base.scss file

// base.scss

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

The css generated from import

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Variables

Variables is a way to store information that we want to reuse throughout our stylesheet. Sass uses the $ symbol for a variable

Saas file

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Generated CSS file

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Nesting 

Sass will let us nest our CSS selectors in a way that follows the same visual hierarchy of your HTML.
You'll notice that the ul, li, and a selectors are nested inside the nav selector

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Generated Css file

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Mixins

A mixin lets us make groups of CSS declarations that you want to reuse throughout your site. We can even pass in values to make your mixin more flexible

To create a mixin we use the @mixin directive and give it a name.After we create our mixin, we can then use it as a CSS declaration starting with @include followed by the name of the mixin

Note: we are also using a variable for radius.

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

.box { @include border-radius(10px); }

Generated CSS

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Extend or inheritance

This is one of the most useful features of Sass. Using @extend lets us share a set of CSS properties from one selector to another. It helps keep our Sass very DRY

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

The magic happens with the generated CSS, and this helps us avoid having to write multiple class names on HTML elements. This is what it looks like:

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

Math Operations

Doing math in our CSS is very helpful. Sass has a handful of standard math operators like +, -, *, /, and %. In our example we're going to do some simple math to calculate widths for an aside & article.

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

We've created a very simple fluid grid, based on 960px. Operations in Sass let us do something like take pixel values and convert them to percentages without much hassle. The generated CSS will look like:

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

Control Directive

Sass control directives provide flow and logic and give you a finite level of decision making required by mixins and functions. In this guide, we will be covering: @if, @for, @each and @while.


Here's a fairly simple example of an @if control directive. I've simplified this example to be more readable, rather than usable.

// Set a variable to run the if statement against
$boolean: true !default

=simple-mixin
  @if $boolean
    @debug "$boolean is #{$boolean}"
    display: block
  @else
    @debug "$boolean is #{$boolean}"
    display: none

.some-selector
  +simple-mixin

Emitted CSS

.some-selector {
  display: block;
}