sass用法總結

2022-07-28 11:36:28 字數 1781 閱讀 9748

一、sass安裝

(1)移除原有的ruby源位址

gem sources --remove 

(2)新增可用的ruby源位址

gem sources -a 

(3) 安裝sass

gem install sass

(4)sublime支援scss檔案高亮顯示

借助package control安裝sass外掛程式,之後set syntax為sass即可。

(5)防止sass中文注釋亂碼

後續寫.scss**過程中中文注釋會有亂碼的情況,找到engine.rb檔案(一般位於ruby22\lib\ruby\gems\2.2.0\gems\sass-3.4.18\lib\sass目錄下面),在所有的require後面新增如下**:

至此,sass環境部署完成

二、編繹sass檔案

1.切換到.scss檔案所在目錄

命令列下切換到**資料夾目錄(如z:\),假設有檔案test.scss檔案,裡面內容如下:(sass完全支援css語法)

h1h2
2.編譯scss檔案為css檔案執行命令:sass --style compressed test.scss test.css,即可生成壓縮版的css檔案,並且命名為test.css。幾點說明:

(1)--style 後面可以有四個引數可選,分別為

巢狀輸出方式 nested

展開輸出方式 expanded

緊湊輸出方式 compact

壓縮輸出方式 compressed

(2)test.scss和test.css檔案目錄可以自定義,例如把z盤sass目錄下的test.scss檔案編譯為壓縮版的檔案,並放置在z盤css目錄下,那麼命令即:sass --style compressed z:\sass\test.scss z:\css\test.css

(3)開發過程中,只需要修改scss檔案,然後編譯;前端頁面只需要引用相應的css檔案即可。

3.偵聽檔案和資料夾

在實際編譯過程中,你會發現上面的命令,只能一次性編譯。每次個性儲存「.scss」檔案之後,都得重新執行一次這樣的命令。如此操作太麻煩,其實還有一種方法,就是在編譯 sass 時,開啟「watch」功能,這樣只要你的**進行任保修改,都能自動監測到**的變化,並且給你直接編譯出來:

sass --watch 《要編譯的sass檔案路徑》/style.scss:《要輸出css檔案路徑》/style.css
watch 舉例:來看乙個簡單的示例,假設我本地有乙個專案,我要把專案中「bootstrap.scss」編譯出「bootstrap.css」檔案,並且將編譯出來的檔案放在「css」資料夾中,我就可以在我的命令終端中執行:

sass --watch

sass/bootstrap.scss:css/bootstrap.css

sass用法總結(持續更新中)

官網 1,巢狀規則 1.1普通巢狀 sass 允許將一套 css 樣式巢狀進另一套樣式中,內層的樣式將它外層的選擇器作為父選擇器 1.2父選擇器 hover 在巢狀 css 規則時,有時也需要直接使用巢狀外層的父選擇器,例如,當給某個元素設定hover樣式時,或者當body元素有某個 classna...

sass基本用法

本文都是以.scss為準 普通變數 sass的變數必須是以 開頭的,後面直接跟變數名 fontsize 12px body 如果變數需要預設值,在變數值的後面加上預設值的宣告 變數的預設值的宣告方式是變數值後加上 default 如下 baselineheight 2 baselineheight ...

關於Sass用法

sass是css預處理器,sass是一種易於使用的樣式語言,可幫助減少傳統css的許多重複性和可維護性挑戰。學習sass可以編寫出可重複使用的樣式效,也是在工作和面試要求中不可或缺的一項技能了。sass使您可以使用css中不存在的功能,例如變數,巢狀規則,混合,匯入,繼承,內建函式和其他內容。支援 ...