Препроцессор SASS. Изучаем SASS для быстрой верстки. CSS компилятор для быстрой верстки шаблонов и макетов сайта.

Привет, посетитель сайта ZametkiNaPolyah.ru! Продолжим рубрику Верстка сайтов и ее раздел SASS и SCSS. В этой записи мы поговорим про ссылки на родительские селекторы в SASS и разберемся с тем, как родительские селекторы в SASS позволяют ускорить верстку макета сайта. На рисунке к этой записи вы уже можете посмотреть пример работы ссылок на родительские селекторы, но более подробную информацию вы найдете в данной записи. Давайте приступим к рассмотрению еще одной возможности SASS.

Ссылки на родительские селекторы в SASS

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

Для чего нужны ссылки на родительские селекторы в SASS и чем они облегчают написание CSS кода

Препроцессор SASS позволяет использовать не только вложенные правила для того, чтобы оптимизировать CSS код, но и так называемые родительские селекторы. Родительские селекторы в SASS обозначаются символом «&». Использование родительских селекторов несколько уменьшает работу по написанию CSS кода.

Особенность родительских селекторов заключается в том, что вы можете задавать свойства дочернему селектору непосредственно в коде родительского селектора при помощи символа &, а SASS компилятор, когда будет преобразовывать SASS в CSS код создаст дочерний селектор и определит ему заданные свойства. Итак, давайте посмотрим, как ссылки на родительские селекторы расширяют возможности CSS.

Пример ссылок на родительские селекторы в SASS

Создадим новый HTML документ и сохраним его в папке Ruby (если вы помните среду Ruby мы установили, когда устанавливали SASS на Windows, именно на этом языке написан наш компилятор). Документ вы можете создавать в любом удобном для вас редакторе, например, в Sublime Text 3, так как у него есть специальный SASS плагин:

Простая HTML страница, состоящая из трех элементов. Теперь мы попhобуем изменить отображение HTML элементов страницы при помощи ссылок на родительские селекторы. Но, если к HTML заголовку и абзацу мы будем обращаться при помощи идентификатора, то стили HTML ссылки мы будем меня при помощи псевдокласса CSS. Давайте теперь создадим файл style.scss, в котором напишем следующий код (можете попробовать CSS редактор Brackets, один из самых удобны редакторов для верстки):

Не забудьте, что этот файл должен находиться в папке Ruby\lib\sass\, чтобы его видел компилятор. Теперь выполните следующую команду, чтобы получить CSS код:

sass --watch C:\ruby\lib\sass\style.scss:style.css

Не забывайте о том, что SASS компилятор в данном случае будет отслеживать сохранение файла и при каждом сохранение будет происходить компиляция. Мы получим следующий CSS код:

Как видите, компилятор понял, что & — это ссылка на родительский селектор и создал в CSS коде два селектора. Родительские селекторы в SASS можно использовать со сколь угодно большой вложенностью, давайте изменим цвет посещенной ссылки при помощи псевдокласса :visited и рассматриваемых селекторов (в качестве редактора можете остановить свой выбор на Notepad++, бесплатный и удобный редактор с подсветкой синтаксиса):

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

Но это еще не всё, мы можем использовать ссылку на родительский селектор, как часть составного селектора, давайте посмотрим, что из этого выйдет (еще могу порекомендовать среду NetBeans, но в данном случае это будет, как стрелять из пушки по воробьям):

Мы немного изменили верхний пример и получили вот такой CSS код:

Обратите внимание: SASS компилятор понял, что мы хотим использовать составной селектор и добавил приставку #main к -h1, таким образом мы изменили стили заголовка. Надеюсь, вы разбирались с тем, как работают ссылки на родительские селекторы в SASS.

Результат работы ссылок на родительские селекторы в SASS

Ссылки на родительские селекторы удобны и помогают нам уменьшит объем кода, который мы пишем, особенно, если учесть, что их мы можем комбинировать с другими возможностями SASS. Давайте посмотрим результат нашей работы в браузере.

Результат работы ссылок на родительские селекторы в SASS

Подведем итоги всему выше сказанному: ссылки на родительские селекторы в SASS реализованы символом звездочки, они используются для уменьшения объема кода, они могут работать, как часть составного селектора и прекрасно работают на сколь угодно большом уровне вложенности SASS правила (CSS правила вложенными не бывают).