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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS на выходе:

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

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

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

В конце концов получается намного больше 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.

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

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

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

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

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

Смотреть

Метки:

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

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

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

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