Skip to main content

Sass

Sass​

Sass最早是由Hampton Catlin于2006年开发的，并且于2007年首次发布。

在最初的时候，Sass采用的是缩进敏感语法，文件的扩展名为.sass，编写完毕之后，需要通过基于Ruby的Ruby Sass编译器编译为普通的CSS。因此在最早期的时候，如果你想要使用Sass，需要安装Ruby环境。

在2006~2010左右，当时Web服务器端开发就特别流行使用基于Ruby的Web框架Ruby on Rails，像早期的Github、Twitter一开始都是使用的Ruby。

到了2009年的时候， Less的出现给Sass带来竞争压力，因为Less是基于原生CSS语法进行扩展，使用者没有什么学习压力，于是Natalie Weizenbaum和Chris Eppstein为Sass引入了新的类CSS语法，也是基于原生的CSS进行语法扩展，文件的后缀名为.scss。虽然文件的后缀以及语法更新了，但是功能上面仍然支持之前Sass所支持的所有功能，加上Sass本身插件以及社区就比Less强大，因此Sass重新变为了主流。

$primary-color: #4CAF50

.container
  background-color: $primary-color
  padding: 20px

  .title
    font-size: 24px
    color: white

编译器​

随着社区的发展和技术的进步，Sass已经不在局限于Ruby，目前已经有多种语言实现了Sass的编译器：

  • Dart Sass：由Sass官方团队维护，使用Dart语言编写。它是目前推荐的Sass编译器，因为它是最新的、功能最全的实现。
  • Lib Sass：使用C/C++编写的Sass编译器，它的性能优于Ruby版本。LibSass有多个绑定，例如Node Sass和SassC。
  • Ruby Sass：最早的Rub 实现，目前已被官方废弃，并建议迁移到Dart Sass。

官方推荐使用Dart Sass来作为Sass的编译器，并且在npm上面发布了Dart Sass的包，直接通过npm安装即可。

yarn add sass -D
const sass = require('sass')
const path = require('path')
const fs = require('fs')

const scssPath = path.resolve('./index.scss')
const cssDir = 'dist'
const cssPath = path.resolve(cssDir, 'index.css')

const result = sass.compile(scssPath)

if (!fs.existsSync(cssDir)) {
    fs.mkdirSync(cssDir)
}

fs.writeFileSync(cssPath, result.css)

插件​

除了手动调用API的方式编译，早期的时候出现了一个专门做Sass编译的GUI工具，叫做考拉，但是现在已使用不多。

现在随着VSCode这个集大成的IDE的出现，可以直接安装Sass相关的插件来做编译操作，例如scss-to-css。

Last updated on