Шпаргалка по SASS (SCSS) на русском языке

Здесь я читаю перевод документации SASS, копирую примеры и просто пытаюсь запомнить основные команды. В посте две ссылки на русский переводид и оригинал.

sass-scss.ru
FunctionsIndex (F) » Sass » Script » Functions (frames)

Вложенные правила¶

In [ ]:

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

In [ ]:

#компилируется в такой код CSS:

#main p {
  color: #00ff00;
  width: 97%; }
#main p .redbox {
    background-color: #ff0000;
    color: #000000; }

Ссылка на родителя селектора (& - похоже на this. )¶

In [ ]:

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

In [ ]:

#компилируется в:
a {
  font-weight: bold;
  text-decoration: none; }
a:hover {
    text-decoration: underline; }
body.firefox a {
    font-weight: normal; }

...если у вас есть глубоко вложенное правило, родительский селектор будет полностью вычислен до символа & и подставится вместо него. Символ & должен быть указан в начале составного селектора, также он может содержать последующий суффикс:

In [ ]:

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

In [ ]:

#компилируется в:
#main {
  color: black; }
#main-sidebar {
    border: 1px solid; }

Вложенные свойства. Пространство имен (добавление префикса font-)¶

In [ ]:

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

In [ ]:

#компилируется в:
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

In [ ]:

####Шаблонные селекторы

In [ ]:

%inline-type {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  margin-right: -4px;
  vertical-align: top;
}

%for-grids {
    min-height: 1px;
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
}

.sgrid-N {
    @extend %for-grids;
}

In [ ]:

#компилируется в:
.sgrid-N {
  min-height: 1px;
  position: relative;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 20px; }

Комментирование¶

In [ ]:

/* Это многострочный комментарий.
 * Так как этот тип комментирования
 * поддерживается в CSS, то он
 * попадет в скомпилированный CSS-файл. */

In [ ]:

// Это однострочный комментарий.
// CSS не поддерживает данный вариант комментирования.

Интерактивная оболочка¶

In [ ]:

sass -i

Интерполяция¶

Вы также можете использовать переменные SassScript в селекторах и в названиях свойств используя синтаксис #{} интерполяции:

In [ ]:

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

In [ ]:

#компилируется в
p.foo {
  border-color: blue; }

In [ ]:

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

In [ ]:

#компилируется в
p {
  font: 12px/30px; }

Посты чуть ниже также могут вас заинтересовать