SASS

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

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

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

@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

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

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

Переменные (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;
}

Циклы

@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

#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