資訊專欄INFORMATION COLUMN
摘要：接上文入門初體驗(yàn)，接下來講講，有兩種文件后綴名，一種是，另一種是。
接上文less入門初體驗(yàn)，接下來講講sass，sass有兩種文件后綴名，一種是.sass，另一種是.scss。前者類似于ruby的語(yǔ)法規(guī)則，沒有花括號(hào)，沒有分號(hào)，具有嚴(yán)格的縮進(jìn)；而后者更貼近于css的語(yǔ)法規(guī)則，易于閱讀，更具語(yǔ)義性，所以本文采用.scss后綴名來編寫sass代碼
編譯1、Ruby:
sass是由Ruby語(yǔ)言編寫的，所以我們可以通過Ruby來編輯sass代碼，首先需要安裝ruby，然后再安裝sass，之后通過sass命令編譯文件
sudo apt install ruby sudo gem install sass sass style.scss style.css
sass提供四個(gè)編譯風(fēng)格的選項(xiàng):
nested：嵌套縮進(jìn)的css代碼，默認(rèn)值
expanded：沒有縮進(jìn)的、擴(kuò)展的css代碼
compact：簡(jiǎn)潔格式的css代碼
compressed：壓縮后的css代碼
生產(chǎn)環(huán)境中一般使用最后一個(gè)
sass --style compressed style.scss style.css變量
變量使用以$開頭(這也是我喜愛sass多于less的原因，誰不喜歡money呢？O(∩_∩)O哈哈~，開個(gè)玩笑)，如果變量需要在字符串中使用，只需要寫在#{}中即可
$color:#999;
$side:left;
$bw:2px;
div {
background-color: $color;
border-#{$side}-width: $bw;
}
編譯后:
div {
background-color: #999;
border-left-width: 2px;
}
Mixin(混合)
實(shí)現(xiàn)代碼塊的重用，使用@mixin定義一個(gè)代碼塊，通過@include就可以調(diào)用此代碼塊
@mixin b_r($radius:5px){
-webkit-border-radius:$radius;
-mz-border-radius:$radius;
border-radius:$radius;
}
div1{
@include b_r();
}
div2{
@include b_r(10px);
}
編譯后:
div1 {
-webkit-border-radius: 5px;
-mz-border-radius: 5px;
border-radius: 5px;
}
div2 {
-webkit-border-radius: 10px;
-mz-border-radius: 10px;
border-radius: 10px;
}
嵌套
與less類似，不多介紹
div {
background-color: #333;
a {
text-decoration: none;
&:hover {
color: red;
}
}
}
編譯后:
div {
background-color: #333;
}
div a {
text-decoration: none;
}
div a:hover {
color: red;
}
運(yùn)算
與less類似，不多介紹
$w:1000px;
body {
width: $w/2;
div {
height: 100px*5;
}
}
編譯后:
body {
width: 500px;
}
body div {
height: 500px;
}
顏色函數(shù)
div {
color: lighten(#ccc, 10%);
background-color: darken(#999, 10%);
}
編譯后:
div {
color: #e6e6e6;
background-color: gray;
}
注釋
/* Hello Sass 我依然在這里 */
div1 {
color: red;
}
// Hello Sass 我不見了
div2 {
color: green;
}
/*! Hello Sass 即使壓縮了，我依然還在 */
div3 {
color: blue;
}
編譯后:
@charset "UTF-8";
/* Hello Sass 我依然在這里 */
div1 {
color: red;
}
div2 {
color: green;
}
/*! Hello Sass 即使壓縮了，我依然還在 */
div3 {
color: blue;
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115437.html
摘要：有眾多的預(yù)處理器，其中比較流行的三個(gè)是，本文就一起來體驗(yàn)編寫代碼官方文檔官網(wǎng)栗子編譯成文件編譯客戶端瀏覽器通過在源代碼中引入文件，用于實(shí)時(shí)對(duì)樣式表文件進(jìn)行編譯并不推薦注意你的樣式文件一定要在引入前先引入，并且需要 css有眾多的預(yù)處理器，其中比較流行的三個(gè)是less、sass、stylus，本文就一起來體驗(yàn)less編寫css代碼官方文檔:http://lesscss.org/官網(wǎng)栗子:...
摘要：安裝寫在里安裝和配置和之前一樣用來處理文件相關(guān)的這個(gè)包括的就比較多，有，后面兩個(gè)是為了寫和服務(wù)。 這兩天學(xué)習(xí)了一些webpack的知識(shí)，loaders+plugins真的很強(qiáng)大！不過配置起來也很復(fù)雜，看了一些文章，自己也寫了項(xiàng)目練手，寫下來加深自己的印象。 首先，非常非常推薦的幾篇文章，初學(xué)者一定要看！http://www.jianshu.com/p/42e1...（標(biāo)題一點(diǎn)也不夸張，...
摘要：預(yù)處理器的技術(shù)現(xiàn)在已經(jīng)很成熟了，而且也出現(xiàn)了各種不同的預(yù)處理器語(yǔ)言，但是呢不可能一一列出，面面俱到，這篇文章呢，主要是介紹一下比較常見的預(yù)處理器語(yǔ)言之一之初體驗(yàn)。 CSS預(yù)處理器定義了一種新的語(yǔ)言，其基本思想是，用一種專門的編程語(yǔ)言，為CSS增加了一些編程的特性，將CSS作為目標(biāo)生成文件，然后開發(fā)者就只要使用這種語(yǔ)言進(jìn)行編碼工作。 簡(jiǎn)單來說，CSS預(yù)處理器用一種專門的編程語(yǔ)言，進(jìn)行We...
摘要：比如傳遞給時(shí)，使用。為所有的及其預(yù)處理文件開啟。在生產(chǎn)環(huán)境下為和使用在多核機(jī)器下會(huì)默認(rèn)開啟。是否使用分割供應(yīng)的包也可以是一個(gè)在包中引入的依賴的顯性的數(shù)組。查閱配置行為。 之前因?yàn)閜arcel的出現(xiàn)，webpack也跟進(jìn)了零配置vue-cli自然也不能落下,cli3.0也升級(jí)到webpack4，并增加許多新特性 安裝并創(chuàng)建一個(gè)項(xiàng)目 支持npm和yarn npm install -g @v...
閱讀 2826·2021-11-24 09:39
閱讀 3397·2021-11-19 09:40
閱讀 2265·2021-11-17 09:33
閱讀 3756·2021-10-08 10:04
閱讀 3047·2021-09-26 09:55
閱讀 1671·2021-09-22 15:26
閱讀 934·2021-09-10 10:51
閱讀 3134·2019-08-30 15:44
