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

Используйте @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 —простая таблица стилей с тремя классами, которые можно использовать для декоративных элементов

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

@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), чтобы импортировать внешние файлы, не добавляя импортированные стили к скомпилированному результату, если на них не было ссылки.

Однако, в 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.