Sass — вкладеність селекторів

356

Від автора: Sass вкладеність комбінує різні логічні структури. З допомогою Sass можна комбінувати безліч правил CSS одне в іншому. Якщо ви використовуєте безліч селекторів, то ви можете помістити один селектор в інший, щоб створити складовою селектор.

Приклад

Наступний приклад показує використання вкладених правил у файлі SCSS:

Nested Rules

My First Heading

It is a CSS pre-processor which helps to reduce repetition with CSS and save the time.

It is more stable and powerful CSS extension language.

My Second Heading

It is initially designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006.

Створіть 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 — вкладеність селекторів

Виконайте команду зверху, створиться файл 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 — вкладеність селекторів