Combine Variables with Sass Features

In Sass (CSS preprocessor), variables serve as the core tool for building complex styles, while Sass features (such as nesting, mixins, and functions) provide powerful extensibility. When variables are combined with Sass features, it enables more flexible style control while improving code maintainability and reusability.

Synergy Between Variables and Features

Variables as Feature Parameters
Variables can be used directly as parameter values for Sass features to achieve dynamic style generation. For example:
```
$primary-color = #333  
.button  
  background-color: $primary-color  
  border: 1px solid $primary-color  
```
Here, $primary-color is used as the value for both background-color and border, ensuring color consistency.
Embedding Variables Within Features
Through Sass features (such as @include or @mixin), variable values can be directly embedded into style rules. For example:
```
@mixin rounded($radius)  
  border-radius: $radius  

.box  
  @include rounded(10px)  
  width: 200px  
  height: 100px  
```
In this case, the $radius variable is dynamically applied to border-radius, while @include combines style rules into a unified structure.
Variable-Driven Feature Logic
Variables can control conditional logic generated by features. For example:
```
$is-dark = false  
@if $is-dark  
  .card  
    background-color: #222  
@else  
  .card  
    background-color: #fff  
```
This approach allows different style rules to be generated dynamically based on variable values, achieving flexibility in responsive design.

Core Principles of Combined Usage

Scope Management: Variable values may take effect within specific scopes; scope ranges must be controlled through features such as @import or @namespace.
Avoiding Duplicate Code: By combining variables and features, repetitive style definitions can be reduced; for example, using @mixin to reuse common styles.
Performance Optimization: Reasonable use of variables and features reduces the processing burden during Sass compilation, improving the efficiency of generated CSS.

Practical Application Scenarios

Dynamic Theme Switching
Define base styles through variables and implement theme switching via features:

$theme-bg = #f0f0f0  
$theme-text = #333  

@if $theme-bg  
  .container  
    background-color: $theme-bg  
    color: $theme-text  
@else  
  .container  
    background-color: #fff  
    color: #333

This method allows quick adaptation to different themes while maintaining style consistency.

Modular Management of Complex Layouts
Encapsulate layout logic into features and control layout parameters via variables:
```
@mixin flex-layout($gap)  
  display: flex  
  gap: $gap  

.grid  
  @include flex-layout(10px)  
  width: 100%  
```
The variable $gap dynamically adjusts the spacing of flex layouts, achieving flexible grid management.
Conditional Compilation Combined with Features
Combine Sass's @media feature with variables to implement cross-device style adaptation:
```
$mobile-breakpoint = 768px  

@media (max-width: $mobile-breakpoint)  
  .mobile-layout  
    font-size: 14px  

.desktop-layout  
  font-size: 16px  
```
This approach separates style logic for different devices, facilitating maintenance and extension.

Conclusion

Combining Sass variables with features is a key practice for building efficient and maintainable CSS code. By reasonably designing variable naming conventions, controlling scope ranges, and leveraging features (such as nesting, mixins, and functions) to generate dynamic styles, development efficiency and code readability can be significantly improved. In actual development, attention should be paid to the synergy between variables and features; avoid over-complicating the code structure while maintaining simplicity and extensibility.