1 of 23

SCSS. Организация файлов

Павел Радкевич

2 of 23

Повестка дня

Препроцессоры CSS
Node.JS. NPM. Установка и запуск Sass
Синтаксис SCSS, переменные, приёмы работы
Модули. Структура файлов

3 of 23

Препроцессоры CSS

Программы, которые позволяют генерировать CSS из кода, написанного в специальном синтаксисе.

Сокращают время на написание стилей, упрощают поддержку, позволяют применять специальные подходы.

Самые популярные препроцессоры — Sass, LESS, PostCSS, Stylus.

Важно: препроцессоры не расширяют возможности CSS, а только позволяют писать тот же код более удобным образом.

4 of 23

Что дают препроцессоры CSS

вложенность — упрощает описание селекторов
переменные — позволяют обобщать значения свойств, повышают читаемость кода
примеси (миксины) — сокращают форму записи общих свойств
интерполяция и функции — позволяют внедрять приёмы из программирования в написание кода

5 of 23

Установка Sass

Самый универсальный способ работать с Sass — использовать утилиту (компилятор) в командной строке.

Один из самых популярных методов установки этой утилиты — с помощью NodeJS / npm.

Порядок:

установить Node.JS (https://nodejs.org/)
установить Sass с помощью npm
перейти в нужный каталог и запускать Sass в командной строке

6 of 23

Node.js

Серверная реализация Javascript

Огромное количество инструментов

Основной — NPM (Node package manager)

7 of 23

NPM

Менеджер пакетов для node.js (де-факто — для любой разработки на Javascript).

Пакет — модульный компонент программного обеспечения, поставляемый отдельно с целью переиспользования.

Пакетные менеджеры используются для установки/обновления/удаления пакетов из удалённых репозиториев.

8 of 23

Sass — пакет npm

Команда установки:

npm install --global sass

Можно сократить:

npm i -g sass

--global — флаг глобальной установки (одна копия компилятора на всю систему)

9 of 23

Запуск Sass из командной строки

Разовый запуск:

sass input.scss output.css

Запуск с мониторингом (пересобирает CSS всякий раз, когда сохраняется SCSS):

sass --watch <folder-with-scss>:<folder-with-css>

10 of 23

sass и scss

Препроцессор Sass поддерживает два синтаксиса: sass и scss.

Оригинальный синтаксис sass основан на системе отступов.

Появившийся позже синтаксис scss выглядит практически как «чистый» css. Кроме того, он полностью совместим с css: любой код на css можно вставить в файл scss, и он будет работать.

В примерах используется синтаксис scss.

11 of 23

Синтаксис scss: вложенность

Sass позволяет вкладывать селекторы и сложные свойства:

12 of 23

Синтаксис scss: селектор родителя

Вместо имени родительского селектора можно использовать знак & (в том числе в качестве суффикса в названии класса).

13 of 23

Пример

https://jsfiddle.net/3fy62n5d/11/

14 of 23

Переменные

Любому значению CSS можно дать понятное читаемое имя, а потом использовать его во всём коде. Синтаксис:

$somevar: value;

15 of 23

Плейсхолдеры

Кусочки кода, которые без изменений используются много раз в разных селекторах.

16 of 23

Примеси (миксины)

Кусочки кода, которые используются много раз с небольшими изменениями. Могут принимать параметры.

17 of 23

Импорт

@use “filename.css“;

включает файл стилей filename.css в текущий файл

18 of 23

Компонентный подход

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

Исходный код удобно делить на несколько файлов (по имени компонента), а в случае сложных проектов — на папки, в каждой из которых лежит всё, что касается компонента.

Проекты с использованием sass позволяют легко организовать подобную файловую структуру и собирать все файлы scss в единственный css.

19 of 23

Структура каталогов и имена файлов

scss

core (общие правила: переменные, миксины, _reset.scss)

_core.scss
...

blocks (основные компоненты всех страниц сайта)
pages (специфичные стили для отдельных страниц)
...
main.scss

20 of 23

Пример структуры каталогов / файлов

https://github.com/AdukarIT/_Tasks_/tree/master/scss

21 of 23

Шаблон 7-1

Один из самых популярных подходов к структурированию больших проектов — шаблон 7-1: семь папок + один корневой файл.