[sass 基础] .sass 和 .scss 区别

作者：滴滴公共前端团队 - 小春

前言：

最近我们开源的小程序脚手架 - miniapps (A useful tool for developing webchat apps)，它其中提供了 css 预编译的能力，支持 sass、stylus 等。

最早我们的版本默认根据用户选择的项目类型来自动创建预编译后缀，比如 sass 文件，我们最早是以 app.sass 来结尾，后来我们改成了 .scss 后缀。

那这两个有什么区别呢？

正文：

我们看一下官方的 2 个实例：

从写法上我们可以直观地看到两个后缀文件的区别：

.scss：

The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning.

In addition, SCSS understands most CSS hacks and vendor-specific syntax, such as IE’s old filter syntax.

This syntax is enhanced with the Sass features described below.

Files using this syntax have the .scss extension.

Sassy CSS

Sass 3 开始的

css3 语法的扩展级

.sass：

受 Haml 简洁启发

没有：括号、分号

使用缩进

所以我们在最新版本的 miniapps 里面推荐使用 .scss 后缀

参考文献：

1、sass-lang.com/documentati…

2、miniapps - github.com/DDFE/miniap…

---

欢迎关注DDFE
GITHUB：github.com/DDFE
微信公众号：微信搜索公众号“DDFE”或扫描下面的二维码