[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”或掃描下面的二維碼