Основи Sass — приклад створення посилань на батьківські селектори

21

Від автора: обрати батьківський селектор можна за допомогою символу &. Цей символ говорить, в якому місці необхідно вставити батьківський селектор. Сьогодні розглянемо основи 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. При наведенні курсору миші на посилання, її фон буде змінюватися на жовтий.

Основи Sass — приклад створення посилань на батьківські селектори