Latest Features of Sass, Less, and Stylus

In web frontend development, CSS preprocessors have long been a key tool for improving code maintainability and reusability. Over time, the three major mainstream solutions—Sass, Less, and Stylus—have each developed unique latest features to adapt to modern complex layout requirements and high-dynamic interaction scenarios. This article explores how the recent core functionalities of these three tools optimize development workflows and solve practical problems.
Sass (now SCSS) has long held a dominant position due to its strict syntax and powerful inheritance mechanisms. Its latest features focus primarily on fine-grained control over CSS variables, the extension of nesting logic, and the refinement of module systems.

First, CSS variables in Sass are no longer just simple named values but support complex interpolation and calculations. Developers can define a set of global colors or spacing standards and perform local overrides at the component level, thereby achieving a true theming switch mechanism. Second, Sass 3.4+ introduced a more powerful module system that allows importing entire function libraries directly via the @use directive rather than individual files. This not only reduces parsing overhead during compilation but also significantly boosts build efficiency for large-scale projects. Furthermore, the latest version of Sass offers more flexible support for nested media queries, enabling natural handling of scenarios like "modifying components at specific breakpoints" without manually deconstructing complex CSS logic.

// Example: Implementing theme switching using @use and variable overrides
@use 'variables' as *; // Import all global variables

@mixin button-theme($primary: $color-primary) {
  background-color: var(--my-app, $primary);
}

.button-blue {
  &.dark-mode {
    @include button-theme(#3498db);
  }
}

Less: Breakthroughs in Hybrid Mode and Runtime Calculations

Less is renowned for its flexible syntax and powerful compile-time calculation capabilities. In recent years, Less has made significant progress in supporting "Hybrid Mode," enabling it to handle variables and nesting like a traditional preprocessor while directly outputting native CSS without requiring additional toolchain support. This feature is crucial for building progressive enhancement applications.

In addition, the latest version of Less has significantly enhanced runtime calculation capabilities. While most mathematical operations are still completed during the compilation phase, Less now allows dynamically modifying variable values and re-rendering styles within JS running code, providing native support for data-driven UIs (such as dashboards and charts). At the same time, Less's support for CSS Grid and Flexbox syntax sugar has become more complete, allowing direct mapping of modern layout properties and reducing the workload for developers manually writing complex attributes.

// Example: Dynamic variable calculation under Hybrid Mode
@base-color: #3498db;
@if (getComputedStyle(document.body).getPropertyValue('--theme')) == 'dark' {
  @primary-color: darken(@base-color, 20%);
} else {
  @primary-color: lighten(@base-color, 15%);
}

.box {
  background: (@primary-color); // Directly use the calculated result without compile-time judgment
}

Stylus: Modular Architecture and CSS-First Philosophy

Stylus (now PostCSS) is famous for its unique "bottom-up" syntax structure and powerful plugin ecosystem. Its latest features focus on deep integration of modularity and native support for modern CSS features.

The core advantage of Stylus lies in its extreme simplification of nesting syntax, allowing developers to organize code block structures like writing JavaScript. The latest version of Stylus further enhances modular functionality through optimizations of the @require, @import, and @extend directives, achieving code reuse logic similar to CommonJS. More importantly, Stylus now fully supports the CSS-First development model, meaning pure CSS code is written first, followed by gradually adding Stylus-specific feature layers. This layered architecture enables seamless collaboration between different teams: frontend experts focus on style details, while UI/UX designers can independently manage foundational standards. Additionally, Stylus's support for syntax sugar regarding animations and transitions has reached new heights, capable of directly handling complex keyframe definitions and multi-axis motion paths.

// Example: CSS-First + Stylus Modular Structure
.box // CSS First: Pure style section
  background-color red
  width 100%

@require 'mixins/mixin' // Import custom module
.mixin()
  border solid black 2px

.button-blue (extends .box)
  @include mixin
  color white

Summary and Selection Recommendations

In summary, Sass, Less, and Stylus all demonstrate unique advantages in their respective latest features. Sass excels in rigorous variable management and the stability of its module system; Less stands out in hybrid compilation modes and data-driven styling; while Stylus has won the favor of design teams with its flexible modular architecture and support for CSS-First.

In actual projects, selection should be based on the team's technology stack preferences and specific project requirements. If pursuing extreme build speed and standardized team collaboration, Sass (SCSS) remains the top choice. If a project requires handling highly dynamic data rendering and aims to reduce toolchain dependencies, Less's hybrid mode is extremely attractive. For complex applications that place utmost importance on code structure clarity and design system independence, Stylus's layered architecture offers the best solution. Regardless of which one is chosen, mastering their latest features will significantly enhance frontend development efficiency and quality.