Использование препроцессора Sass

Установка Sass

Скачиваем подходящую версию Sass и устанавливаем её.

При установке консольной версии препроцессинг будет происходить при запуске команды:

$ sass style.scss style.css

Основные принципы Sass

Использование переменных

При написании проекта может возникнуть необходимость переиспользования значений каких-либо правил. Для этого используются переменные. Имя переменной задается с помощью знака $.

$main-color: #000;
$contrast-color: #eee;

body {
  background: $contrast-color;
  color: $main-color;
}
.invert {
  background: $main-color;
  color: $contrast-color;
}

В результате получим код:

body {
  background: #eee;
  color: #000;
}

.invert {
  background: #000;
  color: #eee;
}

Вложенные селекторы

Если необходимо использовать сложную систему селекторов, описывающую состояние вложенности элементов друг в друга, то можно использовать вложенность Sass.

body {
  background: #f00;
  #wrapper {
    width: 800px;
    p {
      color: #000;
    }
  }
}

В результате получим CSS:

body {
  background: #f00;
}
body #wrapper {
  width: 800px;
}
body #wrapper p {
  color: #000;
}

Не следует злоупотреблять вложенностью, т.к. это ухудшает читаемость исходного файла.

Импорт файлов

При необходимсоти вы можете импортировать один файл в другой практически так же, как это делается в CSS @import

// theme.scss
body { color: #000; background: #fff; }


// style.scss
@import 'theme';
body { font-family: sans-serif; }

Результирующий код будет:

body { color: #000; background: #fff; }
body { font-family: sans-serif; }

Использование примесей

Чтобы избежать необходимости писать повторяющиеся участки кода можно воспрользоваться примесями (миксинами). Директива @mixin добавляет саму примесь, а директива @include позволяет использовать код этой примеси.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

В результате препроцессинга получим:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

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

С помощью директивы @extend можно CSS-правила одного объекта использовать для другого:

.user {
  width: 50px;
  height: 50px;
}
.offline {
  @extend .user;
  background: #DDD;
}
.online {
  @extend .user;
  background: #DFD;
}

Итоговый CSS будет:

.user, .offline, .online {
  width: 50px;
  height: 50px;
}
.offline {
  background: #DDD;
}
.online {
  background: #DFD;
}

Математические операции

Sass позволяет производить простые математические операции со свойствами типа "размер", оперируя различными единицами измерения:

$colunms: 12;

.col-1 {
  float: left;
  width: 1 / $colunms * 100%;
}
.col-2 {
  float: left;
  width: 2 / $colunms * 100%;
}
.col-3 {
  float: left;
  width: 3 / $colunms * 100%;
}

Код после препроцессинга:

.col-1 {
  float: left;
  width: 8.33333333%;
}
.col-2 {
  float: left;
  width: 16.66666667%;
}
.col-3 {
  float: left;
  width: 25%;
}