How do you organize styles using a preprocessor?

Question

css

Good evening, I've been using preprocessors for a long time - attachments, some mixins and variables. Usually the style directory of a project looks like this

/less
  /blocks
    container.less
    button.less
    menu.less
    и т.д. все стили для блоков
  /utils
    vars.less
    mixins.less

Usually the vars.less file looks like this

// 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;

When the number of colors grows and it becomes not very convenient to work with them, how do you solve the problem? Create a variable for each color? or take out only the base colors that dominate the layouts? and in general, what is better to store in variables besides font sizes, font styles, colors? regarding page layout. With the framework, the same bootstrap, everything is clear, there are variables for each component so that you can configure it very flexibly, but this is a framework. I'm confused, please help me get on the right track...

Answer 1

Separate the variables into groups and scatter them into different files, and in vars.less just include these files.

Answer 2

Well, if the palette is not set rigidly, then you can use functions, I don’t remember exactly how in less - something like darken, lighteen .. and write your own.