sass和less一樣都是css預處理器，Sass 有兩種語法,擴展名分別為.sass和.scss 具體的區別可以看我分享的另外一篇文章gulp在工作中的應用這個需要先安裝ruby然后再安裝sass，然后根據其提供的命令來編譯sass，具體例子可以參考鏈接1和鏈接2，但是我使用gulp-sass來編譯sass，所以上述步驟可以直接省去

關于它的用法別人已經寫了很多例子了，這里記錄下我工作時遇到的問題

1.在使用@mixin時應該注意的問題

minxin用來定義重復使用的代碼塊，就比如這樣

在調用時使用@include具體例子如下：

但是我們需要注意@include定義好的Mixins類似于css中的粘貼復制，會產生很多重復的代碼，導致css文件臃腫，所以Mixins只適合那種需要通過傳遞參數來快速創建樣式的情況，sass可以幫助我們處理臃腫的兼容樣式

如果復用的代碼塊不用傳遞任何參數時，我們可以采用繼承的寫法

2.sass繼承寫法

3.采用繼承和minxins混合的方式往往能夠達到最佳的效果

經過預處理以后css樣式如下：

4.合理的安排自己的sass文件目錄

一個不好的例子，比如我編寫的sass，所有的變量，代碼塊，以及函數都放在一個sass文件里，這樣當需要編寫很多css樣式時，變得非?；靵y和不好維護

不合理的scss編寫結構

看了別人分享的帖子，我學習了下，并在我的項目中實際操作如下：

如果是項目比較小，我們可以在scss文件夾下新建base.scss，module.scss，global.scss

base.scss

在編寫base.scss的時候，記得一定要有相應規范，說明白變量的含義，如上圖我覺得就是一個好的寫法

module.scss

global.scss我這里叫common.scss

但是當我們的項目比較大時，就要對此進行合理的規劃，我安排的項目結構如下

scss文件結構

在監控的時候只需要監控global.scss文件就可以了，我采用gulp來管理的項目

gulpfile.js

關于sass在項目中的更高級的用法，我也在不斷地學習，所以這里貼上兩篇文件用sass編寫常用的樣式和sass復雜的寫法，以后再盡量用到自己的項目中，然后再工作中遇到了問題，再來總結經驗豐富這篇文章

總結

以上是生活随笔為你收集整理的sass使用指南的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。