CSS Variables and Mixing Practice

CSS variables and mixins are core features of CSS preprocessors such as Sass or Less. They significantly enhance development efficiency and maintainability by abstracting CSS code into reusable modules.
CSS Variables (--variable-name) allow developers to define dynamic values, such as colors or font sizes, which can be reused across multiple CSS rules. Mixins, on the other hand, encapsulate repetitive style code—such as button border radii and shadows—and achieve flexibility through parameterization.

Practical Cases

1. Usage of CSS Variables

In Sass, variables are defined using the $ symbol, for example: 

$primary-color: #333;  

.button {  
  color: $primary-color;  
  background-color: $primary-color;  
}

This approach avoids code duplication and facilitates global modifications.

2. Encapsulation of Mixins

Mixins are reused via the @include directive, for example: 

@mixin rounded-button {  
  border-radius: 4px;  
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);  
}  

.button {  
  @include rounded-button;  
}

Mixins can be combined with variables to achieve more complex style control.

3. Binding of Dynamic Values

CSS variables support dynamic binding, for example: 

$font-size: 16px;  

.body {  
  font-size: $font-size;  
  @extend .base;  
}

By passing values through variables, developers can flexibly adjust styles without modifying the rules themselves.

Precautions

1. Compatibility and Performance

CSS variables and mixins are well-supported in browsers, but cross-version compatibility should be considered. Nested mixins may lead to performance degradation; therefore, their overuse should be avoided.

2. Maintainability

Reasonably organize variable and mixin namespaces to avoid naming conflicts. In large projects, modular management can be employed, such as storing variables in separate files.

3. Limitations and Constraints

Mixins cannot directly modify parent element styles; they must rely on inheritance or nesting. Values for CSS variables must be static and cannot undergo dynamic calculation.

With the continuous development of CSS preprocessors, the functionality of variables and mixins has become increasingly powerful. In the future, further improvements in development efficiency may be achieved by introducing more complex computational logic (such as dynamically calculated values) and more flexible mixin parameters.

Practical Application Scenarios

In actual development, CSS variables are commonly used for theme color management, while mixins are utilized to standardize button styles. Combining them can create a highly maintainable style system, such as: 

@use "base";  
@use "themes";  

.themes--dark {  
  @include base.layout;  
  @include themes.dark;  
}

This combination ensures style consistency while supporting rapid iteration.