Sass

Что это?

Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода и упрощения файлов каскадных таблиц стилей. Язык Sass имеет два синтаксиса: sass — отличается отсутствием фигурных скобок, в нём вложенные элементы реализованы с помощью отступов, scss — использует фигурные скобки, как и css.

Для чего нужно это знать?

Sass – это препроцессорный язык, базирующийся на скриптах языка CSS. Используется данный язык для того, чтобы взаимодействовать со стилями. Цель применения: упростить и структурировать код, а также сделать программирования более удобным. Вышеописанный препроцессор обладает рядом преимуществ, например: возможность работать с любыми параметрами, построение таблиц и сетей, создание и взаимодействие с вложенными селекторами, верстка сайтов осуществляется с применением дополнительных констант и примесей СSS, возможность использования различных заготовок для упрощения кода, отличное сочетание с различными системами автоматизации, большое количество дополнительных библиотек, комфортное взаимодействие с вложенными спектрами. Отличие Sass от Scss Отличие вышеуказанных препроцессоров заключается в наличии фигурных скобках, а именно: препроцессор Sass использует такой синтаксис, где фигурные скобки были заменены простыми пробелами для реализации вложения составляющих элементов. SCSS – напротив, использует синтаксис языка CSS. Стоит отметить, что пробелы в Sass основываются на логических значениях и обозначаются “вложенный сектор”. Ещё одним отличием является замена таких знаков как: “!” и “=” на “$” и ”:”.В целом, SCSS является обновленной версией Sass с максимальным приближением синтаксиса препроцессора к языку CSS.

Какие базовые понятия включает этот навык?

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