Sass & Less

Sass и Less используют обычный синтаксис CSS. Благодаря этому, конвертирование обычной таблицы стилей в стили для препроцессора является простейшей задачей. Sass использует расширение файла .scss, а Less — .less

Синтаксис

* style.scss or style.less */

h1 {
  color: #0982C1;
}

Варианты синтаксис Stylus’е намного разнообразнее. Stylus использует одно расширение файла — .styl, при этом он позволяет в одном файле использовать сразу несколько вариантов синтаксиса, таких как стандартный CSS-синтаксис и синтаксис, в котором фигурные скобки, двоеточия и точки с запятой необязательны

Stylus

h1 {
  color: #0982C1;
}
 
/* уберём фигурные скобки */
h1
  color: #0982C1;
 
/* уберём двоеточия и точки с запятой */
h1
color #0982C1

Sass

Переменные в Sass начинаются с символа $ и объявляются точно так же, как и CSS-свойства.

Переменные

$mainColor: #0982c1;
$siteWidth: 1024px;
$borderStyle: dotted;
 
body {
  color: $mainColor;
  border: 1px $borderStyle $mainColor;
  max-width: $siteWidth;
}

Less

Less-переменные — такие же, как Sass-переменные. Единственное отличие — в Less они начинаются с символа @.

@mainColor: #0982c1;
@siteWidth: 1024px;
@borderStyle: dotted;
 
body {
  color: @mainColor;
  border: 1px @borderStyle @mainColor;
  max-width: @siteWidth;
}

Stylus

В Stylus имена переменных могут быть какими угодно, нет никаких ограничений или требований по вставке определенного символа перед именем переменной. После объявления переменной точка с запятой не требуется, зато вместо двоеточия обязательно ставится знак =.

mainColor = #0982c1
siteWidth = 1024px
$borderStyle = dotted
 
body
  color mainColor
  border 1px $borderStyle mainColor
  max-width siteWidth

Sass, Less и Stylus

Все три препроцессора имеют одинаковый синтаксис для вложения селекторов.

Построение каскада

section {
  margin: 10px;
 
  nav {
    height: 25px;
 
    a {
      color: #0982C1;
   
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

Ниже представлен скомпилированный CSS, полученный из предыдущего куска кода.

section {
  margin: 10px;
}
section nav {
  height: 25px;
}
section nav a {
  color: #0982C1;
}
section nav a:hover {
  text-decoration: underline;
}

Миксины — это функции, позволяющие многократно использовать набор CSS-свойств во всей таблице стилей. Вместо того, чтобы писать один и тот же код несколько раз, мы можем написать его один раз в миксине и затем использовать. Это может быть полезно для стилизации определенных элементов и для автоматической расстановки вендорных префиксов. Когда миксин включен в какой-либо селектор, препроцессор считывает аргументы (если они есть) и подставляет код, который написан в исходном миксине.

Миксины (mixins)

/* Sass-миксин error с необязательным аргументом $border-width,
   который по умолчанию равен двум пикселям
*/

@mixin error($borderWidth: 2px) {
  border: $borderWidth solid #F00;
  color: #F00;
}
 
.generic-error {
  padding: 20px;
  margin: 4px;
  @include error(); /* Подставляются стили из миксина */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  @include error(5px); /* Подставляются стили из миксина, $borderWidth равен 5px */
}

Sass

/* Less-миксин error с необязательным аргументом @border-width,
   который по умолчанию равен двум пикселям
*/

.error(@borderWidth: 2px) {
  border: @borderWidth solid #F00;
  color: #F00;
}
 
.generic-error {
  padding: 20px;
  margin: 4px;
  .error(); /* Подставляются стили из миксина */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  .error(5px); /* Подставляются стили из миксина, $borderWidth равен 5px */
}

Less

/* Stylus-миксин error с необязательным аргументом @border-width,
   который по умолчанию равен двум пикселям
*/

error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}
 
.generic-error {
  padding: 20px;
  margin: 4px;
  error(); /* Подставляются стили из миксина */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  error(5px); /* Подставляются стили из миксина, $borderWidth равен 5px */
}

Stylus

.generic-error {
  padding: 20px;
  margin: 4px;
  border: 2px solid #f00;
  color: #f00;
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  border: 5px solid #f00;
  color: #f00;
}

Все препроцессоры в результате компиляции выдадут следующий код:

Наследование — это способность селекторов использовать свойства из другого селектора.

Когда мы пишем на чистом CSS, мы используем следующий код для присваивания определённого набора свойств нескольким элементам:

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

p, ul, ol {
  /* здесь свойства */
}

Этот способ работает хорошо, но если нам нужно будет стилизовать отдельный элемент, придётся создавать ещё один селектор. Мы легко можем избежать этой проблемы с помощью препроцессоров и использования наследования.

.block {
  margin: 10px 5px;
  padding: 2px;
}
 
p {
  @extend .block; /* Наследуем свойства из '.block' */
  border: 1px solid #EEE;
}
ul, ol {
  @extend .block; /* Наследуем свойства из '.block' */
  color: #333;
  text-transform: uppercase;
}

Sass и Stylus

.block {
  margin: 10px 5px;
  padding: 2px;
}
 
p {
  .block; /* Inherit styles from '.block' */
  border: 1px solid #EEE;
}
ul, ol {
  .block; /* Inherit styles from '.block' */
  color: #333;
  text-transform: uppercase;
}

Less

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

.block, p, ul, ol {
  margin: 10px 5px;
  padding: 2px;
}
p {
  border: 1px solid #EEE;
}
ul, ol {
  color: #333;
  text-transform: uppercase;
}

Скомпилированный CSS (Sass и Stylus):

.block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  margin: 10px 5px;
  padding: 2px;
  border: 1px solid #EEE;
}
ul,
ol {
  margin: 10px 5px;
  padding: 2px;
  color: #333;
  text-transform: uppercase;
}

Скомпилированный CSS (Less):

Импортирование нескольких файлов штатными средствами CSS не одобряется сообществом, так как такой способ приводит к созданию большого количества HTTP-запросов. Импорт файлов средствами препроцессора работает несколько иначе. Если вы импортируете файл стилей препроцессора, то он будет импортирован во время компиляции, и на выходе вы получите все стили в одном CSS-файле. Если же вы импортируете обычный CSS-файл, то при компиляции в таблицу стилей будет вставлена CSS-директива @import "file.css";

Импортирование

Sass, Less и Stylus

/* file.{scss/less/styl} */
body {
  background: #EEE;
}

@import "reset.css";
@import "file.{type}";
 
p {
  background: #0982C1;
}

@import "reset.css";
body {
  background: #EEE;
}
p {
  background: #0982C1;
}

Скомпилированный CSS

Функции для работы с цветом — это встроенные в препроцессор функции, позволяющие манипулировать цветами. Эти функции могут быть полезны для создания градиентов, более тёмных или светлых цветов при hover’e и так далее.

Функции для работы с цветом

lighten($color, 10%) // возвращает цвет на 10% светлее, чем $color
darken($color, 10%)  // возвращает цвет на 10% темнее, чем $color
 
saturate($color, 10%)   // возвращает цвет на 10% насыщеннее, чем $color
desaturate($color, 10%) // возвращает цвет на 10% менее насыщенный, чем $color
 
grayscale($color)  // возвращает чёрно-белый вариант $color
complement($color) // возвращает комплементарный цвет к $color
invert($color)    // возвращает инвертированный $color

mix($color1, $color2, 50%) // смешивает $color1 с $color2

Sass

Полный список функций доступен в документации.

Пример:

$color: #0982C1;
 
h1 {
  background: $color;
  border: 3px solid darken($color, 50%);
}

lighten(@color, 10%); /* возвращает цвет на 10% светлее, чем @color */
darken(@color, 10%);  /* возвращает цвет на 10% темнее, чем @color */
 
saturate(@color, 10%);   /* возвращает цвет на 10% насыщеннее, чем @color */
desaturate(@color, 10%); /* возвращает цвет на 10% менее насыщенный, чем @color */
 
spin(@color, 10);  /* возвращает цвет на 10 градусов больше в hue, чем @color */
spin(@color, -10); /* возвращает цвет на 10 градусов меньше в hue, чем @color */
 
mix(@color1, @color2); /* смешивает @color1 с @color2 */

Less

Полный список функций доступен в документации.

Пример:

@color: #0982C1;
 
h1 {
  background: @color;
  border: 3px solid darken(@color, 50%);
}

lighten(color, 10%); /* возвращает цвет на 10% светлее, чем 'color' */
darken(color, 10%);  /* возвращает цвет на 10% темнее, чем 'color' */
 
saturate(color, 10%);   /* возвращает цвет на 10% насыщеннее, чем 'color' */
desaturate(color, 10%); /* возвращает цвет на 10% менее насыщенный, чем 'color' */

Stylus

Полный список функций доступен в документации.

Пример:

color = #0982C1
 
h1
  background color
border 3px solid darken(color, 50%)

Использование вычислений в CSS — очень полезная возможность, которую весьма просто использовать.

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

body {
  margin: (14px/2);
  top: 50px + 100px;
  right: 100px - 50px;
  left: 10 * 10;
}

$siteWidth: 1024px;
$gutterWidth: 20px;
$sidebarWidth: 300px;
 
body {
  margin: 0 auto;
  width: $siteWidth;
}
.content {
  float: left;
  width: $siteWidth - ($sidebarWidth+$gutterWidth);
}
.sidebar {
  float: left;
  margin-left: $gutterWidth;
  width: $sidebarWidth;
}

Sass

@siteWidth: 1024px;
@gutterWidth: 20px;
@sidebarWidth: 300px;
 
body {
  margin: 0 auto;
  width: @siteWidth;
}
.content {
  float: left;
  width: @siteWidth - (@sidebarWidth+@gutterWidth);
}
.sidebar {
  float: left;
  margin-left: @gutterWidth;
  width: @sidebarWidth;
}

Less

siteWidth = 1024px;
gutterWidth = 20px;
sidebarWidth = 300px;
 
body {
  margin: 0 auto;
  width: siteWidth;
}
.content {
  float: left;
  width: siteWidth - (sidebarWidth+gutterWidth);
}
.sidebar {
  float: left;
  margin-left: gutterWidth;
  width: sidebarWidth;
}

Stylus

body {
  margin: 0 auto;
  width: 1024px;
}
.content {
  float: left;
  width: 704px;
}
.sidebar {
  float: left;
  margin-left: 20px;
  width: 300px;
}

Скомпилированный CSS