От автора: вдохновлённые функцией 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.
