Sass學習筆記-Sass入門02

我們繼續上一次課的內容，繼續學習。

一、嵌套屬性

對於同一個選擇器下，相同的屬性名稱，我們可以提取出來。例如：

.nav{
    border:1px solid #000;
    border-left: 0;
    border-right: 0;
} 

可以寫成

.nav{
    border:1px solid #000{
        left:0;
        right: 0;
    }
}

可以發現，編譯後的css文件四一模一樣的。

二、mixin (類似JS函數)

可以把它想象成是，有名字的、定義好的樣式
可以在任何地方，重複使用，可以把它當作是JS的函數

你可以使用使用@符號定義它，例如:

@mixin 名字(參數1，參數2){
	...
}

mixin 可以嵌套使用變量，子樣式、或者其他mixin 例如:

@mixin alert {
    color: #8a8a8a;
    background-color: #fcf8e3;
    @include test;
    a{
        color: green($color: #000000);
        @include test;
    }
}
@mixin test {
    font-weight: 15px;
}

.alert-waring{
    @include alert;
}

• 第一：我們首先定義了一個alert，然後在裏邊添加了一些樣式，
• 第二：我們引入了另外的一個mixin
• 第三：我們在alert這個mixin下，又定義了一個a的樣式。接下來我們看看會編譯成什麼樣子
  
  可以看到，效果是非常不錯的，不僅嵌套的test編譯出來了，而且子級的a樣式，也成功編譯。

2.1 darken (加深指定的顏色)

darken(參數1,參數2)

• 參數1：要加深的顏色
• 參數2：百分比加深多少
  

2.2 調用mixin

默認我們調用mixin的時候，參數需要對應。
但是當我們指定參數的時候，就可以不用對應。例如：
注意：指定參數的時候需要使用 : 號 來緊跟對應的值

三、@extend 繼承或者擴展

在Sass中我們可以使用@extend來減少重複的動作

繼承相當於把繼承類的類名換成當前類的類名。並且樣式是繼承類的樣式。
簡單來說，就是我把你的變成我們共同的。
當我們使用@extend繼承的時候，右邊編譯後的css文件會出現羣組選擇器。它們會同時擁有在羣組選擇器裏邊的樣式。

四、 @import 與 Partials

Partials文件名要以 _ (下劃線開頭)

那麼如何引入Partials文件呢？

在文章開頭，我們使用 @import + “文件名;” 的方式即可，
不需要寫下劃線，也不需要寫擴展名，在同級目錄下不需要寫路徑

五、註釋

5.1、多行註釋

• 會在編譯輸出的結果中保留 但在壓縮方式的編譯情況下會去掉

  /*
  這是多行註釋
  天王蓋地虎
  */
  

5.2、單行註釋

• 不會出現在編譯輸出之後的文件裏面。

  //這是單行註釋
  

5.3、強制註釋

• 這樣註釋的內容，會一直出現在css裏邊

  /*!這是強制註釋*/
  

六、Data Type

在命令行中我們輸入 sass -i
這是sass提供的交互功能，在這之後你輸入的內容回車之後會立刻看到結果。

• 判斷數據的類型 可以使用 type-of()
• 數據類型的數字還可以包含單位 例如:
  
  當然還有很多其他用法 例如：
  

七、number 運算

在sass交互模式下，試一下數字的運算

八、數字函數

• abs() 取絕對值
• round() 四捨五入
• ceil() 向上取整
• floor() 向下取整
• percentage() 取百分比
• min(1,2,3) 取最小的
• max(1,2,3) 取最大的
  
  

九、String 字符串

帶引號：可以包含空格，和一些其他特殊字符
不帶引號：不能有空格

+ 號 - 號 / 號 都可以連接字符串

>> "ning" + hao
"ninghao"
>> ning + "hao"
"ninghao"