Основы Sass — пример создания ссылок на родительские селекторы

Основы Sass — пример создания ссылок на родительские селекторы

От автора: выбрать родительский селектор можно с помощью символа &. Этот символ говорит, в каком месте необходимо вставить родительский селектор. Сегодня рассмотрим основы Sass по использованию родительских селекторов.

Пример

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

Теперь создайте файл style.css. Обратите внимание на символ &, который определяет, где необходимо вставить родительский селектор.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

Style.scss

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

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

Style.css

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

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

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

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

Символ & будет заменен на родительский селектор a. При наведении курсора мыши на ссылку, ее фон будет меняться на желтый.

Основы Sass — пример создания ссылок на родительские селекторы

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

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

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

Подробнее

Метки:

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

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

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

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