От автора: выбрать родительский селектор можно с помощью символа &. Этот символ говорит, в каком месте необходимо вставить родительский селектор. Сегодня рассмотрим основы Sass по использованию родительских селекторов.
Пример
Следующий пример показывает, как использовать родительские селекторы в файле SCSS –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html> <head> <title>Referencing Parent 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> <div class = "container"> <h1>Example using Parent Selector</h1> <a href = "//www.tutorialspoint.com/"> www.tutorialspoint.com </a> </div> </body> </html> |
Теперь создайте файл style.css. Обратите внимание на символ &, который определяет, где необходимо вставить родительский селектор.
Style.scss
|
1 2 3 4 |
a { font-size: 20px; &:hover { background-color: yellow; } } |
Sass можно указать, чтобы он следил за файлом и обновлял его при любых изменениях в Sass файле. Для этого используйте команду ниже –
|
1 |
sass --watch C:\ruby\lib\sass\style.scss:style.css |
Выполните команду выше, она создаст файл style.css со следующим кодом –
Style.css
|
1 2 3 4 5 6 |
a { font-size: 20px; } a:hover { background-color: yellow; } |
Вывод на экран
Давайте выполним следующие шаги, чтобы увидеть все на экране –
Сохраните HTML выше в файл parent_selectors.html.
Откройте этот файл в браузере, страница будет, как на скриншоте ниже.
Символ & будет заменен на родительский селектор a. При наведении курсора мыши на ссылку, ее фон будет меняться на желтый.
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
