SASS

Вложенность

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

  li { display: inline-block; }

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

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

nav li {
  display: inline-block;
}

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

Еще немного вложенности

.navbar-inverse {
  min-height: 70px;

  .navbar {
    &__nav {
      padding: 25px 15px 0 0;

      li {
        margin-left: 12px;

        a {
          background: none;

          &:hover {
            border: 2px solid red;
          }
        }
      }
    }
  }
}

.navbar-inverse {
  min-height: 70px;
}

.navbar-inverse .navbar__nav {
  padding: 25px 15px 0 0;
}

.navbar-inverse .navbar__nav li {
  margin-left: 12px;
}

.navbar-inverse .navbar__nav li a {
  background: none;
}

.navbar-inverse .navbar__nav li a:hover {
  border: 2px solid red;
}

Импорт

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

_reset.scss

@import 'reset';

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

base.scss

Обратите внимание: файл называется _reset.scss, т.е. именно с символа "_" начинается. А подключается просто

'reset' файл. Символ "_" и расширение не указываются.

Пример из жизни

@import 'vendor/bootstrap';
@import 'vendor/bootstrap-sprockets';
@import 'vendor/bootstrap-mincer';
@import 'vendor/bootstrap-compass';
@import 'vendor/flex';

@import 'variables';
@import 'layout';
@import 'module';

entry.scss

Наследование

.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;
}

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

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

Наследованные свойства

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold;
}

.funky {
  font: 20px/24px fantasy {
    weight: bold;
  }
}

.funky {
  font: 20px/24px fantasy;
  font-weight: bold;
}

Переменные

$colorRed: #ff0000;

$mainColor: $colorRed;

main {
  background: $mainColor;
}

main {
  background: #ff0000;
}

$version: "1.2.3";

/* This CSS is generated by My Snazzy
 * Framework version #{$version}. */

/* This CSS is generated by My
 * Snazzy Framework version 1.2.3. */

Переменные (global)

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

Переменные в формате #{...}

p {
  font: 12px/30px;
}

Циклы

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

p {
  color: green;
}

@if

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

@if

Циклы

@each $animal in puma, sea-slug,
                 egret, salamander {
  .#{$animal}-icon {
    background-image:
      url('/images/#{$animal}.png');
  }
}

.puma-icon {
  background-image:
    url('/images/puma.png'); }
.sea-slug-icon {
  background-image:
    url('/images/sea-slug.png'); }
.egret-icon {
  background-image:
    url('/images/egret.png'); }
.salamander-icon {
  background-image:
    url('/images/salamander.png'); }

@each

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

@while

Jedi-style

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}

@include firefox-message(".header");

body.firefox .header:before {
  content: "Hi, Firefox users!";
}

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}

@media screen and
  (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px;
  }
}

#fake-links .link {
  @extend a;
}

a {
  color: blue;
  &:hover {
    text-decoration: underline;
  }
}

a, #fake-links .link {
  color: blue; }
  a:hover, #fake-links .link:hover {
    text-decoration: underline;
  }
}

.parent {
  ...
  @at-root .child { ... }
}

.parent { ... }
.child { ... }

@at-root