Sass:

Syntactically Awesome Style Sheets: Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass-lang.com

.sass

              #sidebar
  width: 30%
  background-color: #faa
            

.scss

              #sidebar {
  width: 30%;
  background-color: #faa;
}
                        

.scss

              $open-sans-stack: 'Open Sans', Arial, Helvetica, sans-serif;
$pink: #c69;

body {
  font-family: $open-sans-stack;
}

h2 {
  color: $pink;
}

.css output

            body {
  font-family: "Open Sans", sans-serif;
}

h2 {
  color: #c69;
}

.scss

              // variables.scss
$open-sans-stack: 'Open Sans', Arial, Helvetica, sans-serif;
$pink: #c69;

// theme.scss
$font--copy: $open-sans-stack;
$header--color: $pink;


// typography.scss
body {
  font-family: $open-sans-stack;
}

h2 {
  color: $header--color;
}

.css output

            body {
  font-family: "Open Sans", sans-serif;
}

h2 {
  color: #c69;
}

.scss

              .sidebar {
  float: left;

  h2 {
    font-size: 1.2em;
  }
}

.css output

              .sidebar {
  float: left;
}
.sidebar h2 {
  font-size: 1.2em;
}

.scss

              body {
  sidebar {
    .news-section {
      .description {
        a {
          color: #f00;
        }
      }
    }
  }
}

.css output

              body sidebar .news-section .description a {
  color: #f00;
}

.scss

              $blue: #00f;

.blue-link {
  color: $blue;

  &:hover,
  &:focus {
    color: mix($blue, white, 50%);
  }
}

.css output

              .blue-link {
  color: #00f;
}
.blue-link:hover, .blue-link:focus {
  color: #7f7fff;
}

.scss

              .kitten {
  background-image: url("../img/kitten.png");
}

.kitten-with-hat {
  @extend .kitten;

  &:after {
    content: " ";
    background-image: url("../img/hat.png");
  }
}

.css output

              .kitten, .kitten-with-hat {
  background-image: url("../img/kitten.png");
}

.kitten-with-hat:after {
  content: " ";
  background-image: url("../img/hat.png");
}

.kitten

.kitten-with-hat

.scss

              $pink: #c69;
$blue: #00f;

// I'm not real yet
%link {
  text-decoration: none;
  font-weight: 300;
}

.pink-link {
  @extend %link; //extending
  color: $pink;
}

.blue-link {
  @extend %link; //extending
  color: #00f;
}

.css output

              .pink-link, .blue-link {
  text-decoration: none;
  font-weight: 300;
}

.pink-link {
  color: #c69;
}

.blue-link {
  color: #00f;
}

Manifest File (main.scss)

              @import "vendors/bootstrap";
@import "vendors/jquery-ui";

@import "utils/variables";
@import "utils/functions";
@import "utils/mixins";
@import "utils/placeholders";

@import "base/reset";
@import "base/typography";

@import "layout/navigation";
@import "layout/grid";
@import "layout/header";
@import "layout/footer";
@import "layout/sidebar";
@import "layout/forms";

@import "components/buttons";
@import "components/carousel";
@import "components/cover";
@import "components/dropdown";

@import "pages/home";
@import "pages/contact";

@import "themes/theme";
@import "themes/admin";

.scss

              @mixin center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.nyan-cat {
  width: 450px;
  @include center-block;
}

.css output

              .nyan-cat {
  width: 450px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.scss

              $types: text #f00, photo #c69, video #c0ffee, link #bada55;

@each $type in $types {
     .post-type-#{nth($type, 1)} .post-icon{
        background: nth($type, 2);
    }
}

.css output

              .post-type-text .post-icon {
  background: #f00;
}

.post-type-photo .post-icon {
  background: #c69;
}

.post-type-video .post-icon {
  background: #c0ffee;
}

.post-type-link .post-icon {
  background: #bada55;
}

.scss

              $breakpoints: (
  small: 767px,
  medium: 992px,
  large: 1200px
);

.sidebar {
  width: 30%;

    @media (max-width: map-get($breakpoints, small)) {
      width: 100%;
    }
}

.css output

              .sidebar {
  width: 30%;
}
@media (max-width: 767px) {
  .sidebar {
    width: 100%;
  }
}

.scss

                @import 'compass';

$colors: (
  tomato rgb(255,99,71) 'rgb(255,99,71)',
  'cornflowerblue' rgb(100,149,237) 'rgb(100,149,237)',
  gold rgb(255,215,0) 'rgb(255,215,0)',
  hotpink rgb(255,105,180) 'rgb(255,105,180)',
);

@each $color in $colors {
  $var-name: nth($color, 1);
  $hex: nth($color, 2);
  $css-name: nth($color, 3);
  .color-box.#{$var-name} {
    @include contrasted($hex);
    &:before {
      content: '#{$var-name}';
    }
    &:after {
      content: '#{$css-name}';
    }
  }
}

              

.css output

                .color-box.tomato {
  background-color: tomato;
  color: #000;
}
.color-box.tomato:before {
  content: "tomato";
}
.color-box.tomato:after {
  content: "rgb(255,99,71)";
}

.color-box.cornflowerblue {
  background-color: cornflowerblue;
  color: #000;
}
.color-box.cornflowerblue:before {
  content: "cornflowerblue";
}
.color-box.cornflowerblue:after {
  content: "rgb(100,149,237)";
}

.color-box.gold {
  background-color: gold;
  color: #000;
}
.color-box.gold:before {
  content: "gold";
}
.color-box.gold:after {
  content: "rgb(255,215,0)";
}

.color-box.hotpink {
  background-color: hotpink;
  color: #000;
}
.color-box.hotpink:before {
  content: "hotpink";
}
.color-box.hotpink:after {
  content: "rgb(255,105,180)";
}

              

.scss

              $columns: 4;

@for $i from 1 through $columns {
  .cols-#{$i} {
    width: ((100 / $columns) * $i) * 1%;
  }
}

.css output

              .cols-1 {
  width: 25%;
}

.cols-2 {
  width: 50%;
}

.cols-3 {
  width: 75%;
}

.cols-4 {
  width: 100%;
}

.scss

              $columns: 4;

@for $i from 1 to $columns {
  .cols-#{$i} {
    width: ((100 / $columns) * $i) * 1%;
  }
}

.css output

              .cols-1 {
  width: 25%;
}

.cols-2 {
  width: 50%;
}

.cols-3 {
  width: 75%;
}

Calculation

• +
• -
• *
• /
• %

Comparison

• ==
• !=
• >
• <

.scss

              //mixin
@mixin smaller-than($width) {
  @media (max-width: $width) {
    @content;
  }
}

@mixin larger-than($width) {
  @media (min-width: $width) {
    @content;
  }
}

//usage
.heading {
  font-size: 2em;
  @include smaller-than(300px) {
    font-size: 1.5em;
  }
  @include larger-than(768px) {
    font-size: 3em;
  }
}

.css output

              .heading {
  font-size: 2em;
}
@media (max-width: 300px) {
  .heading {
    font-size: 1.5em;
  }
}
@media (min-width: 768px) {
  .heading {
    font-size: 3em;
  }
}

.scss

              //our map of breakpoints from earlier
$breakpoints: (
  small: 767px,
  medium: 992px,
  large: 1200px
);

//mixin using map-get
@mixin smaller-than($point-name) {

  $width: map-get($breakpoints, $point-name);
  @media (max-width: $width) {
    @content;
  }
}

@mixin larger-than($point-name) {

  $width: map-get($breakpoints, $point-name);
  @media (min-width: $width) {
    @content;
  }
}

//usage
.heading {
  font-size: 2em;
  @include smaller-than(small) {
    font-size: 1.5em;
  }
  @include larger-than(medium) {
    font-size: 3em;
  }
}

.css output

              .heading {
  font-size: 2em;
}
@media (max-width: 300px) {
  .heading {
    font-size: 1.5em;
  }
}
@media (min-width: 768px) {
  .heading {
    font-size: 3em;
  }
}

@warn

@error

@mixin

                // @mixin creation
@mixin my-padding-mixin($some-number) {
  padding: $some-number;
}

// Sass usage
.my-module {
  @include my-padding-mixin(10px);
}

// CSS output
.my-module {
  padding: 10px;
}

@function

                // @function creation
@function my-calculation-function($some-number, $another-number){
  @return $some-number + $another-number
}

// Sass usage
.my-module {
  padding: my-calculation-function(10px, 5px);
}

// CSS output
.my-module {
  padding: 15px;
}

variables.scss

              $__color-palette: (
  'blue': (
    core: #4178be,
    10: #c0e6ff,
    20: #7cc7ff,
    30: #5aaafa,
    40: #5596e6,
    50: #4178be,
    60: #325c80,
    70: #264a60,
    80: #1d3649,
    90: #152935,
    100: #010205
  ),
  'green': (
    core: #4b8400,
    10: #c8f08f,
    20: #b4e051,
    30: #8cd211,
    40: #6eb400,
    50: #4b8400,
    60: #2d660a,
    70: #144d14,
    80: #0a3c02,
    90: #0c2808,
    100: #010200
  ),
  'teal': (
    core: #008571,
    10: #a7fae6,
    20: #6eedd8,
    30: #41d6c3,
    40: #00b4a0,
    50: #008571,
    60: #006d5d,
    70: #005448,
    80: #003c32,
    90: #012b22,
    100: #000202
  ),
  'purple': (
    core: #9855d4,
    10: #eed2ff,
    20: #d7aaff,
    30: #ba8ff7,
    40: #af6ee8,
    50: #9855d4,
    60: #734098,
    70: #562f72,
    80: #412356,
    90: #311a41,
    100: #030103
  ),
  'magenta': (
    core: #db2780,
    10: #ffd2ff,
    20: #ff9eee,
    30: #ff71d4,
    40: #ff3ca0,
    50: #db2780,
    60: #a6266e,
    70: #7c1c58,
    80: #601146,
    90: #3a0b2e,
    100: #040102
  )
);

functions.scss

              // Import the IBM Color Palette
@import '../variables/colors';

//////////////////////////////
// Color Palette
//
// Gets the specified color from the color palette
//
// Usage:
//
// background: color('blue', 80); // #1D3649
// background: color('blue');     // #4178BE
//////////////////////////////
@function color($color, $tone: 'core') {
  // Add a little helper so tone can be passed as single digit number
  @if type-of($tone) == 'number' {
    @if $tone % 10 == $tone {
      $tone: $tone * 10;
    }
  }
  @return map-get(map-get($__color-palette, $color), $tone);
}