Что такое LESS? Обзор CSS препроцессора LESS
Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью я открываю новую рубрику: Верстка сайтов. Постепенно в рубрику…
Ссылки на родительские селекторы в SASS
Привет, посетитель сайта 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 плагин:
[php]
<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<title>Пример родительских селекторов в SASS</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="main">
<h1 id="main-h1">Пример родительских селекторов в SASS</h1>
<p id="main-p">
Родительские селекторы позволяют уменьшить CSS код.
<a id="main-link" title="Бесплатные уроки LESS" href="//zametkinapolyah.ru/verstka-sajtov/less">
Изучаем LESS</a>
</p>
</div>
</body>
</html>
[/php]
Простая HTML страница, состоящая из трех элементов. Теперь мы попhобуем изменить отображение HTML элементов страницы при помощи ссылок на родительские селекторы. Но, если к HTML заголовку и абзацу мы будем обращаться при помощи идентификатора, то стили HTML ссылки мы будем меня при помощи псевдокласса CSS. Давайте теперь создадим файл style.scss, в котором напишем следующий код (можете попробовать CSS редактор Brackets, один из самых удобны редакторов для верстки):
[php]
a{
font-size: 15px;
color: #4499ee;
text-decoration: none;
&:hover {
text-decoration: underline;
color: #aa4466;
}
}
[/php]
Не забудьте, что этот файл должен находиться в папке Ruby\lib\sass\, чтобы его видел компилятор. Теперь выполните следующую команду, чтобы получить CSS код:
sass --watch C:\ruby\lib\sass\style.scss:style.css
Не забывайте о том, что SASS компилятор в данном случае будет отслеживать сохранение файла и при каждом сохранение будет происходить компиляция. Мы получим следующий CSS код:
[php]
a {
font-size: 15px;
color: #4499ee;
text-decoration: none; }
a:hover {
text-decoration: underline;
color: #aa4466;
}
[/php]
Как видите, компилятор понял, что & — это ссылка на родительский селектор и создал в CSS коде два селектора. Родительские селекторы в SASS можно использовать со сколь угодно большой вложенностью, давайте изменим цвет посещенной ссылки при помощи псевдокласса :visited и рассматриваемых селекторов (в качестве редактора можете остановить свой выбор на Notepad++, бесплатный и удобный редактор с подсветкой синтаксиса):
[php]
#main{
background: #dadbdf;
a{
font-style: italic;
&:visited{color:green;}
}
}
[/php]
В данном случае мы пользуемся тем, что CSS правила в SASS могут быть вложенными, а также используем ссылку на родительский селектор. Код CSS после компиляции будет следующим:
[php]
#main {
background: #dadbdf; }
#main a {
font-style: italic; }
#main a:visited {
color: green; }
[/php]
Но это еще не всё, мы можем использовать ссылку на родительский селектор, как часть составного селектора, давайте посмотрим, что из этого выйдет (еще могу порекомендовать среду NetBeans, но в данном случае это будет, как стрелять из пушки по воробьям):
[php]
#main{
background: #dadbdf;
a{
font-style: italic;
&:visited{color:green;
}
}
&-h1{
text-decoration:underline;
color:#aa2212;
}
}
[/php]
Мы немного изменили верхний пример и получили вот такой CSS код:
[php]
#main {
background: #dadbdf; }
#main a {
font-style: italic;
}
#main a:visited {color: green; }
#main-h1 {
text-decoration: underline;
color: #aa2212;
}
[/php]
Обратите внимание: SASS компилятор понял, что мы хотим использовать составной селектор и добавил приставку #main к -h1, таким образом мы изменили стили заголовка. Надеюсь, вы разбирались с тем, как работают ссылки на родительские селекторы в SASS.
Результат работы ссылок на родительские селекторы в SASS
Ссылки на родительские селекторы удобны и помогают нам уменьшит объем кода, который мы пишем, особенно, если учесть, что их мы можем комбинировать с другими возможностями SASS. Давайте посмотрим результат нашей работы в браузере.
Результат работы ссылок на родительские селекторы в SASS
Подведем итоги всему выше сказанному: ссылки на родительские селекторы в SASS реализованы символом звездочки, они используются для уменьшения объема кода, они могут работать, как часть составного селектора и прекрасно работают на сколь угодно большом уровне вложенности SASS правила (CSS правила вложенными не бывают).
Выберете удобный для себя способ, чтобы оставить комментарий