Sass Variables: Compile-Time Constants for CSS

WHY IT EXISTS: Manually keeping values like colors, fonts, or sizes consistent across a large stylesheet is tedious and error-prone. Sass variables were created to solve this problem of repetition. They allow you to define a value in one place and reuse it, making code maintenance and theming dramatically simpler.

THE MENTAL MODEL: Sass variables are best understood as compile-time constants. You assign a value to a name that begins with a dollar sign, like base-color: #c6538c. When Sass processes your file, it replaces every instance of base-color with the actual hex code. They exist only during development; they are completely erased from the final CSS file sent to the browser.

HOW IT WORKS: You declare a variable by assigning an expression to a name, such as font-size: 16px;. You can then use this variable in any property value, like font-size: font-size;. Sass variables are imperative, meaning their value is resolved at the point they are used. If you redefine a variable's value later in the file, it does not affect declarations that came before the change. Sass also supports a !default flag, which assigns a value only if the variable hasn't already been defined. This is useful for creating configurable libraries. Note that hyphens and underscores in variable names are interchangeable, so font-size and font_size refer to the same variable.

WHEN TO USE IT: Use Sass variables to store and reuse any CSS value that appears multiple times in your project. This is especially powerful for managing design tokens like a brand color palette, font stacks, spacing units, and media query breakpoints. They are essential for building maintainable and themeable style systems where a single change can update an entire site.

WHEN NOT TO USE IT: The primary limitation of Sass variables is their static, compile-time nature. If you need values that can change dynamically in the browser based on user interaction or element state, you must use native CSS custom properties (e.g., --main-bg-color). Sass variables are fixed once compiled, whereas CSS variables are live and can be manipulated with JavaScript or updated within media queries.

ONE CANONICAL EXAMPLE: A common use case is defining a base color and deriving variations from it. For instance: base-color: #c6538c; and border-dark: rgba(base-color, 0.88);. When you write .alert { border: 1px solid border-dark; }, Sass compiles it to CSS where $border-dark is replaced by its calculated value: .alert { border: 1px solid rgba(198, 83, 140, 0.88); }. This keeps your color scheme consistent and easy to update from a single source.