Препроцессоры - это надстройка над языком разметки CSS. Они облегчают работу написания стилей. Эти препроцессоры обладают всеми возможностями CSS(и можно в них писать исключительно CSS-код), но в добавок еще и своими.
Отличие SASS от SCSS
Они оба выполняют одни и те же действия, обладают одними и теми же "способностями". Отличие их только в одном - написание стилей. У SCSS - синтаксис строгий, а у SASS - свободный. К примеру, в SASS можно не писать фигурные скобки для разметки стилей, а в SCSS - это обязательно.
Возможность №1 - переменные
В SCSS повторяющиеся значения(например основной цвет на сайте или ширина view-port) можно занести в переменную, а затем в свойствах в качестве значения давать название этой переменной. И у свойств появится то значение, которое лежит в этой переменной.
Это удобно, например, тогда, когда нам нужно изменить какие-то свойства, и чтобы не лезть во все свойства и переписывать их, можно всего лишь один раз переопределить значение переменной, и у всех свойств, в которых в качестве значения стоит переменная - тоже переопределяться.
Возможность №2 - вложенные стили
Чтобы не повторять код и соблюдать четкий порядок в стилях, можно в определенном селекторе писать другие селекторы, которые будут являться дочерними по отношению к первому. То есть если есть блок, а в этом блоке - другие HTML-элементы, то определяя стили для этого блока в SCSS можно в этом же селекторе определить стили его детей.
Опять же это помогает держать порядок для удобной разработки. Найти в таких условиях определенный селектор - не составляет труда.
Возможность №3 - наследование
Если у нас есть определенный селектор со стилями, которые нам нужно скопировать и вставить в другой селектор, то можно сделать это всего лишь одной строчкой, через директиву @extend selector. Тогда второй селектор будет обладать всеми теми стилями, которые есть у первого. Также у второго селектора можно и переопределить наследованные стили первого, так как они имеют больший приоритет.
Это еще не все возможности, в следующей статье будет продолжение этой темы. Посмотреть предыдущую статью про единицы измерения в CSS.
Подписывайтесь на канал, чтобы не пропустить следующие статьи, а также предлагайте свои темы на выбор в группе ВКонтакте в описании канала.
