Привет, посетитель сайта ZametkiNaPolyah.ru! Продолжим рубрику Верстка сайтов и ее раздел SASS и SCSS. В этой записи мы поговорим про ссылки на родительские селекторы в SASS и разберемся с тем, как родительские селекторы в 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 реализованы символом звездочки, они используются для уменьшения объема кода, они могут работать, как часть составного селектора и прекрасно работают на сколь угодно большом уровне вложенности SASS правила (CSS правила вложенными не бывают).

Возможно, эти записи вам покажутся интересными


Выберете удобный для себя способ, чтобы оставить комментарий

Leave a Comment

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Loading Disqus Comments ...