sass使用指南

2021-08-10 20:56:36 字數 1850 閱讀 2088

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樣式時,變得非常混亂和不好維護

不合理的scss編寫結構

看了別人分享的帖子,我學習了下,並在我的專案中實際操作如下:

如果是專案比較小,我們可以在scss資料夾下新建base.scss,module.scss,global.scss

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

global.scss我這裡叫common.scss

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

scss檔案結構

在監控的時候只需要監控global.scss檔案就可以了,我採用gulp來管理的專案

gulpfile.js

關於sass在專案中的更高階的用法,我也在不斷地學習,所以這裡貼上兩篇檔案用sass編寫常用的樣式和sass複雜的寫法,以後再盡量用到自己的專案中,然後再工作中遇到了問題,再來總結經驗豐富這篇文章

Ubuntu apt 使用指南

起初gnu linux系統中只有.tar.gz。使用者必須自己編譯他們想使用的每乙個程式。在debian出現之後,人們認為有必要在系統中新增 一種機制用來管理安裝在計算機上的軟體包。人們將這套系統稱為dpkg。至此著名的 package 首次在gnu linux上出現。不久之後紅帽子也 開始著手建立...

CImageList使用指南

1.綜述 在mfc 中cimagelist 類封裝了 影象列表控制項的功能,影象列表是乙個具有相同大小的 影象 可以是不同 型別 的集合,其主要用於 應用程式中大規模 圖示的儲存。該控制項是不可 見的,通常與其它如 clistbox ccombobox ccomboboxex ctabctrl 以及...

CImageList使用指南

cimagelist使用指南 1.綜述 在 mfc中cimagelist類封裝了影象列表控制項的功能,影象列表是乙個具有相同大小的影象 可以是不同型別 的集合,其主要用於應用程式中大 規模圖示的儲存,該控制項是不可見的。通常與其它如clistbox,ccombobox,ccomboboxex以及ct...