Используйте @import в CSS-препроцессорах аккуратно

Используйте @import в CSS-препроцессорах аккуратно

От автора: вдохновлённые функцией CSS import, которая импортирует правила стилей из других таблиц стилей, такие популярные CSS-препроцессоры как Sass, Less и Stylus также ввели собственные директивы @import. Они эффективно помогают начать компилировать модульные таблицы стилей с использованием переменных, миксинов и других функций каждого препроцессора.

Для того, чтобы должным образом их использовать, мы должны:

Быть внимательными, используя @import директивы. По умолчанию Sass, Less и Stylus, генерируя CSS, выдают любые селекторы, объявленные в импортированных файлах.

Неаккуратное импортирование часто становится причиной раздутого и некорректного CSS. Давайте рассмотрим следующий пример файла, который должен генерировать 3 класса:

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

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

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

page.less —простая таблица стилей с тремя классами, которые можно использовать для декоративных элементов

С импортированной типографикой модуль выглядит так:

font-size.less  —  источник для всей типографики

Фактический результат включает намного больше классов, чем мы намеревались создать:

Когда @import используется небрежно, все становится хуже.

page2.less —нам просто нужно два класса для этой страницы

CSS на выходе:

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

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

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

В конце концов получается намного больше CSS, чем нужно. Я только хотел импортировать внешние файлы по ссылкам и собирался получить результат из того, что было объявлено в текущем файле. Неаккуратное импортирование часто становится причиной раздутого и некорректного CSS в приложениях и приводит к лишней нагрузке на клиент. Это также может усложнить отладку, особенно когда неожиданный результат одного файла может перекрыть классы другого файла. Это наводит на вопрос: Как импортировать только по ссылке?

Пользователи Less, вам повезло! @import (reference) делает следующее: Используйте @import (reference), чтобы импортировать внешние файлы, не добавляя импортированные стили к скомпилированному результату, если на них не было ссылки.

Однако, в Stylus /Sass нет прямого способа импортировать по ссылке: Максимум, что вы можете получить – это silent class / placeholder. Они работают немного иначе, чем LESS и reference, больше информации вы можете найти здесь.

В Stylus/Sass вы можете сделать вот что:

Организовать переменные и заполнители в файлах, отдельно от источников объявленных селекторов, предназначенных для вывода

Попробовать импортировать только из источников переменных/заполнителей и с помощью всемогущих директив @extend вы можете наследовать и составить всё, что нужно

Импортировать только из источников объявленных селекторов для создания rollups

Первый пример будет выглядеть в Sass примерно так:

Источник для типографики

Импорт без неожиданных результатов

Чистый результат

Благодаря этим советам, со временем вы получите меньше раздутого и некорректного кода CSS в приложениях, а источник стилей станет более модульным, пригодным для компоновки и удобным в поддержке!

Автор: Sitian Liu

Источник: https://codeburst.io/

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

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

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

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

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

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

Получить

Метки:

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

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

Комментарии 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