Sass Variable Inheritance Rules and Applications

Sass variable inheritance is one of the key mechanisms in CSS preprocessors, allowing developers to reuse styles by defining variables and dynamically extending them across different nesting levels. This mechanism not only enhances code maintainability but also simplifies the management of complex style structures. Below are the core rules and practical application scenarios for Sass variable inheritance.

Inheritance Rules

1. Variable Inheritance Order
   When inheriting, Sass variables follow a specific priority order. If a variable is defined in a parent scope, child scopes can inherit it; however, if a same-named variable is defined within the child scope, its value overrides the parent's. For example:

   $primary-color = #ff0000  
   
   .parent {  
     color: $primary-color;  
   }  
   
   .child {  
     color: $primary-color; /* Higher priority than parent */  
   }  
   

2. Scope Limitations
   The inheritance range of variables is influenced by CSS scoping rules. By default, Sass variables are only valid within their current scope and cannot be directly accessed from child scopes unless passed down via nesting or explicitly defined in the parent. For example:

   .parent {  
     $bg-color = #ffffff  
   }  
   
   .child {  
     background-color: $bg-color; /* Valid only within .child scope */  
   }  
   

3. Override Rules
   When a child defines a variable with the same name as its parent, the child's value overrides the parent's. This mechanism is commonly used for localized style modifications. For example:

   .parent {  
     $text-color = #000000  
   }  
   
   .child {  
     $text-color = #00ff00;  
     color: $text-color; /* Higher priority than parent */  
   }  
   

Application Scenarios

1. Style Reusability
   By defining global variables, style consistency can be achieved across the project. For example:

   $font-size = 16px  
   
   .button {  
     font-size: $font-size;  
     color: $primary-color;  
   }  
   
   .nav-link {  
     font-size: $font-size;  
     color: $secondary-color;  
   }  
   

2. Hierarchical Structure Management
   In multi-level component structures, variable inheritance avoids redundant definitions. For example:

   .header {  
     background: $bg-color;  
   }  
   
   .header .content {  
     background: $sub-bg-color; /* Lower priority than parent */  
   }  
   

3. Dynamic Style Generation
   Combined with conditional logic, this mechanism enables flexible style control. For example:

   $is-dark = false  
   
   .card {  
     background: $bg-color;  
     
     if ($is-dark) {  
       background: #000000;  
     }  
   }  
   

Example Code

// Global variables  
$primary-color = #ff0000  
$font-size = 16px  

// Base class  
.parent {  
  color: $primary-color;  
  font-size: $font-size;  
}  

// Child class  
.child {  
  color: $primary-color; /* Higher priority than parent */  
  font-size: $font-size * 1.2;  
}

The core of Sass variable inheritance lies in controlling the propagation and overriding of variables through hierarchical structures. Developers must design variable naming rules reasonably to avoid conflicts and optimize style management by leveraging scoping rules effectively. By flexibly utilizing the inheritance mechanism, code readability and maintenance efficiency can be significantly improved.