Use Scenarios and Scope of Variables

In Stylus (a CSS preprocessor), the usage scenarios for variables primarily revolve around code reuse, dynamic generation, and conditional logic. By defining variables, developers can abstract repetitive style rules into configurable values, thereby reducing redundant code and improving maintenance efficiency.

1. Code Reuse

Variables allow developers to encapsulate common style values into independent units, avoiding repetition. For example, defining a variable $primary-color to store the primary color allows for unified reference across multiple style rules: 

body {
  color: $primary-color
}

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

This design pattern results in more concise code and facilitates uniform adjustments during subsequent modifications.

2. Dynamic Generation

Stylus supports dynamically generating style values by combining variables with operators (such as +, -, *). For instance, different versions of styles can be generated based on User Agent characteristics: 

$ua-specific = if (isMobile) 'mobile' else 'desktop'

body {
  font-size: $ua-specific + 16px
}

This flexibility enables developers to implement more complex style logic.

3. Conditional Logic

Variables can serve as the basis for conditional judgments, enabling stylistic differentiation based on different scenarios. For example, a variable can control whether a specific feature is enabled: 

$enable-tooltip = true

.tooltip {
  display: $enable-tooltip ? 'inline-block' : 'none'
}

This mechanism keeps style logic synchronized with business requirements while avoiding the maintenance costs associated with hardcoding.

Definition and Characteristics of Scope

Variable scoping in Stylus follows the "block-level scope" principle; variables are valid only within their defined blocks (such as @import, @media, or @keyframes) and are destroyed once they exit these scopes.

1. Global Variables

In global scope, variables can be accessed by all blocks. For example: 

$global-color = #333

@import 'variables.styl'

This design enables cross-file reusability of variables, but developers must note to avoid coupling issues caused by the abuse of global variables.

2. Local Variables

Local variables are valid only within their defining block and can prevent pollution of the global scope. For example: 

@import 'variables.styl'

@media (max-width: 768px) {
  $local-color = red
  body {
    color: $local-color
  }
}

Through local variables, developers can isolate style logic and improve code maintainability.

3. Nested Scope

In nested @import or @media blocks, the variable scope hierarchy recursively expands. For example: 

@import 'parent.styl'

.parent {
  $child-color = blue
}

.child {
  color: $child-color
}

This nesting mechanism allows developers to define variables at different levels, achieving finer-grained style control.

Hierarchy of Scope Relationships

Stylus variable scoping adheres to the "nearest principle," where the active range of a variable depends on its definition location. For example:

  • If defined within an @import block, the scope is limited to that block only.
  • If defined within a @media block, the scope is limited to that block only.
  • If defined in global scope, the scope covers the entire project.

This hierarchical relationship ensures predictability for variables but requires developers to plan variable definition locations carefully to avoid style issues caused by scope conflicts.

Lifecycle Management of Variables

Stylus supports controlling the lifecycle of variables through @import and @media blocks. For example: 

@import 'variables.styl'

$global-color = #333

@import 'scoped.styl'

Variables are valid within an @import block but will be destroyed once they exit that block. This mechanism allows developers to flexibly manage the usage range of variables and avoid pollution from global variables.

Precautions

  • Variables should generally avoid using the $ symbol to prevent conflicts with CSS syntax.
  • Variable inheritance can be implemented through the @extend mechanism, avoiding redundant definitions.
  • When defining variables within @keyframes, pay attention to the correlation between animation duration and keyframe timing.

By reasonably designing variable usage scenarios and scopes, developers can significantly enhance the readability, maintainability, and scalability of CSS code.