分享

带你进入 Sass 世界

 丰千郎 2021-12-09

Sass 教程 Sass (英文全称:Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。

Sass 是一个 CSS 预处理器。

Sass 是 CSS 扩展语言,可以帮助我们减少 CSS 重复的代码,节省开发时间。

Sass 完全兼容所有版本的 CSS。

Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承、内置函数等等特性。

Sass 生成良好格式化的 CSS 代码,易于组织和维护。

Sass 文件后缀为 .scss。

Sass 实例


阅读本教程前,您需要了解的知识: 阅读本教程,您需要有以下基础:


为什么使用 Sass? CSS 本身语法不够强大,导致重复编写一些代码,无法实现复用,而且在代码也不方便维护。

Sass 引入合理的样式复用机制,增加了规则、变量、混入、选择器、继承、内置函数等等特性。

我们可以举个例子,我们会在 CSS 中重复使用很多次十六进制的颜色代码,当有了变量之后,如果要改变颜色代码,只要修改变量的值就好了:

Sass 实例

/* 定义颜色变量,要修改颜色值,修改这里就可以了 */$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;/* 使用变量 */.main-header {  background-color: $primary_1;
}.menu-left {  background-color: $primary_2;
}.menu-right {  background-color: $primary_3;
}

Sass 是如何工作的?

浏览器并不支持 Sass 代码。因此,你需要使用一个 Sass 预处理器将 Sass 代码转换为 CSS 代码。

Sass 安装

我们可以使用 npm(NPM 使用介绍)来安装 Sass。也可以使用 Windows 的包管理器 Chocolatey 来安装。具体安装方式可以参考 Sass 安装详细介绍

关于Sass具体的语法,可以参考下面的文章

    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多