Прежде, чем Вы сможете использовать Sass, Вам необходимо его настроить в вашем проекте. Если Вы хотите просто почитать, то не стесняйтесь — читайте, но мы рекомендуем сначала установить Sass. Установите Sass для того, чтобы разобраться во всех возможностях Sass.

  • Препроцессинг

    Написание CSS само по себе весело, но когда таблица стилей становится огромной, то становится и сложно её обслуживать. И вот в таком случае нам поможет препроцессор. Sass позволяет использовать функции недоступные в самом CSS, например, переменные, вложенности, миксины, наследование и другие приятные вещи, возвращающие удобство написания CSS.

    Как только Вы начинаете пользоваться Sass, препроцессор обрабатывает ваш Sass-файл и сохраняет его как простой CSS-файл, который Вы сможете использовать на любом сайте.

    The most direct way to make this happen is in your terminal. Once Sass is installed, you can run sass input.scss output.css from your terminal. You can watch either individual files or entire directories. In addition, you can watch folders or directories with the --watch flag. An example of running Sass while watching an entire directory is the following:

    sass --watch app/sass:public/stylesheets
    

  • Переменные

    Думайте о переменных, как о способе хранения информации, которую вы хотите использовать на протяжении написания всех стилей проекта. Вы можете хранить в переменных цвета, стеки шрифтов или любые другие значения CSS, которые вы хотите использовать. Чтобы создать переменную в Sass нужно использовать символ $. Рассмотрим пример:

    Синтаксис Scss

    $font-stack:    Helvetica, sans-serif;
    $primary-color: #333;
    
    body {
      font: 100% $font-stack;
      color: $primary-color;
    }
    

    Синтаксис Sass

    $font-stack:    Helvetica, sans-serif
    $primary-color: #333
    
    body
      font: 100% $font-stack
      color: $primary-color
    
    

    Когда Sass обрабатывается, он принимает значения, заданные нами в $font-stack и $primary-color и вставляет их в обычном CSS-файле в тех местах, где мы указывали переменные как значения. Таким образом переменные становятся мощнейшей возможностью, например, при работе с фирменными цветами, используемыми на всем сайте.

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

  • Вложенности

    При написании HTML, Вы, наверное, заметили, что он имеет четкую вложенную и визуальную иерархию. С CSS это не так.

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

    Чтобы понять что мы имеем ввиду, приведем типичный пример стилей навигации на сайте:

    Синтаксис SCSS

    nav {
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
    
      li { display: inline-block; }
    
      a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
      }
    }
    

    Синтаксис 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? Это отличный способ сделать ваш CSS-файл более читабельным. Когда вы сгенерируете CSS-файл, то на выходе вы получите что-то вроде этого:

    nav ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    nav li {
      display: inline-block;
    }
    
    nav a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
    }
    

  • Фрагментирование

    Вы можете создавать фрагменты Sass-файла, которые будут содержать в себе небольшие отрывки CSS, которые можно будет использовать в других Sass-файлах. Это отличный способ сделать ваш CSS модульным, а также облегчить его обслуживание. Фрагмент — это простой Sass-файл, имя которого начинается с нижнего подчеркивания, например, _partial.scss. Нижнее подчеркивание в имени Sass-файла говорит компилятору о том, что это только фрагмент и он не должен компилироваться в CSS. Фрагменты Sass подключаются при помощи директивы @import.


  • Импорт

    CSS имеет возможность импорта, которая позволяет разделить ваш CSS-файл на более мелкие и облегчить их в обслуживании. Но у этого способа есть весомый недостаток: каждый раз когда вы в CSS используете @import, то в CSS создается еще один HTTP-запрос. Sass берет идею импорта файлов через директиву @import, но вместо создания отдельного HTTP-запроса Sass импортирует указанный в директиве файл в тот, где он вызывается, т.е. на выходе получается один CSS-файл, скомпилированный из нескольких фрагментов.

    Например, у вас есть несколько фрагментов Sass-файлов — _reset.scss и base.scss. И мы хотим импортировать _reset.scss в base.scss.

    Синтаксис Scss

    // _reset.scss
    
    html,
    body,
    ul,
    ol {
       margin: 0;
      padding: 0;
    }
    
    // base.scss
    
    @import 'reset';
    
    body {
      font: 100% Helvetica, sans-serif;
      background-color: #efefef;
    }
    

    Синтаксис Sass

    // _reset.sass
    
    html,
    body,
    ul,
    ol
      margin:  0
      padding: 0
    
    
    // base.sass
    
    @import reset
    
    body
      font: 100% Helvetica, sans-serif
      background-color: #efefef
    
    

    Обратите внимание на то, что мы используем @import 'reset'; в base.scss файле. Когда вы импортируете файл, то не нужно указывать расширение .scss. Sass — умный язык и он сам догадается. Когда CSS сгенерируется вы получите:

    html, body, ul, ol {
      margin: 0;
      padding: 0;
    }
    
    body {
      font: 100% Helvetica, sans-serif;
      background-color: #efefef;
    }
    

  • Миксины (примеси)

    Некоторые вещи в CSS весьма утомительно писать, особенно в CSS3, где плюс ко всему зачастую требуется использовать большое количество вендорных префиксов. Миксины позволяют создавать группы деклараций CSS, которые вам придется использовать по нескольку раз на сайте. Хорошо использовать миксины для вендорных префиксов. Пример для border-radius:

    Синтаксис Scss

    @mixin border-radius($radius) {
      -webkit-border-radius: $radius;
         -moz-border-radius: $radius;
          -ms-border-radius: $radius;
              border-radius: $radius;
    }
    
    .box { @include border-radius(10px); }
    

    Синтаксис Sass

    =border-radius($radius)
      -webkit-border-radius: $radius
      -moz-border-radius:    $radius
      -ms-border-radius:     $radius
      border-radius:         $radius
    
    .box
      +border-radius(10px)
    

    Для создания миксина используйте директиву @mixin + название этого миксина. Мы назвали наш миксин border-radius. Также, в миксине мы используем переменную $radius внутри скобок, тем самым позволяя себе передавать в переменной все, что захотим. После того, как вы создали миксин, вы можете его использовать в качестве параметра CSS, начиная вызов с @include и имени миксина. Когда ваш CSS скомпилируется вы получите следующее:

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

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

    Это одна из самых полезных функций Sass. Используя директиву @extend можно наследовать наборы свойств CSS от одного селектора другому. Это позволяет держать ваш Sass-файл в «чистоте». В нашем примере мы покажем вам как сделать стили оповещений об ошибках, предупреждениях и удачных исходов.

    Синтаксис Scss

    .message {
      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

    .message
      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
    
    

    Вышеуказанный код позволяет взять свойства CSS из .message и применить их в .success, .error и .warning. Во время компиляции CSS-файла работает магия, которая поможет вам избежать написания лишних классов в HTML элементах. Результат выглядит вот так:

    .message, .success, .error, .warning {
      border: 1px solid #cccccc;
      padding: 10px;
      color: #333;
    }
    
    .success {
      border-color: green;
    }
    
    .error {
      border-color: red;
    }
    
    .warning {
      border-color: yellow;
    }
    

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

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

    Синтаксис Scss

    .container { width: 100%; }
    
    
    article[role="main"] {
      float: left;
      width: 600px / 960px * 100%;
    }
    
    aside[role="complementary"] {
      float: right;
      width: 300px / 960px * 100%;
    }
    

    Синтаксис Sass

    .container
      width: 100%
    
    article[role="main"]
      float: left
      width: 600px / 960px * 100%
    
    
    aside[role="complementary"]
      float: right
      width: 300px / 960px * 100%
    
    

    Мы создали простую адаптивную модульную сетку, с шириной в 960 пикселей. Используя математические операторы, мы использовали полученные данные с пиксельными значениями и конвертировали их в процентные, причем без особых усилий. Скомпилированный CSS выглядит так:

    .container {
      width: 100%;
    }
    
    article[role="main"] {
      float: left;
      width: 62.5%;
    }
    
    aside[role="complementary"] {
      float: right;
      width: 31.25%;
    }