Пробельные символы в HTML: табуляция в HTML, неразрывный пробел в HTML, перенос строки в HTML
Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел…
Вложенные правила в SASS
Привет, посетитель сайта ZametkiNaPolyah.ru! Продолжим рубрику Верстка сайтов и ее раздел Препроцессор SASS и SCSS. Мы рассмотрели не так давно вложенные правила в LESS, теперь давайте посмотрим на вложенные правила в SASS. Вложенные правила в SASS нужны не столько для уменьшения CSS кода, сколько для соблюдения иерархии вложенности HTML тэгов. CSS, к сожалению, а может и к счастью не требует от верстальщика соблюдения HTML иерархии, на самом деле, этого не требует и SASS, просто использование вложенных правил помогают структурировать код SASS или SCSS в соответствии с кодом HTML документа.
Вложенные правила в SASS
SASS помогает решить проблему иерархии HTML тэгов и их вложенности, другими словами: по коду, написанному на SASS вы легко можете представить структуру HTML документа. В этой записи мы поговорим о том, для чего нужны вложенные правила в SASS и как они помогают разработчику, попрактикуемся в написании вложенных правил, и в заключении посмотрим результат работы вложенных правил в браузере.
Содержание статьи:
Для чего нужны вложенные правила в SASS и чем они облегчают написание CSS кода
CSS препроцессор SASS, как и препроцессор LESS поддерживает возможность использования вложенных правил. Вложенные правила в SASS, как и вложенные правила в LESS используются для минимизации кода, но данная функция вложенных правил не основная. Основная задача вложенных правил заключается в том, чтобы структурировать CSS код по аналогии с тем кодом, который пишется в HTML документе.
Как вы знаете HTML тэги имеют четкую иерархию и вложенность, но в CSS этой иерархии нет, вложенные правила SASS, как раз-таки реализуют иерархичность. Ещё вложенные правила в SASS могут использовать имена селекторов, как CSS свойство, за счет чего реализуется наследование свойств селекторов. Но давайте перейдем к примеру вложенных правил. Пример будет аналогичен тому, что мы делали, когда рассматривали вложенные правила LESS.
Пример вложенных правил в SASS
Если вы помните, то для установки SASS на Windows необходимо установить Ruby, Ruby необходим, так как компилятор SASS написан на Ruby. Теперь давайте посмотрим, как SASS расширяет CSS при помощи вложенных правил. Создадим HTML страницу:
[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 class="content">
<h1>Вложенные правила в SASS</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum quasi sunt molestias non suscipit ab accusantium totam necessitatibus aliquam in ex impedit quis neque deleniti ullam repudiandae eveniet, et quisquam.</p>
<div class="main">
<h1>Вложенные правила в SASS</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, quibusdam, dolores! Fugit aperiam, dolores alias tempore, a consequatur dolorem, illo quis rerum quaerat totam. Vel non recusandae magni, eveniet ipsa.</p>
</div>
</div>
</body>
</html>
[/php]
Данный документ необходимо сохранить в папку Ruby на вашем компьютере. Как видите, HTML документ довольно простой, давайте будем изменять цвет текста HTML элементов при помощи вложенных правил SASS. Сохраните следующий код в папке c:\Ruby\lib\sass\ с именем style.scss, кстати, если вы сохраните данный файл с расширение .sass, ничего страшного не произойдет: компилятор SASS умеет определять синтаксис, об это мы говорили, когда рассматривали особенности синтаксиса SASS и SCSS.
[php]
.content{
h1{
font-size: 14px;
color: orange;
}
p{
font-size: 30px;
color:blue;
}
.main{
h1{
font-size: 14px;
color:orange;
}
p{
font-size: 30px;
color:blue;
}
}
}
[/php]
Фигурные скобки позволяют нам отслеживать иерархию вложенности правил в SASS коде. Сразу заметим, что эта иерархия совпадает с вложенностью элементов на странице. Вы можете сразу увидеть вложенность контейнеров в HTML.
Нам осталось только сгенерировать HTML код, воспользовавшись в командной строке следующей командой:
[php]
sass --watch C:\ruby\lib\sass\style.scss:style.css
[/php]
В результате компиляции вы получите следующий код CSS:
[php]
.content h1 {
font-size: 14px;
color: orange; }
.content p {
font-size: 30px;
color: blue; }
.content .main h1 {
font-size: 14px;
color: orange; }
.content .main p {
font-size: 30px;
color: blue; }
/*# sourceMappingURL=style.css.map */
[/php]
Мы можем заметить, что CSS код несколько больше чем тот код, что мы написали на SCSS. Давайте подведем итоги о использовании вложенных правил в SASS:
- Вложенные правила SASS несколько уменьшают объем кода на странице.
- Вложенные правила SASS нужны для того, чтобы соблюсти иерархию вложенности HTML документа.
Результат работы вложенных правил SASS
Результатом работы вложенных правил SASS вы можете насладиться, открыв HTML документ в браузере. Если вы в точности повторили пример, то увидите HTML страницу, как на картинке ниже.
Результат работы вложенных правил SASS в браузере
Итак, мы разобрались с тем, как работают вложенные правила в SASS и убедились в том, что они действительно сокращают объем кода и код SASS за счет вложенных правил соблюдает иерархию HTML.
Выберете удобный для себя способ, чтобы оставить комментарий