Wordyblend logo

SASS для начинающих: вложенные стили, фрагменты, импорт

Frontend разработка

В этом уроке мы рассмотрим одни из наиболее полезных и мощных функций SASS: вложение стилей, фрагментирование и импорт.

Предыдущий урок: SASS переменные

01. Вложенные стили SASS

Вложенные стили SASS — это еще одна отличная функция, которая позволяет писать CSS правила и вкладывать их друг в друга. Вложение позволяет писать CSS в той же структуре, что и HTML, создавая визуальную иерархию в селекторах.

Например, вот обычный CSS код:

nav a {
    text-decoration: none;
}

А с помощью SASS можно создавать нечто подобное:

nav {
    a{
        text-decoration: none;
    } 
}

Давайте добавим немного HTML, чтобы увидеть вложенные стили в действии.

Следудующий код представляет собой навигацию, находящуюся внутри “шапки сайта”:

<header>
   <nav>
      <a href="#">HTML</a>
      <a href="#">CSS</a>
      <a href="#">SASS</a>
      <a href="#">LESS</a>
   </nav>
</header>

Вы видите, что наши ссылки расположены в header, внутри nav. Этот код имеет очевидную визуальную иерархию. Давайте зададим стили для всех HTML элементов используя SASS.

Обратите внимание на правила, вложенные в другие правила:

nav {
    height: 40px;
    a {
        display: inline-block;
        color: #666;
        text-decoration: none;
        padding: 0 20px;
    }
}

А вот как выглядел бы тот же код на нативном CSS:

nav {
    height: 40px; 
}
  
nav a {
    display: inline-block;
    color: #666;
    text-decoration: none;
    padding: 0 20px; 
}

Вложение — это отличный способ организации и менеджмента вашего CSS кода.

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

Вот пример плохого использования вложенных стилей:

body {
  header {
    .container {
        .row {
            .left {
                .logo {
                    img {

                        }
                    }
                }
            }
        }
    }
}

Потому что то же самое можно сделать с помощью следующего короткого правила:

header {
    .logo {
        img {

        }
    }
}

02. SASS фрагментирование — Разделение таблиц стилей

SASS фрагменты позволяют отделать небольшие части кода в отдельные файлы и использовать их позже при необходимости. Их можно импортировать с помощью команды @import и поместить в файл со стилями. С помощью фрагментов проще управлять большим количеством стилей. Если у вас есть отдельные таблицы стилей для header, вы можете назвать их _header.scss. Нижнее подчеркивание в начале дает SASS понять, что файл является фрагментом и может быть импортирован в другую таблицу стилей.

SASS фрагменты — пример

В этот раз мы отделим SASS и CSS файлы в разные папки. Давайте создадим папку sass. Внутри папки sass создайте файл style.scss, который будет нашим основным файлом со стилями. Не нужно создавать папку CSS, так как SASS автоматически создаст ее сам.

Компиляция SASS в SCSS просходит следующим образом: откройте командную строку (возможно, понадобится открыть командную строку ruby) и вбейте:

sass --watch sass:css

Эта команда компилирует все внутри папки SASS в CSS папку. Вы возможно заметили, что папка CSS создалась автоматически. CSS папка содержит два файла: style.css и style.css.map.

Теперь создаим новые папки внутри папки SASS: папки header, main и footer.

  1. Внутри папки header создайте фрагмент _header.scss;
  2. В папке main 2 фрагмента _main.scss и _aside.scss;
  3. В папке footer один фрагмент _footer.scss.

Давайте напишем рандомные CSS правила во все фрагмент-файлы. Если вы сейчас сохранитесь, то ничего не изменится, потому что мы еще не подключили фрагменты к нашей гланой таблице стилей style.scss.

Использование SASS фрагментов

Ранее упоминалось, что для подключения SASS фрагментов используется директива @import. В нашем случае style.scss должен выглядеть примерно так:

// Header
@import "header/header.scss";

// Main
@import "main/main.scss";
@import "main/aside.scss";

// Footer
@import "footer/footer.scss";

Если вы откроете style.css после сохранения всех CSS правил, которые вы записывали в разных файлах, то увидите, что все эти правила компилированы в один CSS код. Это и есть магия SASS фрагментирования.

03. SASS импортирование

Функция импортирования в SASS позволяет нам импортировать CSS, написанный на SASS, в другой SASS файл.

Эта функция также доступна в CSS и позволяет делить CSS код на маленькие части и использовать их при необходимости.

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

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

Мы уже использовали SASS импорт в предыдущей части урока. Мы испортировали header/_header.scss в нашу таблицу стилей style.scss:

@import "header/header.scss";

Здесь нет нижнего подчеркивания, да? Это потому что мы используем подчеркивание для того, чтобы проинформировать SASS. Нет необходимости также писать расширение в конце. SASS и так уже знает, что мы импортируем только .scss файлы. В таком случае синтаксис импорта должен выглядеть вот так:

@import "header/header";

Эта функция очень полезна для быстрого и простого кодинга. Мы можем использовать один файл в нескольких проектах. Если он вдруг понадобился, просто возьмите файл и импортируйте.

Предыдущий урок: Миксины, Наследование и SASS Операторы