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

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

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

Пример

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

<html>
 <head>
 <title>Referencing Parent Selectors</title>
 <link rel="stylesheet" type = "text/css" href = "style.css" />
 <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script src = "https://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 = "http://www.tutorialspoint.com/"> www.tutorialspoint.com </a>
 </div>
 </body>
</html>

Теперь создайте файл 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 со следующим кодом –

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами Less и Sass с полного нуля менее чем за 2 недели

Узнать подробнее

Style.css

a {
 font-size: 20px;
}
a:hover {
 background-color: yellow;
}

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

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

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

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

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

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

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

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

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

Узнать подробнее

Метки:

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

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree