透析主流CSS预处理器的区别

Sass 和 Less 是两种主流的 CSS 预处理器（CSS Preprocessor），它们通过扩展原生 CSS 的语法，提供了变量、嵌套、混合（Mixins）、函数等高级功能，帮助开发者编写更高效、可维护的样式代码。以下是它们的详细介绍：

一、Sass（Syntactically Awesome Style Sheets）

1. 基本特性

• 语法形式：

  • SCSS（Sassy CSS）：兼容原生 CSS 语法，文件扩展名为 .scss（主流使用）。

  • 缩进语法（Indented Syntax）：省略大括号和分号，依赖缩进（类似 Python），文件扩展名为 .sass（较少使用）。

• 编译方式：

  • 需要将 .scss 或 .sass 文件编译为原生 .css。

  • 编译工具：node-sass（已弃用）、Dart Sass（官方推荐）、Webpack/Vite 插件等。

2. 核心功能

(1) 变量（Variables）

$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;

body {
  color: $primary-color;
  font-family: $font-stack;
}

(2) 嵌套（Nesting）

.nav {
  background: #333;
  ul {
    padding: 0;
    li {
      display: inline-block;
      &:hover { background: #555; } // & 表示父选择器
    }
  }
}

(3) 混合（Mixins）

可重复使用的代码块，支持参数传递：

@mixin flex-center($direction: row) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: $direction;
}

.container {
  @include flex-center(column);
}

(4) 继承（Extend）

复用已有样式：

.button-base {
  padding: 10px 20px;
  border: none;
}

.submit-button {
  @extend .button-base;
  background: green;
}

(5) 条件与循环

// 条件语句
@if $theme == 'dark' {
  background: #000;
} @else {
  background: #fff;
}

// 循环
@for $i from 1 through 3 {
  .col-#{$i} { width: 100% / $i; }
}

// 遍历列表
$colors: red, green, blue;
@each $color in $colors {
  .icon-#{$color} { fill: $color; }
}

(6) 模块化（Modules）

通过 @use 或 @import 引入其他文件：

// _variables.scss
$primary-color: #3498db;

// main.scss
@use 'variables';
.header { color: variables.$primary-color; }

(7) 颜色函数

$color: #3498db;
.dark-bg { background: darken($color, 20%); }
.light-text { color: lighten($color, 30%); }

二、Less（Leaner Style Sheets）

1. 基本特性

• 语法形式：与原生 CSS 高度兼容，文件扩展名为 .less。

• 编译方式：

  • 通过 lessc（Node.js 工具）或 Webpack 插件编译为 CSS。

  • 支持浏览器端直接编译（开发环境使用）。

2. 核心功能

(1) 变量（Variables）

@primary-color: #3498db;
@font-stack: Helvetica, sans-serif;

body {
  color: @primary-color;
  font-family: @font-stack;
}

(2) 嵌套（Nesting）

.nav {
  background: #333;
  ul {
    padding: 0;
    li {
      display: inline-block;
      &:hover { background: #555; }
    }
  }
}

(3) 混合（Mixins）

.flex-center(@direction: row) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: @direction;
}

.container {
  .flex-center(column);
}

(4) 继承（模拟）

Less 通过混合模拟继承：

.button-base() {
  padding: 10px 20px;
  border: none;
}

.submit-button {
  .button-base();
  background: green;
}

(5) 函数与运算

@base-margin: 10px;
.box { 
  margin: @base-margin * 2; 
}

// 内置函数
@color: #3498db;
.dark-bg { background: darken(@color, 20%); }

(6) 条件与循环（通过递归实现）

// 条件语句
.mixin(@condition) when (@condition = true) {
  background: #000;
}

// 循环
.loop(@counter) when (@counter > 0) {
  .col-@{counter} { width: 100% / @counter; }
  .loop(@counter - 1);
}
.loop(3);

三、Sass vs Less 对比

四、适用场景

1. 选择 Sass：

   • 需要复杂逻辑（如循环、条件分支）。

   • 大型项目或团队协作，强调模块化。

   • 与现代框架（如 React、Vue）深度集成。

2. 选择 Less：

   • 项目轻量，快速上手。

   • 需要与 Bootstrap 配合使用。

   • 浏览器端实时编译（开发环境）。