@stasov1

Как вы организовываете стили с использованием препроцессора?

Добрый вечер, препроцессорами пользуюсь давно - вложения, немного миксины и переменные. Обычно каталог стилей проекта выглядит так
/less
  /blocks
    container.less
    button.less
    menu.less
    и т.д. все стили для блоков
  /utils
    vars.less
    mixins.less

Обычно файл vars.less выглядит так
// Main colors
@white: #fff;
@white-dark: #f3f3f3;
@white-darker: #f0f0f0;

@green: #cae28b;
@red: #ecb0b0;

@black: #000;
@black-light: #222;

@yellow: #ffad19;
@yellow-fade: #d28600;

@orange: #d28600;
@orange-fade: #ffe7b9;

@gray: #666;
@gray-dark: #515151;
@gray-light: #999;
@gray-lighter: #aaa;
@gray-native: #ccc;

@bordered-yellow: #efaf3f;
@bordered-yellow-dark: #ffb239;
@bordered-gray: #ededed;
@bordered-light-gray: #f6f6f6;
@bordered-lighten-gray: #e5e5e5;

// gradient colors
@yellow-start: #ffc653;
@yellow-end: #ffbc45;

@gray-start: #fdfdfd;
@gray-end: #f8f8f8;

// Fonts sizes
@font-xl: 38px;
@font-l: 18px;
@font-m: 14px;
@font-s: 12px;
@font-xs: 11px;

// Fonts families
@font-arial: Arial, sans-serif;
@font-oleo: "OleoScript-Regular", Arial, sans-serif;
@font-oxygen: "OxygenMono-Regular", Arial, sans-serif;

// max container width
@max-width-container: 940px;


Когда количество цветов разрастается и становится не очень удобно с ними работать, как вы решаете проблему? Создавать под каждый цвет переменную? или выносить только базовые цвета, которые преобладают в макетах? и вообще, что лучше хранить в переменных кроме размеров шрифтов, стилей шрифтов, цветов? именно касательно верстки страниц. С фреймворком, тем же bootstrap все понятно, там под каждый компонент есть свои переменные, чтобы можно было очень гибко настроить, но это фреймворк. Вобщем запутался, помогите встать на верный путь...
  • Вопрос задан
  • 175 просмотров
Пригласить эксперта
Ответы на вопрос 2
27cm
@27cm
TODO: Написать статус
Разделите переменные по группам и раскидайте по разным файлам, а в vars.less просто подключите эти файлы.
Ответ написан
Комментировать
@kostein
Сварщик - Верстальщик
Ну если палитра задана не жёстко то можно функциями, не помню как в less точно, - что то типа darken, lighteen.. и своих понаписать.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы