Sass — вложенность селекторов

Sass — вложенность селекторов

От автора: Sass вложенность комбинирует разные логические структуры. С помощью Sass можно комбинировать множество CSS правил одно в другом. Если вы используете множество селекторов, то вы можете поместить один селектор в другой, чтобы создать составной селектор.

Пример

Следующий пример показывает использование вложенных правил в файле SCSS:

<html>
 <head>
 <title>Nested Rules</title>
 <link rel = "stylesheet" type = "text/css" href = "style.css" />
 <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 </head>

 <body>
 <div class = "container">
 <h1>My First Heading</h1>
 <p>It is a CSS pre-processor which helps to reduce repetition with CSS and save the time. </p>
 <p>It is more stable and powerful CSS extension language.</p>
 <div class = "box">
 <h1>My Second Heading</h1>
 <p>It is initially designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006.</p>
 </div>
 </div>
 </body>
</html>

Создайте style.scss. Расширение должно быть scss.

Style.scss

container{
 h1{
 font-size: 25px;
 color:#E45456;
 }
 
 p{
 font-size: 25px;
 color:#3C7949;
 }

 .box{
 h1{
 font-size: 25px;
 color:#E45456;
 }
 
 p{
 font-size: 25px;
 color:#3C7949;
 }
 }
}

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

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

Sass — вложенность селекторов

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

Выполните команду сверху, создастся файл style.css.

Style.css

.container h1 {
 font-size: 25px;
 color: #E45456;
}

.container p {
 font-size: 25px;
 color: #3C7949;
}

.container .box h1 {
 font-size: 25px;
 color: #E45456;
}

.container .box p {
 font-size: 25px;
 color: #3C7949;
}

Вывод на экран

Давайте выполним следующие шаги, чтобы увидеть все наши труды в действии:

Сохраните HTML код выше в nested_rules.html. Откройте этот файл в браузере, и вы увидите следующее.

Sass — вложенность селекторов

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree