chevron_left

Sass / Scss 实践教程

免费
第 1 回

教程文档

Sass / Scss 实践教程 - Sass 与 Scss

2023年11月13日更新
Sass / Scss 实践教程

Sass 与 Scss

Sass 是什么?

Sass是成熟、稳定、强大的,CSS 扩展语言。

它为开发者提供了CSS中不存在的特性,它提供了变量(variables)嵌套(nested rules)混合(mixins)函数(functions)等功能,并且完全兼容原有的CSS语法。

Sass能够帮助复杂的样式表更有条理,让我们编写CSS代码变得更简单高效,大大节省了开发者的时间。

Sass 与 Scss

SassSCSS其实是同一种东西,我们平时都称之为Sass。简言之可以理解SCSSSass的一个分支版本,它完全兼容Sass之前的功能,两者在语法形式上有些许不同,最主要的特点就是:

  • Sass是靠缩进表示嵌套关系,SCSS是使用大括号。
  • Sass每行后面没有;号,而SCSS每行结束后,需要有;号。

现今开发,一般来说更推荐使用Scss,因为嵌套层级多了以后,Sass难以直观看清嵌套层级。

Sass 语法

...

课程介绍

Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码,易于组织和维护。

SASS 是对 CSS3(层叠样式表)的语法的一种扩充,它可以使用巢状、混入、选择子继承等功能,可以更有效有弹性的写出 Stylesheet。Sass 最后还是会编译出合法的 CSS 让浏览可以使用,也就是说它本身的语法并不太容易让浏览器识别(虽然它和 CSS 的语法非常的像,几乎一样),因为它不是标准的 CSS 格式,在它的语法内部可以使用动态变量等,所以它更像一种极简单的动态语言。

Sass 包括两套语法。最开始的语法叫做“缩进语法”,与 Haml 类似,使用缩进来区分代码块,并且用回车将不同规则分隔开。

而较新的语法叫做“SCSS”,使用和 CSS 一样的块语法,即使用大括号将不同的规则分开,使用分号将具体的样式分开。通常情况下,这两套语法通过.sass 和.scss 两个文件扩展名区分开。