现在的位置: 首页 > Sass 教程 > 正文

Sass 教程

2022年01月12日 Sass 教程 ⁄ 共 887字 ⁄ 字号 暂无评论
博客主机

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

 

Sass 是一个 CSS 预处理器。

 

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

 

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

 

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

 

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

 

Sass 文件后缀为 .scss。

 

Sass 实例

/* 定义变量与值 */

$bgcolor: lightblue;

$textcolor: darkblue;

$fontsize: 18px;

 

/* 使用变量 */

body {

background-color: $bgcolor;

color: $textcolor;

font-size: $fontsize;

}

 

阅读本教程前,您需要了解的知识:

阅读本教程,您需要有以下基础:

 

HTML 教程

CSS 教程

为什么使用 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 代码。

Wopus问答

【上篇】
【下篇】

Wopus问答

给我留言

留言无头像?


×