[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 后缀

参考文献：

一、sass-lang.com/documentati…

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

---

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