CSS预编译工具（SASS，LESS）

最新推荐文章于 2025-05-28 12:40:22 发布

转载最新推荐文章于 2025-05-28 12:40:22 发布 · 4k 阅读

工具软件专栏收录该内容

4 篇文章

订阅专栏

本文对比了SASS和LESS这两种CSS预处理语言的特点，详细介绍了SASS的使用方法，包括变量、混合器、继承等功能，并推荐了两种常用的编译工具。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SASS和LESS都是专用于CSS的预编译语言，他们2者的功能，操作都是大同小异。LESS稍微简单一些，而SASS有一些比较成熟的框架（如compass），功能强大一些，其中的语法也比较符合一门编程语言的习惯，比如说函数，作用域，进程控制等等。所以，我也是选择的SASS来使用。
一、SASS中文官网
使用：
创建一个SCSS后缀的文件。
变量：
$name : 定义变量
直接调用$name引用变量
嵌套的CSS规则：
导入：@import
处理.SASS文件和.SCSS文件的相互转换
sass和scss是SASS的两种不同的语法，我们一般使用scss语法
注释：
// 不会编译进css文件
/**/ 会编译进css文件
混合器：
@mixin
@include
编译复杂混合属性用（如：font，background）
继承：
@extend
占位选择符：

#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

.notice {
  @extend %extreme;
}

编译为：

#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; 
}

注：继承最好不要继承被包含的子选择器，编译出来后会把包含关系交叉写的非常复杂，可读性很差。
流程控制：
@if
@if - @else
@if - @else if - @else
@for $var from <start> through <end> ---- 包括开始与结束
@for $var from <start> to <end> ---- 包括开始，不包括结束
@each $var in <list>
@while condition {statements;}
函数：
@function fn(args) {
// statements
@return exp;
}

二、Less中文文档

略

SASS和LESS都需要通过编译后成为CSS文件才能使用，编译工具有很多种，下面推荐2种我常用的：

1、Koala

一款可视化的前端预处理器语言图形编译工具，优点是操作比较简便，可以批量操作，轻松设置各种参数。

2、gulp插件

gulp插件是非常多且功能强大的，其中不乏SASS和LESS的编译工具。优点是不需要装新的软件，而且找起来很方便。缺点是需要自己手写参数。