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

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

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

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

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

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

@import "./font-sizes";

.page_title {
  &:extend(.h1);
}

.page_cta {
  &:extend(.h3);
}

.page_special_button {
  background-color: black;
  color: white;
}

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

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

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

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

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

@h1-size: 36px;
@h2-size: 24px;
@h3-size: 18px;
@grey: #212121;
@lightgrey: #616161;

.h1 {
  color: @grey;
  font-size: @h1-size;
}

.h2 {
  color: @grey;
  font-size: @h2-size;
}

.h3 {
  color: @lightgrey;
  font-size: @h3-size;
}

.copy {
  color: @grey;
  font-size: @h3-size * 0.5;
}

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

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

.h1,
.page_title {
  color: #212121;
  font-size: 36px;
}
.h2 {
  color: #212121;
  font-size: 24px;
}
.h3,
.page_cta {
  color: #616161;
  font-size: 18px;
}
.copy {
  color: #212121;
  font-size: 9px;
}
.page_special_button {
  background-color: black;
  color: white;
}

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

@import "./page";
@import "./font-sizes";

.page2_title {
  &:extend(.page_title);
}

.log_out_cta {
  &:extend(.copy);
}

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

CSS на выходе:

.page_special_button {
  background-color: black;
  color: white;
}
.h1,
.page_title,
.page2_title {
  color: #212121;
  font-size: 36px;
}
.h2 {
  color: #212121;
  font-size: 24px;
}
.h3,
.page_cta {
  color: #616161;
  font-size: 18px;
}
.copy,
.log_out_cta {
  color: #212121;
  font-size: 9px;
}

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

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

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

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

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

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

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

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

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

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

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

$h1-size: 36px;
$h2-size: 24px;
$h3-size: 18px;
$grey: #212121;
$lightgrey: #616161;

%h1 {
  color: $grey;
  font-size: $h1-size;
}

%h2 {
  color: $grey;
  font-size: $h2-size;
}

%h3 {
  color: $lightgrey;
  font-size: $h3-size;
}

%copy {
  color: $grey;
  font-size: $h3-size * 0.5;
}

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

@import './typography'
.page_title {
  @extend %h1;
}

.page_cta {
  @extend %h3;
}

.page_special_button {
  background-color: black;
  color: white;
}

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

.page_title {
  color: #212121;
  font-size: 36px;
}

.page_cta {
  color: #616161;
  font-size: 18px;
}

.page_special_button {
  background-color: black;
  color: white;
}

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

Благодаря этим советам, со временем вы получите меньше раздутого и некорректного кода 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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree