[sass 基礎] .sass 和 .scss 區別

作者：滴滴公共前端——小春

前言：

最近我們開源的小程序腳手架 - miniapps (A useful tool for developing wechat 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_REFERENCE

2、miniapps - DDFE/miniapps