Пример использования вложенных свойств в файле SCSS

Пример использования вложенных свойств в файле SCSS

От автора: с помощью вложенных свойств можно избежать повтора CSS. Например, используйте font в качестве пространства имен, в котором есть свойства font-family, font-size, font-weight и font-variant. В обычном CSS эти свойства необходимо писать каждый раз в пространстве имен. С помощью Sass эти свойства можно вложить и писать пространство имен лишь один раз.

Пример

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

Теперь создайте файл style.css.

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

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

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

Style.scss

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

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

Style.css

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

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

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

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

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

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

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

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

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

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

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

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

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

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree