主頁 > 知識庫 > ruby環(huán)境中自動編譯sass教程

ruby環(huán)境中自動編譯sass教程

熱門標(biāo)簽:天津外呼系統(tǒng)怎么收費(fèi) 巫師3地圖標(biāo)注魔力之所 淮安自動外呼系統(tǒng)供應(yīng)商 中牟外呼系統(tǒng)違法嗎 征服者企業(yè)地圖標(biāo)注 AI電銷機(jī)器人 線路 外呼線路從哪里出來的 柯城手機(jī)地圖如何做地圖標(biāo)注 漯河電銷

sass為CSS的賦予了動態(tài)語言的特性,如變量、繼承、運(yùn)算、函數(shù)等,更方便CSS的編寫和維護(hù)!

sass安裝

因為sass依賴于ruby環(huán)境,所以裝sass之前先確認(rèn)裝了ruby。安裝ruby https://www.jb51.net/article/61501.htm

安裝完ruby之后,在開始菜單中,找到剛才我們安裝的ruby,打開Start Command Prompt with Ruby

然后直接在命令行中輸入

復(fù)制代碼 代碼如下:

gem install sass

按回車鍵確認(rèn),等待一段時間就會提示你sass安裝成功。

命令檢測安裝是夠完成:

如果要安裝beta版本的,可以在命令行中輸入

復(fù)制代碼 代碼如下:

gem install sass --pre

使用sass

SASS文件就是普通的文本文件,里面可以直接使用CSS語法。文件后綴名是.scss,意思為Sassy CSS。

下面的命令,可以在屏幕上顯示.scss文件轉(zhuǎn)化的css代碼。(假設(shè)文件名為test。)

復(fù)制代碼 代碼如下:

sass test.scss

如果要將顯示結(jié)果保存成文件,后面再跟一個.css文件名。

復(fù)制代碼 代碼如下:

sass test.scss test.css

SASS提供四個編譯風(fēng)格的選項:

復(fù)制代碼 代碼如下:

* nested:嵌套縮進(jìn)的css代碼,它是默認(rèn)值。
* expanded:沒有縮進(jìn)的、擴(kuò)展的css代碼。
* compact:簡潔格式的css代碼。
* compressed:壓縮后的css代碼。

生產(chǎn)環(huán)境當(dāng)中,一般使用最后一個選項。

復(fù)制代碼 代碼如下:

sass --style compressed test.sass test.css

你也可以讓SASS監(jiān)聽某個文件或目錄,一旦源文件有變動,就自動生成編譯后的版本。

復(fù)制代碼 代碼如下:

// 監(jiān)聽文件
sass --watch input.scss:output.css
// 監(jiān)聽文件夾
sass --watch app/sass:public/stylesheets

標(biāo)簽:張家界 遼寧 公主嶺 梧州 永州 荊門 三沙 普洱

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《ruby環(huán)境中自動編譯sass教程》,本文關(guān)鍵詞  ruby,環(huán)境,中,自動,編譯,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《ruby環(huán)境中自動編譯sass教程》相關(guān)的同類信息!
  • 本頁收集關(guān)于ruby環(huán)境中自動編譯sass教程的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章