首页

Sass 简介（sass使用教程）

myzbx 2025-03-25 15:36 108 浏览

什么是Sass

Sass 是 Syntactically Awesome Stylesheets 的简写，是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。

Sass 是一个将脚本解析成 CSS 的脚本语言（SassScript），也是一款 CSS 预处理器，它减少了 CSS 的重复，也因此节省了时间。Sass 是最早的 CSS 预处理语言，有比 Less 更强大的功能。Sass 扩展了 CSS3，增加了规则、变量、混入选择器、继承等特性。

什么是 CSS 预处理器

我们知道了 Sass 是 CSS 的预处理器，那么什么是预处理器呢？CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。也就是说，CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题。

Sass的特色功能

Sass 完全兼容所有版本的 CSS。
Sass 拥有比其他任何 CSS 扩展语言更多的功能和特性，例如增加了变量、嵌套、混合等功能。
通过函数进行颜色值与属性值的运算。
提供了控制指令（control directives）。
自定义输出格式。

语法格式

Sass 语言有两种语法格式：

最开始的语法叫做缩进语法（Indented Sass），通常简称为Sass，是一种简化格式。它使用缩进来代替花括号 {} ，表示属性属于某个选择器。用换行代替分号分隔属性。
另一种语法是 SCSS（Sassy CSS），这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。

这两种语法格式，任何一种格式都可以直接通过 @import 导入到另一种格式中使用，或者通过 sass-convert 命令行工具转换成另一种格式：

// Sass转为SCSS
$ sass-convert style.sass style.scss

// SCSS转为Sass
$ sass-convert style.scss style.sass

Sass特性

变量：Sass 中支持定义变量，变量以美元符号 $ 作为开头，然后通过冒号 : 赋值。变量支持四种数据类型，分别为字符串、数值、布尔类型、颜色值。
嵌套（Nesting）：SCSS 支持嵌套并且支持代码块的嵌套，它可以清晰的表示元素之间的关系。
导入（@import）：Sass 支持 @import 指令，该指令允许我们将一个文件的内容导入到另一个文件中。该指令包含 CSS 文件，因此不需要额外的调用 HTTP，而由于性能问题，CSS 指令每次调用都会创建一个额外的HTTP，在这里 Sass 就没有这样的问题。
混入（mixin）：Sass 中可以使用 @mixin 来声明混合，混合中包含一段合法 Sass 代码，类似于 C 语言的宏定义，解释器在调用混合时会将它扩展成它所包含的完整 Sass 代码，可以有效的减少代码重复，从而写出的代码更加干净简洁。
继承（@extend）：该指令允许我们将一组 CSS 属性从一个选择器共享到另一个选择器。

Sass 简介

上一篇：鲜为人知的Win10改进:F12开发人员工具
下一篇：Sass(Scss)、Less的区别与选择 + 基本使用

Sass 简介（sass使用教程）

什么是Sass

什么是 CSS 预处理器

Sass的特色功能

语法格式

Sass特性

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

说下你的vue项目的目录结构，该怎么划分?

8.7k star，一款超炫酷的动态可视化大屏项目

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿