如何使用scss sass

2022-05-12 20:56:01 字數 3298 閱讀 3599

歡迎加入前端***來py：749539640

廢話不多說，直接進入正題；

sass基於ruby語言開發而成，因此安裝sass前需要安裝ruby

。（注:mac下自帶ruby無需在安裝ruby!）

並安裝。安裝過程中請注意勾選add ruby executables to your path新增到系統環境變數。如下圖：

安裝完成後需測試安裝有沒有成功,執行cmd輸入以下命令：

ruby -v


//如安裝成功會列印


ruby 


2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]
如上已經安裝成功。但因為國內網路的問題導致gem源間歇性中斷因此我們需要更換gem源。（使用**的gem源如下：

//


1.刪除原gem源


//2.新增國內**源


//3.列印是否替換成功


gem sources -l


//4.更換成功後列印如下
ruby自帶乙個叫做rubygems的系統，用來安裝基於ruby的軟體。我們可以使用這個系統來 輕鬆地安裝sass和compass。要安裝最新版本的sass和compass，你需要輸入下面的命令：

//


安裝如下(如mac安裝遇到許可權問題需加 sudo gem install sass)


gem install sass


gem install compass
在每乙個安裝過程中，你都會看到如下輸出：

fetching: sass-3.x.x.gem (100%)


successfully installed sass-3


.x.x


parsing documentation 


for sass-3


.x.x


installing ri documentation 


for sass-3


.x.x


done installing documentation 


for sass after 6


secon


1 gem installed
安裝完成之後，你應該通過執行下面的命令來確認應用已經正確地安裝到了電腦中：

如下sass常用更新、檢視版本、sass命令幫助等命令：

//


更新sass


gem update sass


//檢視sass版本


sass -v


//檢視sass幫助


sass -h
sass編譯有很多種方式，如命令列編譯模式、sublime外掛程式sass-build、編譯軟體koala、前端自動化軟體codekit、grunt打造前端自動化工作流grunt-sass、gulp打造前端自動化工作流gulp-ruby-sass等。

新建乙個input.scss的檔案裡面寫入scss語句==>比如我要轉換為output.css

==>執行sass input.scss output.css

//


單檔案轉換命令


sass input.scss output.css


//單檔案監聽命令


sass --watch input.scss:output.css


//命令列編譯sass有配置選項，如編譯過後css排版、生成除錯map、開啟debug資訊等，可通過使用命令sass -v檢視詳細。我們一般常用兩種--style``--sourcemap。


//編譯格式


sass --watch input.scss:output.css --style compact


//編譯新增除錯map


sass --watch input.scss:output.css --sourcemap


//選擇編譯格式並新增除錯map


sass --watch input.scss:output.css --style expanded --sourcemap


//開啟debug資訊


sass --watch input.scss:output.css --debug-info



//


未編譯樣式


.box 


}

/*


命令列內容


*/sass style.scss:style.css --style nested /*


編譯過後樣式


*/.box 


.box-title 



/*


命令列內容


*/sass style.scss:style.css --style expanded


/*編譯過後樣式


*/.box 


.box-title 



/*


命令列內容


*/sass style.scss:style.css --style compact


/*編譯過後樣式


*/.box 


.box-title 



/*


命令列內容


*/sass style.scss:style.css --style compressed


/*編譯過後樣式


*/.box.box-title

SCSS SASS 的基本使用（基本指令）

寫在前面 自己平常使用的都是less，隨著學習的進展，scss的重要性越來越大。將scss檔案編譯為css檔案 4 將css檔案引入，最終參考效果 在scss中，提供兩個指令可以實現實時監聽原始檔的變動，實時生成編輯檔案 watch a file sass watch input.scss outp...

如何使用 滅火器如何使用

滅火器的種類不同使用方法也不相同，下面單獨針對乾粉滅火器 泡沫滅火器和二氧化碳滅火器使用方法說明。一 乾粉滅火器的使用方法 適用範圍 適用於撲救各種易燃 可燃液體和易燃 可燃氣體火災，以及電器裝置火災。1 右手拖著壓把，左手拖著滅火器底部，輕輕取下滅火器。2 右手提著滅火器到現場。3 除掉鉛封。4 ...

如何使用 如何正確使用定速巡航

現在隨著造車技術的不斷創新和改進，越來越多的高科技功能都應用到了汽車上，不僅提供了實用性，也讓我們享受到了科技的快感。今天我們就聊一聊一項可以實現車輛自動駕駛的功能 定速巡航。定速巡航 cruise control system 簡稱ccs，簡單的理解就是給車子設定乙個速度值，駕駛員只需要掌握方向，...