Using Nested Definitions for Responsive Layouts in Stylus

Utilizing nested definitions to build responsive layouts in Stylus is an efficient and logically clear practice. It allows developers to organize media queries through a hierarchical structure, thereby avoiding the dispersion of complex conditional logic across multiple top-level rules. This approach not only enhances code readability but also improves the reusability of style logic, making it an ideal choice for multi-screen adaptation scenarios.
The core advantage of Stylus lies in its powerful nesting mechanism, which provides a natural hierarchical framework for responsive layouts. In traditional CSS, we typically need to write specific style rules inside @media blocks, whereas in Stylus, we can tightly couple "base styles" with "responsive extensions" through parent-child relationships.

This structure generally follows the following logic:

  1. Root Container Definition: Define the base layout at the top level, applicable to all screen sizes.
  2. Nested Media Queries: Directly open @media blocks within parent elements to rewrite or extend styles based on specific breakpoints.

Through this method, responsive logic is no longer isolated fragments but encapsulated as part of a component. When adjusting the responsive behavior of a specific module, one only needs to modify its internal nested rules without worrying about affecting other unrelated components.

Base Layout and Default State

Before building a responsive system, it is essential to establish a universal baseline. This baseline should include styles that display correctly on all devices, such as font sizes, line heights, base spacing, and default Flexbox or Grid layout directions.

.container
  flex-direction: column
  padding: 20px
  background-color: #f5f5f5

// Define a generic card component as the basis for responsive units
.card
  border-radius: 8px
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)
  padding: 20px
  margin-bottom: 15px

  // Default state: single column layout, width adapts
  .content
    width: 100%

The above code defines .container as the main page container and .card as a content unit. In the default state, the .card's content area occupies the full width, ensuring complete display on small-screen devices.

Handling Small Screen Adaptation with Nested Definitions

The core of responsive layout lies in switching between "breakpoints." Stylus allows us to open @media queries at any level. For mobile devices or small tablets, we typically focus on converting single-column layouts into multi-column grids or adjusting font sizes to fit smaller reading areas.

By nesting media queries inside .card, we can precisely control the appearance of specific components across different screen sizes:

.card
  // ... (default styles)

  @media screen and (max-width: 768px)
    // Small screen adaptation logic
    .content
      width: 100%
      font-size: 14px
      
      // On small screens, card content may require a more compact layout
      p
        margin-bottom: 10px

  @media screen and (min-width: 769px) and (max-width: 1024px)
    // Medium screen adaptation logic: attempt dual-column display
    .content
      width: calc(50% - 10px)
      
      // Use Grid layout instead of Flex for more flexible responsiveness
      display: grid
      grid-template-columns: repeat(2, 1fr)
      gap: 15px
      
      p
        margin-bottom: 12px

This code demonstrates the flexibility of nested definitions. When screen width is less than or equal to 768px, fonts are reduced and padding increased; between 769px and 1024px, the content area transforms into a two-column grid layout. All these rules are encapsulated within .card, allowing each card to independently adjust its own shape based on screen size without interfering with other cards on the page.

Large Screen Expansion and Complex Scenario Optimization

As screen sizes increase, the goal of responsive layouts typically shifts towards "maximizing space utilization." At this stage, we can continue nesting media queries to define exclusive styles for extra-large screens. Furthermore, nested structures support more complex logical judgments, such as combining min-width and max-width to handle specific breakpoint intervals.

.header
  display: flex
  justify-content: space-between
  padding: 15px

  @media screen and (min-width: 1025px)
    // Large screen: hamburger menu expands into full navigation bar
    .nav-links
      display: block
      width: 300px
      
      @media screen and (min-width: 1440px)
        // Ultra-wide screen: adjust spacing and font size
        padding: 25px
        font-size: 16px

When handling complex scenarios, nested definitions also help us organize the complete lifecycle of "default - small screen - medium screen - large screen." By planning breakpoint order using ordered lists, we ensure clear priority logic for styles:

  1. Base Layer: No media queries, covering all devices.
  2. Mobile Layer: Optimized for max-width, prioritizing readability.
  3. Tablet/Small Desktop Layer: Adjusts layout direction for specific intervals (e.g., from single to dual columns).
  4. Large Screen Layer: Expands space for min-width, optimizing visual weight.

Summary and Practical Recommendations

Using nested definitions to implement responsive layouts is essentially leveraging Stylus's syntax features to embed CSS media query logic directly into component structures. This method not only reduces global variable pollution but also significantly lowers code maintenance costs. Developers only need to focus on how specific modules perform on specific screens without worrying about conflicts in global styles.

In practical projects, it is recommended to follow these principles:

  • Breakpoint Naming Conventions: Although Stylus supports variables, clear numeric values or semantic descriptions are still recommended within media queries.
  • Logic Descending: Place complex responsive logic as deeply as possible in nested structures to avoid stacking overly long @media blocks at the top level.
  • Reusability Testing: After writing nested rules, verify them rigorously across devices with different resolutions to ensure smooth and natural transitions from mobile to ultra-wide screens.

By mastering this technique, you can build flexible and elegant responsive interfaces, fully leveraging the powerful potential of Stylus as a modern CSS preprocessor.