В этой записи пойдет речь о том, как начать пользоваться Sass/Scss.Прежде чем вы начнете читать эту статью, я подразумеваю, что у вас уже установлен Sass/Scss. Если у вас его нет, то вы можете прочитать эту запись «Подробная установка Sass/Scss». В ней описан весь процесс установки препроцессора.

Если вы читаете эту запись, значить вы должны быть знакомы с CSS. В противном случае, вам не будет понятно о чем идет речь.

В чем разница между Sass и Scss

Она очень маленькая. Чтобы вам сразу стало понятно, я приведу ниже два примера.

Sass

body
  font: 100% Verdana, Tahoma, sans-serif
  color: black

Scss

body {
  font: 100% Verdana, Tahoma, sans-serif;
  color: black;
}

Как вы уже могли заметить, разница лишь в {} и ;. В Sass фигурные скобки и точка с запятой не ставятся. В случае с Scss это происходит наоборот.

Вы наверное хотите спросить: «А что лучше использовать»? Я предпочитаю Scss, так как фигурные скобки обозначают четкую границу стиля, то есть максимально точно показывается где стиль начинается и где заканчивается. А точка с запятой говорит о том, что строка закончена. Я лично привык больше к Scss, но вы можете выбрать все что захотите.

Переменные

Переменные являются огромным плюсом Sass. Например, если вы хотите использовать один цвет в нескольких классах или id, но вам не хочется второй раз возвращаться во все три места где вы его добавили, то в данной ситуации Sass поможет. С помощью него вы можете изменить цвет в одном месте и он автоматически измениться везде где эта переменная прописана.

Название переменной начинается со знака $ и заканчивается : и далее пишется значение (например: $font-color: #000) Чтобы было понятней, я предлагаю посмотреть на пример ниже.

Пример

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

div.simple-class {
  color: $primary-color;
}

Как видно из примера, я создал две переменные — $font-stack и $primary-color. Первая включает в себя название шрифта и тип (без засечек), а в вторая цвет.

$primary-color используется для body и div.simple-class. И если я надумаю изменить цвет с #eee на #000, мне это нужно будет сделать только в одном месте.

Написание кода

Наверное вы знаете, чтоб в HTML, вы пишите код в отступами, чтобы код был более читабельным. В Sass все в точности одно и тоже.

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

  li { display: inline-block; }

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

Из примера выше, вы можете заметить, что ul, li и a внутри nav элемента. Чтобы обозначить принадлежность элементов друг к другу, вы можете выписывать элементы внутри друг друга. После компиляции примера выше, у вас получит такой код:

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

nav li {
  display: inline-block;
}

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

Import

В CSS есть замечательная функция import. Она позволяет подключать дополнительные стили из другого файла. Разделения двух стилей обычно делается для того, чтобы разделить разные компоненты.

Минут обычного import в CSS в том, что он создает отдельный HTTP запрос на каждый import. В случае с Sass, это происходит иначе. Он берет все файлы, которые были прописаны с import и совмещает их в один файл. Тем самым убирая дополнительные HTTP запросы, чтобы является более удобным и быстрым.

Sass пример

@import 'reset';

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

Кстати говоря, для @import не нужно прописывать .scss, так как по умолчанию будет искаться именно такой разрешение файла. И да, reset.scss включает в себя следующее:

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

Sass после компиляции

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

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

Как видим, оба файла совместились.

Mixin

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

Например, если вы часто используете border-radius (закгругление краев), то чтобы сделать корректное отображение во всех браузерах, вам нужно прописать следующее:

-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
      -ms-border-radius: 10px;
              border-radius: 10px;

Чтобы не писать эти четыре строчки для каждого элемента в CSS стилях — мы будем использовать Mixing из примера ниже.

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

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

Чтобы создать mixing, вам нужно прописать @mixin и дальше имя, в этом примере я написал border-radius. Далее аргумент $radius. И в конце прописываем все кроссбраузерные свойства border-radius и используем значение из аргумента $radius.

А чтобы приписать mixin для стиля, вам нужно использовать @include и далее имя mixin и аргумент. Кстати аргумент не обязательно создавать, если у вы просто хотите добавить статические стили для элемента.

Из примера выше класс .box примет все стили mixin border-radius с аргументов 10px. Другими словами, у .box теперь будут закругленные края в 10px.

После компиляции пример выше будет выглядеть следующим образом:

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

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

Еще одно из самых важных плюсов Sass — это наследование/присвоение. Например вы хотите создать элемент оповещения и у вас есть основной .alert класс, который включает в себя размер текста, отступы, а так же многое другое. И далее вы хотите добавить разные цвета для оповещений. И чтобы вам не прописывать основные стили из .alert лишний раз, вы можете воспользоваться @extend функцией, которая свяжет все стили воедино, тем самым убрав лишнюю работу.

Вот один из примеров, который показывает использование функции @extend:

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

После компиляции Sass, CSS файл будет выглядеть следующим образом:

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

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

Как вы уже могли заметить, @extend был прописан для трех классов — .success, .error и .warning и после компиляции Sass он связал все три класса вместе с alert, который является основным и самым важным стилем для отображения оповещений.

Операторы

Использование математических действий в CSS — это круто. Sass предоставляет следующие математические операторы +, -, *, / и %. В примере ниже, я сделаю простой математический подсчет ширины aside и article.

.container { width: 100%; }


article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}

Sass так же позволяет конвертировать пиксели в проценты. После компиляции SCSS будет выглядеть следующим образом:

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}