白骑士的CSS教学进阶篇之CSS预处理器 3.3.1 LESS与Sass的基本语法-CSDN博客

本文链接：https://blog.csdn.net/JeremyTC/article/details/141354620

系列目录

CSS预处理器是前端开发中的重要工具，它们通过引入变量、嵌套规则、混入（mixin）等高级功能，使CSS的编写更加高效、灵活和维护性更强。两种流行的CSS预处理器是 LESS 和 Sass。本文将详细介绍 LESS 与 Sass 的基本语法，帮助你掌握这两种强大的工具，提升你的CSS开发效率。

LESS

LESS（Leaner Style Sheets）是一种扩展CSS的语言，它允许使用变量、嵌套、混入和函数等特性。LESS编译器将LESS代码转换成标准的CSS代码，从而在浏览器中使用。

变量

LESS允许使用变量来存储常用的值，如颜色、字体大小等。这使得在多个地方使用相同的值变得更加方便和一致。

示例：

@primary-color: #3498db;
@font-size: 16px;

body {
  color: @primary-color;
  font-size: @font-size;
}

在上面的示例中，‘@primary-color‘ 和 ‘@font-size‘ 是 LESS 变量，用于定义颜色和字体大小。这些变量可以在整个LESS文件中重复使用，确保样式的一致性。

嵌套规则

LESS 允许在 CSS 规则内嵌套其他规则，从而更清晰地表示元素的层级关系。

示例：

nav {
  background-color: @primary-color;

  ul {
    list-style: none;
    padding: 0;

    li {
      display: inline-block;
      margin-right: 10px;

      a {
        color: #fff;
        text-decoration: none;
      }
    }
  }
}

在上面的示例中，‘ul‘ 和 ‘li‘ 的样式嵌套在 ‘nav‘ 内部，使得样式结构更直观。

混入（Mixin）

Mixin 允许将一组 CSS 规则重用到不同的选择器中。LESS 的 mixin 支持参数传递，使得重用变得更加灵活。

示例：

.border-radius(@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

.box {
  .border-radius(10px);
}

在这个示例中，‘.border-radius‘ 是一个 mixin，接受一个参数 ‘@radius‘。‘.box‘ 使用这个 mixin，并传递一个新的半径值，从而应用不同的圆角效果。

函数

LESS 提供了一些内置函数，也允许自定义函数。内置函数可以用于颜色操作、数学计算等。

示例：

@base-color: #333;

.dark-color() {
  color: darken(@base-color, 20%);
}

.text {
  .dark-color();
}

在这个示例中，‘.dark-color()‘ 使用了 ‘darken‘ 函数将基础颜色变暗，并将其应用于 ‘.text‘ 类。

Sass

Sass（Syntactically Awesome Style Sheets）是一种更强大的 CSS 预处理器，分为两种语法：Sass（缩进语法）和 SCSS（类似 CSS 的语法）。SCSS 是 Sass 的扩展，使用大括号 ‘{}‘ 和分号 ‘;‘，与 CSS 的语法更相似。

变量

Sass 的变量定义与 LESS 类似，用于存储颜色、字体、尺寸等值。

示例（SCSS 语法）：

$primary-color: #3498db;
$font-size: 16px;

body {
  color: $primary-color;
  font-size: $font-size;
}

在 SCSS 中，变量以 ‘$‘ 符号开头，与 LESS 的 ‘@‘ 符号不同。

嵌套规则

Sass 同样支持嵌套规则，允许更清晰地描述 CSS 结构。

示例（SCSS 语法）：

nav {
  background-color: $primary-color;

  ul {
    list-style: none;
    padding: 0;

    li {
      display: inline-block;
      margin-right: 10px;

      a {
        color: #fff;
        text-decoration: none;
      }
    }
  }
}

混入（Mixin）

Sass 的 mixin 允许将样式块重用到多个选择器中，并支持参数。

示例（SCSS 语法）：

@mixin border-radius($radius: 5px) {
  border-radius: $radius;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

在 SCSS 中，‘@mixin‘ 用于定义 mixin，‘@include‘ 用于应用 mixin。

函数

Sass 提供了丰富的内置函数，并允许自定义函数。

示例（SCSS 语法）：

$base-color: #333;

@function darken-color($color, $amount) {
  @return darken($color, $amount);
}

.text {
  color: darken-color($base-color, 20%);
}

在这个示例中，自定义函数 ‘darken-color‘ 使用了 Sass 的内置 ‘darken‘ 函数来生成更暗的颜色。

LESS 与 Sass 的比较

虽然 LESS 和 Sass 都是 CSS 预处理器，但它们有一些不同点：

语法：

LESS 语法更简洁，使用 ‘@‘ 符号定义变量，支持嵌套规则。
Sass 提供了两种语法：缩进语法和 SCSS 语法，SCSS 更接近 CSS，使用 ‘$‘ 符号定义变量。

功能：

Sass 提供了更丰富的功能，如嵌套的选择器、函数、循环等。
LESS 支持基本的嵌套、变量、混入和函数，但功能上略逊于 Sass。

社区与生态系统：

Sass 拥有更广泛的社区支持和生态系统，包括多个框架和工具。
LESS 也有广泛的支持，但在功能和社区活跃度方面相对逊色于 Sass。

总结

LESS 和 Sass 都是强大的 CSS 预处理器，它们通过引入变量、嵌套规则、混入和函数等特性，提升了 CSS 的编写效率和可维护性。LESS 语法简洁，适合快速入门，而 Sass 提供了更丰富的功能和灵活性，适合更复杂的开发需求。根据项目需求和个人偏好，选择合适的预处理器，将极大提升前端开发的效率和代码质量。

下一篇：白骑士的CSS教学进阶篇之CSS预处理器 3.3.2 变量与混入