От автора: Sass поддерживает селектор placeholder в связке с классом или id. В обычном CSS они задаются через символы «.» и «#», однако в Sass они заменены на «%». Для работы с селектором placeholder их можно использовать с директивой @extend. Без @extend вы не сможете отобразить результат в CSS.
Пример
Следующий пример показывает, как использовать селектор Sass placeholder в файле SCSS –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html> <head> <title>Placeholder Selectors</title> <link rel = "stylesheet" type = "text/css" href="style.css" /> <link rel = "stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src = "//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <h1>First Heading</h1> <p class = "frst_para">It is a CSS pre-processor which helps to reduce repetition with CSS and save the time. </p> <h1>Second Heading</h1> <p class = "sec_para">It was initially designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006.</p> </body> </html> |
Теперь создайте файл style.css.
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть видеоStyle.scss
|
1 2 3 4 5 6 7 |
.frst_para { color: green; } .sec_para { @extend .frst_para; font-size:20px; } |
Мы использовали директиву @extend, которая позволяет одному селектору наследовать стили другого. Sass можно указать, чтобы он следил за файлом и обновлял его при любых изменениях в Sass файле. Для этого используйте команду ниже –
|
1 |
sass --watch C:\ruby\lib\sass\style.scss:style.css |
Выполните команду выше, она создаст файл style.css со следующим кодом –
Style.css
|
1 2 3 4 5 6 |
.frst_para, .sec_para { color: green; } .sec_para { font-size: 20px; } |
Вывод на экран
Давайте выполним следующие шаги, чтобы увидеть все на экране –
Сохраните HTML выше в файл placeholder_selectors.html.
Откройте этот файл в браузере, страница будет, как на скриншоте ниже.
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть видео
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть
