Від автора: обрати батьківський селектор можна за допомогою символу &. Цей символ говорить, в якому місці необхідно вставити батьківський селектор. Сьогодні розглянемо основи Sass по використанню батьківських селекторів.
Приклад
Наступний приклад показує, як використовувати батьківські селектори у файлі SCSS –
Referencing Parent Selectors
Example using Parent Selector
www.tutorialspoint.com
Тепер створіть файл style.css. Зверніть увагу на символ &, який визначає, де необхідно вставити батьківський селектор.
Style.scss
a {
font-size: 20px;
&:hover { background-color: yellow; }
}
Sass можна вказати, щоб він стежив за файлом і оновлював його при будь-яких змінах в Sass файлі. Для цього використовуйте команду нижче –
sass –watch C:\ruby\lib\sass\style.scss:style.css
Виконайте команду вище, вона створить файл style.css з наступним кодом –
Style.css
a {
font-size: 20px;
}
a:hover {
background-color: yellow;
}
Висновок на екран
Давайте виконаємо наступні кроки, щоб побачити все на екрані –
Збережіть HTML вище в файл parent_selectors.html.
Відкрийте цей файл у браузері, сторінка буде, як на скріншоті нижче.
Символ & буде замінений на батьківський селектор a. При наведенні курсору миші на посилання, її фон буде змінюватися на жовтий.
