資訊專欄INFORMATION COLUMN
摘要：或中輸入命令行編譯步驟如下舉例在盤中新建一個(gè)總文件夾，比如文件夾，其中在該文件夾下面建立等文件夾。文件夾下的啟動(dòng)根據(jù)步驟命令行輸入得到結(jié)構(gòu)如下圖命令行沒(méi)有清除緩存得到結(jié)構(gòu)如下圖如若文件下面有多個(gè)文件，要指定某一個(gè)文件被編譯，需要指定文件。
Ruby（或cmd中）輸入命令行編譯sass步驟如下：
舉例：
1、在F盤中新建一個(gè)總文件夾，比如test文件夾，其中在該文件夾下面建立html、images、js、sass等文件夾。
2、在sass文件夾中創(chuàng)建要使用到的sass文件，或者scss文件。common.scss、reset.scss、config.scss等一些公共文件以及項(xiàng)目中需要使用到的各個(gè)文件。（當(dāng)然這里的文件也可以分別放在不同的文件夾中，不過(guò)必須都是sass文件夾的子目錄。）
3、sass文件夾下的common.scss：
div{
width: 300px;
height: 300px;
border: 1px solid #000;
background-color: #333;
p{
width: 200px;
height: 200px;
background-color: #666;
a{
display: inline-block;
width: 100px;
height: 100px;
background-color: #999;
}
}
}
?
4、 啟動(dòng)ruby
?
?
5、根據(jù)步驟命令行輸入
?
?
得到結(jié)構(gòu)如下圖
?
6、命令行沒(méi)有清除緩存
?
得到結(jié)構(gòu)如下圖
?
?
7、如若sass文件下面有多個(gè)sass文件，要指定某一個(gè)文件被編譯，需要指定文件。其中首先找到sass文件這個(gè)目錄，然后將sass文件夾下的某一個(gè)文件轉(zhuǎn)化為css文件夾下的某一個(gè)。
?
得到結(jié)構(gòu)如下圖
?
發(fā)現(xiàn)的問(wèn)題
a．在建立的文件夾下必須建立了sass文件夾，ruby需要識(shí)別sass文件夾（我試過(guò)直接在沒(méi)有sass文件夾下進(jìn)行編譯，失敗了）；
b．--no-cache是清除緩存，--watch是監(jiān)聽(tīng)指令，--style是樣式，compressed指令可以壓縮css文件。
SASS提供四個(gè)編譯風(fēng)格的選項(xiàng)：
* nested：嵌套縮進(jìn)的css代碼，它是默認(rèn)值。
* expanded：沒(méi)有縮進(jìn)的、擴(kuò)展的css代碼。
* compact：簡(jiǎn)潔格式的css代碼。
* compressed：壓縮后的css代碼。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1826.html
摘要：本文僅適用于系統(tǒng)。安裝每個(gè)流行的平臺(tái)都有多種工具可用于安裝平臺(tái)，可以使用第三方工具如或或使用系統(tǒng)中的包管理系統(tǒng)。平臺(tái)，可以使用。安裝過(guò)程按照提示來(lái)即可安裝假定已經(jīng)安裝好了運(yùn)行進(jìn)入命令提示符。 本文僅適用于 Windows 系統(tǒng)。 什么是 Sass Sass---- CSS 擴(kuò)展語(yǔ)言或 CSS 預(yù)處理器，是一種 CSS 的開(kāi)發(fā)工具，提供了許多便利的寫法，節(jié)省了設(shè)計(jì)者的時(shí)間，使得 CSS ...
摘要：語(yǔ)法使用它帶來(lái)的好處，就不再這里做介紹了，主要看怎么在里配置自動(dòng)編譯。因?yàn)閲?guó)內(nèi)網(wǎng)絡(luò)的問(wèn)題導(dǎo)致源間歇性中斷因此我們需要更換源。也就是說(shuō)，任何標(biāo)準(zhǔn)的樣式表都是具有相同語(yǔ)義的有效的文件。參考文檔官網(wǎng)設(shè)置自動(dòng)編譯及參數(shù)配置 sass語(yǔ)法、使用它帶來(lái)的好處，就不再這里做介紹了，主要看怎么在webstorm里配置自動(dòng)編譯。 sass編譯是需要Ruby環(huán)境的，可以到這里去下載? : ?https:/...
摘要：不過(guò)必須要先安裝，然后再安裝。淘寶鏡像安裝由于國(guó)內(nèi)網(wǎng)絡(luò)原因你懂的，導(dǎo)致存放在上面的資源文件間歇性連接失敗。嵌套可以進(jìn)行選擇器的嵌套，表示層級(jí)關(guān)系。重要注釋管理項(xiàng)目文件結(jié)構(gòu)預(yù)處理器的特點(diǎn)之一是可以把你的代碼分割成很多文件，而且不會(huì)影響性能。 Sass 是什么？ showImg(https://segmentfault.com/img/bVqyKF); Sass 是 Syntactical...
摘要：未編譯樣式多繼承鏈?zhǔn)嚼^承占位選擇器編譯后樣式中使用聲明混合，可以傳遞參數(shù)，參數(shù)名以符號(hào)開(kāi)始，多個(gè)參數(shù)以逗號(hào)分開(kāi)，也可以給參數(shù)設(shè)置默認(rèn)值。 初識(shí)Sass SASS簡(jiǎn)介 sass是一種css預(yù)處理器，用專門的編程語(yǔ)言，進(jìn)行網(wǎng)頁(yè)樣式設(shè)計(jì)，然后再編譯成正常的CSS文件。Sass是CSS3的擴(kuò)展，它增加了嵌套規(guī)則，變量，mixins，選擇器繼承等等。Sass生成格式良好的CSS，使樣式表更易于組...
閱讀 3186·2021-09-10 10:51
閱讀 3371·2021-08-31 09:38
閱讀 1660·2019-08-30 15:54
閱讀 3147·2019-08-29 17:22
閱讀 3225·2019-08-26 13:53
閱讀 1978·2019-08-26 11:59
閱讀 3294·2019-08-26 11:37
閱讀 3324·2019-08-26 10:47
