Suggest an editImprove this articleRefine the answer for “What are variables in preprocessors?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Variables in CSS preprocessors** are names that hold specific values (color, size, font, spacing and so on) so they can be reused in multiple places across the styles. **Key point:** variables make code stable, predictable and easy to maintain.Shown above the full answer for quick recall.Answer (EN)ImageVariables in CSS preprocessors are names that hold specific values (color, size, font, spacing and so on) so they can be reused in multiple places across the styles. During compilation, a preprocessor substitutes variable values into the final CSS, removing repetition and the need to hunt for values manually in a large project. They are used, for example, like this: ```scss $main-color: #2b6cb0; $padding: 16px; .button { color: $main-color; padding: $padding; } ``` Compiling this produces plain CSS: ```css .button { color: #2b6cb0; padding: 16px; } ``` ### Main tasks of variables - **centralizing values**: a single source of truth, so you do not need to change the same value in dozens of places; - **reducing duplication**: fewer repeating lines in the code; - **easy theme management and scalability**: you can change a project's design by changing values only in the variables file. In other words, variables make code stable, predictable and easy to maintain.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.