Nested Mixins

In Stylus, "nested mixins" is an advanced style reuse technique that allows developers to pass existing mixins as arguments to another mixin. This mechanism significantly enhances the flexibility and maintainability of styles, making the CSS writing process more modular and logically clear. Unlike traditional linear dependencies, nested mixins support complex property combination at the definition stage, avoiding performance overhead and code redundancy caused by runtime dynamic calculations.

When we call a base mixin (such as base) in Stylus, we can typically only pass simple values or variables. However, by introducing the concept of "nesting," we can instantiate another defined mixin as an argument. In this case, the called mixin receives the complete definition and property state of the child mixin, allowing it to directly reference and use these style rules within its internal logic. This structure not only reduces the frequency of duplicate code but also makes the hierarchy of styles immediately clear.
To implement nested mixin functionality, we need to follow specific call orders and parameter passing methods. First, ensure that the child mixin being called is already defined; second, directly reference the complete code block or return value of the child mixin within the parent mixin's definition body as a variable to pass. The Stylus compiler handles this deep parameter parsing, flattening the nested structure or merging it directly into the final CSS output.

The specific implementation steps are as follows:

Define underlying base styles: Create a generic base mixin (e.g., color) containing core attributes such as color and font size.
Build intermediate layer logic: Create another mixin (e.g., card-style) that internally references the color mixin defined in step one, adding border or shadow effects on top of it.
Execute top-level call: In the final component, define the main mixin (e.g., theme-card), passing the card-style from step two as a parameter to the base style logic, or more commonly, embedding the child mixin directly into the parent mixin's argument list for usage.

Through this method, we can build CSS combinators similar to functional programming styles, where each module has independent responsibilities and clear input/output interfaces.

Code实战 Example Analysis

To intuitively demonstrate the application scenario of nested mixins, let's examine a specific case: creating a configurable card component style system. In this system, we will define three levels of mixins: base color, decorative border, and the final complete card style.

First, define the lowest-level base-color mixin, which accepts primary and secondary colors as parameters:

// Layer 1: Base color definition
mixins base-color (primary, secondary) =
    color: primary
    font-size: 16px
    background: #fff

// Layer 2: Decorative border and shadow, depending on base-color
mixin card-decoration (base) =
    .card {
        &::before {
            content: ''
            display: block
            width: 0
            height: 0
            border-style: solid
            border-width: calc(base * 1px), calc(base * 2px), 5px, 5px
            background-color: base.secondary
        }
    }

// Layer 3: Complete card style, nested call to card-decoration and base-color
mixin theme-card (primary) =
    .card-component {
        extend base-color(primary) // Apply base color logic
        
        &.decoration-active {
            extend card-decoration(base) // Key step: pass base mixin as argument to decoration
        }

        padding: 20px
        border-radius: 8px
    }

In the code above, the card-decoration mixin receives the instantiated result of base-color (passed via variable name or object form) and directly uses these color values within its internal logic. When we call it in .theme-card, we are essentially building a style tree containing nested relationships. This writing method ensures that even if the main tone changes, as long as the correct parameters are passed, the entire card component and its decorative effects will update automatically without manually modifying multiple independent mixin definitions.

Best Practices and Performance Considerations

When applying nested mixins in actual projects, developers should pay special attention to the following points to ensure code quality and runtime efficiency:

Avoid excessive recursion: Although Stylus supports multi-level nesting, it is recommended to keep it within three levels (base layer -> intermediate layer -> top layer). Excessive depth increases the compiler's parsing burden and may lead to overly complex CSS output structures.
Explicit parameter types: Try to use specific color values or calculated numbers as mixin parameters, avoiding passing vague variable names that could lead to unpredictable style behavior.
Leverage extend mechanism for optimization: Frequent use of the .extend() keyword during nesting can significantly reduce the size of duplicate code blocks and improve file readability.

By reasonably applying nested mixin technology, we can integrate scattered CSS rules into a logically rigorous and easily extensible style system. This not only improves development efficiency but also lays a solid foundation for maintaining large projects. Mastering this technique allows you to build complex web interface styles as elegantly as writing functions.