內容導讀
前言：Sass為web前端開發而生，它解決了直接進行css編寫時權重難以控制，嵌套層級多導致代碼編寫不方便的問題。並且加入了變量定義，循環，判斷等類似程式語言的代碼模式。極大的提高了編寫樣式的效率。
前言：Sass為web前端開發而生，它解決了直接進行css編寫時權重難以控制，嵌套層級多導致代碼編寫不方便的問題。並且加入了變量定義，循環，判斷等類似程式語言的代碼模式。極大的提高了編寫樣式的效率。
sass 配置及基礎語法
首先去node官網[ http://nodejs.cn/download/ ]，根據不同系統選擇不同版本，下載之後進行安裝，node -v查看node版本
image.png全局安裝 npm install node-sass -g新建文件夾 npm init （初始化項目）初始化好了後，該空文件夾就會多一個package.json 的文件
image.png
image.png
在文件夾中新建個a.scss
image.pngnpm run sass a.scss b.css 結果如下
image.pngsass 語法高亮插件
在sublime 裡按住ctrl +shift+p，出現彈窗，選擇install Package，等待一會，會再次出現一個彈窗，輸入sass，選擇sass，按住回車即可（我已安裝sass，所以不會在出現）
image.png
image.png
sass與css同步
npm-sass --watch (sass文件名) （css文件名）基礎語法
sass 提供了 & 用於引用父選擇器。
image.png群組選擇器
image.pngsass聲明變量以$開頭
image.png定義屬性時，其寫法為#{ 定義的屬性變量 }
image.png
全局變量和局部變量
image.png目前還沒有發現sass在sublime裡面提示功能，如有知道的，可在評論區指點，謝謝