Table of Contents

• Variables
• Nesting
• Partials
• Modules
• Mixins
• Extend/Inheritance
• Operators

Variables

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

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

Nesting

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

turns into

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

Partials

They contain little snippets of CSS that you can include in other Sass files. A partial is 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.

Modules

Mixins

More like functions

@mixin transform($property) {
- webkit-transform: $property;
- ms-transform: $property;
transform: $property;
}

.box { @include transform(rotate(30deg)); }

turns into

.box {
- webkit-transform: rotate(30deg);
- ms-transform: rotate(30deg);
transform: rotate(30deg);
}

Extend/Inheritance

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

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

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

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

Operators

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

turns into

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