Sass/SCSS学习日记

Posted by Eric on August 7, 2020

SCSS与传统的CSS相比,有何区别?

Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。

至于上面所提到的变量、混合等等究竟是什么,我们将在后面进行讲解。

SCSS的优势

需要注意的是,与CSS相比,SCSS的优势有很多:

  • 完全兼容过去的CSS3
  • 引入了函数(function)的概念,可以对属性值进行运算
  • 提供了控制指令(Control Directive)等高级的功能
  • 可以对输出的各式进行自定义

语法规则

Sass有两种语法格式:

  • SCSS(Sassy CSS),在这种模式中可以兼容绝大多数的CSS3语法,同时加以扩展,这种文件以.scss作为后缀。