Від автора: Sass підтримує селектор placeholder в зв’язці з класом або id. У звичайному CSS вони задаються через символи «.» і «#», проте в Sass вони замінені на «%». Для роботи з селектором placeholder їх можна використовувати з директивою @extend. Без @extend ви не зможете відобразити результат в CSS.

Приклад

Наступний приклад показує, як використовувати селектор Sass placeholder у файлі SCSS –

Placeholder Selectors

First Heading

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

Second Heading

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

Тепер створіть файл style.css.

Style.scss

.frst_para {
color: green;
}
.sec_para {
@extend .frst_para;
font-size:20px;
}

Ми використовували директиву @extend, яка дозволяє одному селектору успадковувати стилі іншого. Sass можна вказати, щоб він стежив за файлом і оновлював його при будь-яких змінах в Sass файлі. Для цього використовуйте команду нижче –

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

Виконайте команду вище, вона створить файл style.css з наступним кодом –

Style.css

.frst_para, .sec_para {
color: green;
}
.sec_para {
font-size: 20px;
}

Висновок на екран

Давайте виконаємо наступні кроки, щоб побачити все на екрані –