Вложенные правила языка SASS

Sass позволяет правилам css, быть вложенными друг в друга. Внутреннее правило применяется только в пределах внешнего селектора правила. По другому тут никак не перевести, фраза умная, на деле же все проще, просто посмотрите пример:

Это помогает избегать повторения родительского селектора, и помогает гораздо проще воспринимать группу css слоев с большим количеством вложенных селекторов. Например:

Ссылка на родитель селекторов (&)

Не понятно почему разработчики sass-а так это назвали. Вообще, если по простому, то это можно назвать ссылкой на самого себя. Если я не ошибаюсь, то в less-ой документации это так и называется (напомню, less многие вещи брал из sass-а, данную конструкцию он тоже позаимствовал). Многие наверно зададутся вопросом, а для чего это нужно? Начнем с того, что без данной конструкции невозможно бы было реализовать ни один псевдокласс. Или другой пример, нам нужно предусмотреть другие стили элемента в зависимости от того какой класс имеет body html документа. Покажу на примере из официальной документации.

Я думаю с псевдоклассами все понятно. Давайте поподробнее рассмотрим строчку body.firefox &. Что здесь происходит? Если ссылка на самого себя появляется за каким-то элементом (тут может быть как одиночный html элемент, так и класс, id-ик, абсолютно не важно), то это говорит компилятору что такое его расположение отменяет стандартную вложенность элементов. Компилятор выбьет такой элемент из стандартного потока. Если посмотреть на пример выше, то может сложиться ощущение, что будет скомпилирована css-ка в которой будет a body.firefox a, но нет. Ссылка на самого себя идет за элементом с классом, поэтому компилятор сгенерит body.firefox a (стандартная вложенность элементов отменена). Это достаточно фундаментальная вещь, и это нужно понимать. Новички которые только-только перешли на какой-нибудь препроцессор не совсем понимают как работает ссылка на самого себя, и частенько пишут код который не работает. Это просто нужно запомнить.

В примере выше видно, что ссылка на самого себя &:hover вложена в #main и вложена в a, она стоит отдельно, перед ней нет никаких элементов, поэтому срабатывает стандартная вложенность и компилятор сгенерит #main a:hover.

В разные времена мир преживал технические революции. Это происходило скачками. Грубо говоря бронза, и бац, наступил железный век. Сейчас мы не знаем кто изобрел колесо или плуг, но в то время эти открытия носили революционный характер и изменили жизнь как отдельных людей, так и всего человечества. В жизни веба, если взять конкретнее, то в жизни верстальщиков, были три нововведения которые изменили их жизнь, притом изменили ее кардинально. Первое это конечно же каскадные таблицы стилей, но это было на заре веба. Второе это jquery, теперь путешествие по DOM модели стало простым и удобным, плюс разные эффекты. И третье, это уже более современное время, это БЭМ. Согласитесь круто написать что-то один раз, а потом без проблем использовать это на разных проектах. Следующая конструкция языка sass поможет вам в этом.

Я брал пример из документации. В реальной жизни согласно БЭМ это будет не id-ик #main а .main, но суть от этого не изменится. Приведу простой пример. Посмотрите на него, попробуйте увеличить количество товаров, удалить их. Я этот проект делал достаточно давно. Но сами скрипты, сама верстка корзины у меня не меняется от проекта к проекту. Скрипты у меня настроены таким образом, что есть папка "js-concat", любые скрипты которые туда попадут будут сгенерированы в один большой js-ик (у меня он называется main.js, он меняется от проекта к проекту, но как правило туда входит jquery, jquery-UI, разные плагины). У меня есть файл basket.scss в котором прописаны стили для заголовка таблицы, для самой таблицы, для блока под таблицей (итоговая сумма, скидка если есть). И все, это у меня кочует от проекта к проекту. По сути у меня просто меняется оформление (цвета, шрифты). Ну да ладно, как-нибудь я посвящю главу повторному использованию кода.

Вложенные свойства

CSS имеет несколько свойств, которые лежат в одном “пространстве имен” например: font-family, font-size и font-weigh. В CSS, если вы хотите установить ряд свойств, в том же пространстве имен, необходимо вводить его каждый раз. Sass создает ярлык для этого: просто напишите имя один раз, затем просто используйте суб-свойства. Например:

Свойство имен само по себе может также иметь значение. Например: