Как использовать селектор Sass placeholder в файлах SCSS и CSS

Как использовать селектор Sass placeholder в файлах SCSS и CSS

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

Пример

Следующий пример показывает, как использовать селектор Sass placeholder в файле SCSS –

Теперь создайте файл style.css.

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

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

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

Style.scss

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

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

Style.css

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

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

Сохраните HTML выше в файл placeholder_selectors.html.

Откройте этот файл в браузере, страница будет, как на скриншоте ниже.

Как использовать селектор Sass placeholder в файлах SCSS и CSS

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

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

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

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

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

Препроцессоры Sass и Less

Автоматизация и упрощение Front-end разработки c помощью препроцессоров Sass и Less

Подробнее

Метки:

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

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

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

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