Добрый вечер, препроцессорами пользуюсь давно - вложения, немного миксины и переменные. Обычно каталог стилей проекта выглядит так
/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 все понятно, там под каждый компонент есть свои переменные, чтобы можно было очень гибко настроить, но это фреймворк. Вобщем запутался, помогите встать на верный путь...
Простой
