sass入門初體驗

aisuhua 發布于2019-08-30 13:16 / 1490人閱讀

摘要：接上文入門初體驗，接下來講講，有兩種文件后綴名，一種是，另一種是。

接上文less入門初體驗，接下來講講sass，sass有兩種文件后綴名，一種是.sass，另一種是.scss。前者類似于ruby的語法規則，沒有花括號，沒有分號，具有嚴格的縮進；而后者更貼近于css的語法規則，易于閱讀，更具語義性，所以本文采用.scss后綴名來編寫sass代碼

編譯

1、Ruby:
sass是由Ruby語言編寫的，所以我們可以通過Ruby來編輯sass代碼，首先需要安裝ruby，然后再安裝sass，之后通過sass命令編譯文件

sudo apt install ruby
sudo gem install sass
sass style.scss style.css

sass提供四個編譯風格的選項:

nested：嵌套縮進的css代碼，默認值
expanded：沒有縮進的、擴展的css代碼
compact：簡潔格式的css代碼
compressed：壓縮后的css代碼

生產環境中一般使用最后一個

sass --style compressed style.scss style.css

變量

變量使用以$開頭(這也是我喜愛sass多于less的原因，誰不喜歡money呢？O(∩_∩)O哈哈~，開個玩笑)，如果變量需要在字符串中使用，只需要寫在#{}中即可

$color:#999;
$side:left;
$bw:2px;
div {
    background-color: $color;
    border-#{$side}-width: $bw;
}

編譯后:

div {
    background-color: #999;
    border-left-width: 2px;
}

Mixin(混合)

實現代碼塊的重用，使用@mixin定義一個代碼塊，通過@include就可以調用此代碼塊

@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;
}

運算

與less類似，不多介紹

$w:1000px;
body {
    width: $w/2;
    div {
        height: 100px*5;
    }
}

編譯后:

body {
    width: 500px;
}
body div {
    height: 500px;
}

顏色函數

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;
}

云服務器 GPU云服務器初體驗阿里云香港服務器初入門 sass 多云管理 sass

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115437.html

less入門初體驗

摘要：有眾多的預處理器，其中比較流行的三個是，本文就一起來體驗編寫代碼官方文檔官網栗子編譯成文件編譯客戶端瀏覽器通過在源代碼中引入文件，用于實時對樣式表文件進行編譯并不推薦注意你的樣式文件一定要在引入前先引入，并且需要 css有眾多的預處理器，其中比較流行的三個是less、sass、stylus，本文就一起來體驗less編寫css代碼官方文檔:http://lesscss.org/官網栗子:...

chinafgj 2019-08-30 13:17 評論0 收藏0
webpack+react項目初體驗——記錄我的webpack環境配置

摘要：安裝寫在里安裝和配置和之前一樣用來處理文件相關的這個包括的就比較多，有，后面兩個是為了寫和服務。這兩天學習了一些webpack的知識，loaders+plugins真的很強大！不過配置起來也很復雜，看了一些文章，自己也寫了項目練手，寫下來加深自己的印象。首先，非常非常推薦的幾篇文章，初學者一定要看！http://www.jianshu.com/p/42e1...（標題一點也不夸張，...

csRyan 2019-08-20 14:05 評論0 收藏0
常見的CSS預處理器之Less初體驗

摘要：預處理器的技術現在已經很成熟了，而且也出現了各種不同的預處理器語言，但是呢不可能一一列出，面面俱到，這篇文章呢，主要是介紹一下比較常見的預處理器語言之一之初體驗。 CSS預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為CSS增加了一些編程的特性，將CSS作為目標生成文件，然后開發者就只要使用這種語言進行編碼工作。簡單來說，CSS預處理器用一種專門的編程語言，進行We...

desdik 2019-08-30 11:11 評論0 收藏0
vue-cli3.0初體驗～

摘要：比如傳遞給時，使用。為所有的及其預處理文件開啟。在生產環境下為和使用在多核機器下會默認開啟。是否使用分割供應的包也可以是一個在包中引入的依賴的顯性的數組。查閱配置行為。之前因為parcel的出現，webpack也跟進了零配置vue-cli自然也不能落下,cli3.0也升級到webpack4，并增加許多新特性安裝并創建一個項目支持npm和yarn npm install -g @v...

AlphaWallet 2019-08-22 15:57 評論0 收藏0