Passing Mixins via Props

In the architecture of Stylus, mixins are a powerful tool for reusing code snippets and reducing repetitive definitions. However, when we need to dynamically adjust this reusable logic based on context, simple static references often fall short. In such cases, "passing parameters to mixins" becomes the key solution. Its core concept lies in injecting specific variable values or computed results as arguments into mixin functions, thereby generating customized CSS rules at runtime. This mechanism not only enhances code flexibility but also allows style logic to closely align with a component's actual state, achieving true "data-driven design."

Unlike JavaScript, where mixins directly receive function parameters, Stylus mixins do not accept parameters in this manner; instead, they inject external variables into the mixin body through a special syntax structure. The first step in understanding this mechanism is to clarify its scoping rules: variables declared within the mixin definition block have a local scope, while passed-in arguments exist as part of that local scope. This means you can safely use these parameters for calculations or conditional checks within the mixin without worrying about polluting the global namespace.
The foundation for implementing parameter passing in mixins lies in correct definition syntax. In Stylus, we typically use the @mixin keyword to define a mixin and specify the parameter list within the parentheses that follow. These parameters can be simple variable names or complex expressions and function calls.

Here is an example of a standard mixin definition showing how to receive a color value and a set of numeric values:

@mixin set-color(color, size)
  background: color
  width: size * 2px
  height: size * 2px

In this example, the set-color mixin receives two parameters: color and size. When calling this mixin externally, it is crucial to ensure that the provided parameter types match the expectations defined during creation. The Stylus compiler binds the passed values to these parameter names at runtime and then executes the corresponding style calculations within the mixin body.

Dynamic Application and Conditional Logic

Once the basic syntax is mastered, the true value lies in utilizing these parameters to construct complex logic. Since parameters are determined at runtime, they naturally support conditional checks and loop iterations. This allows us to dynamically alter style appearance based on data states without writing extensive if-else blocks or repetitive class selectors.

Suppose we need a button mixin that automatically adjusts its background color based on the theme mode. We can achieve this by passing the current theme variable:

// Define a mixin that accepts a theme variable
@mixin theme-button(theme)
  if theme == 'light'
    background: #ffffff
    border-color: #cccccc
  else if theme == 'dark'
    background: #1a1a1a
    border-color: #444444
  else
    background: #333333
    border-color: #555555

// Apply the mixin in a component
.button-primary
  @theme-button(theme)

The code above demonstrates how to dynamically generate CSS by combining if statements with the passed-in theme parameter. This approach is not only logically clear but also significantly reduces maintenance costs. When a project needs to support new theme modes, one only needs to modify the conditional logic inside the mixin or add new branches, rather than refactoring the entire component file. Furthermore, parameters can be used to generate multiple related elements through loops, such as automatically calculating spacing in a grid layout based on the number of columns.

Nested Calls and Parameter Composition

In practical development, complex UI components often require the coordinated work of multiple styles. Stylus allows calling other mixins within a mixin, and outer mixin parameters can be passed to inner mixins. This nesting mechanism greatly enhances code reusability and flexibility.

Consider a card component that needs to adjust its background color based on the theme and border style based on content type. We can split "theme handling" and "border handling" into two independent mixins and then combine them within the main card mixin:

@mixin border-style(type)
  if type == 'solid'
    border: 1px solid currentColor
  else if type == 'dashed'
    border: 1px dashed currentColor
  else
    border: none

@mixin card-theme(theme, content-type)
  background: get-color-from-theme(theme)
  @border-style(type: content-type)
  padding: 10px

// Usage example
.card-item
  @card-theme(theme: 'dark', type: 'solid')

In this scenario, the card-theme mixin receives two parameters: theme and content-type. It first retrieves the background color based on the theme (assuming get-color-from-theme is a defined function) and then calls the border-style mixin, passing the content type as an argument. This combination ensures that each sub-mixin has a single, focused responsibility, while the main mixin coordinates their relationships.

Best Practices and Performance Considerations

While parameter passing in mixins offers great flexibility, certain best practices must be observed in real-world applications to avoid performance bottlenecks or logical errors. First, avoid performing overly complex calculations inside mixins, as this increases parsing overhead during compilation. Second, ensure that all passed-in parameters have explicit types; prefer using predefined constants or enum values to reduce ambiguity. Finally, for components with high render frequency, consider extracting constant parameters into global variables or pre-calculating them during the build phase.

By reasonably utilizing the parameter passing mechanism, developers can transform static style definitions into dynamic responsive logic, making Stylus projects more modular, maintainable, and easy to extend. This not only aligns with the modern frontend development philosophy of "convention over configuration" but also lays a solid foundation for building high-cohesion, low-coupling UI systems.