What is Sass?(Sass是什么?)

  • Sass 全称 Syntactically Awesome Stylesheet (语法完全绝妙的样式)
  • Sass 是 CSS 的扩展 (Sass is an extension to CSS)
  • Sass 是一种 CSS 预处理器 (Sass is a CSS pre-processor)
  • Sass 与所有版本的 CSS 完全兼容 (Sass is completely compatible with all versions of CSS)
  • Sass 通过减少 CSS 的重复代码,来节省时间 (Sass reduces repetition of CSS and therefore saves time)
  • Sass 由 Hampton Catlin 设计,Natalie Weizenbaum 在2006年开发 (Sass was designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006)
  • Sass 是完全免费下载和使用的 (Sass is free to download and use)

为什么要使用 Sass? (Why Use Sass?)

  • 样式表变得越来越大,越来越复杂,也越来越难维护。这时一个 CSS 预处理器就可以提供帮助。(Stylesheets are getting larger, more complex, and harder to maintain. This is where a CSS pre-processor can help.)
  • Sass 允许你使用 CSS 中不存在的特性,像变量,嵌套规则,混入,导入,继承,内置函数等等。(Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff.)

How Does Sass Work? (Sass是如何工作的?)

A browser does not understand Sass code. Therefore, you will need a Sass pre-processor to convert Sass code into standard CSS.


This process is called transpiling. So, you need to give a transpiler (some kind of program) some Sass code and then get some CSS code back.


Transpiling is a term for taking a source code written in one language and transform/translate it into another language. Transpilling是指将用一种语言编写的源代码转换/翻译成另一种语言。


Transpiling Sass to CSS (将Sass转换为CSS)

Sass code needs to be transpiled into CSS code in order to be used in websites.


This process is called transpiling.


Transpiling converts the Sass syntax into regular CSS syntax.


To transpile Sass, you need a transpiler program:


The most popular transpiler for Sass is sass which is part of the Dart Sass project.


Other options include node-sass and ruby-sass.


The transpiler takes Sass code as input and generates CSS code as output that can be used directly in projects.


For example:


// Input
$color: red;

.box {
  color: $color;


/* Output */
.box {
    color: red;