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