Sass

Sass

Sass介紹

Sass 是一款強化 CSS 的輔助工具，它在 CSS 語法的基礎上增長了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、導入 (inline imports) 等高級功能，這些拓展令 CSS 更增強大與優雅。使用 Sass 以及 Sass 的樣式庫有助於更好地組織管理樣式文件，以及更高效地開發項目。

語法格式

Sass共有兩種語法結構 Sass、Scss。兩種語法基本相同，可是Sass用縮進代替花括號，用換行代替了分號。

• Sass

  .father
    width: 100px
    height: 100px
    .son
        width: 50px
        height: 50px

• scss

  .father{
      width: 100px;
      height： 100px;
      .son{
          width: 50px;
          height: 50px;
      }
  }

變量

// scss中定義變量： $變量名: 變量值
$w: 100px;

sass中變量的特色:

• 後定義的變量會覆蓋先定義的變量
• 能夠經過值傳遞用變量給變量賦值
• sass中的變量存在做用域
• sass變量和less變量不一樣,sass中的變量不會進行預處理,不能先使用後定義

變量插值

// 在sass中,若是變量是屬性值的話,能夠直接 $變量名 調用
// 若是變量是屬性名或者選擇器名的話須要使用 #{$變量名} 調用
$d: div;
$w: width;
$h: height;
$size: 100px;

${d}{
    ${w}: $size;
    ${h}: $size;
}

運算

// sass中支持 + - * / 運算, 可是運算時都要用 () 將運算式包裹起來
div{
  width: (100px * 2);
  height: (400px / 2);
  background: red;
  margin-top: (10px + 10px);
  margin-bottom: (30px - 10px);
}

混合

// 建立混合: @mixin 混合名(){} 或 @mixin 混合名{}
// 調用混合: @include 混合名() 或 @include 混合名
@mixin center(){
    // ...
}
div{
    @include center();
    // ...
}

帶參混合

@mixin whc($w: 200px, $h: 200px, $c: red){
  width: $w;
  height: $h;
  background: $c;
}

.box1{
  @include whc();
}

.box2{
  @include whc(300px, 300px, blue);
}

.box3{
  @include whc($c: yellow);
}

混合中的可變參數

// 變量名... 能夠接受0個或多個參數
@mixin ani($name, $time, $args...){
    transition($name, $time, $args);
}

導入外部Sass文件

// 可使用@import來導入外部Sass文件，文件的.scss後綴能夠省略。
@import './css/center'

內置函數

// 和LESS同樣, SASS中也提供了不少內置函數方便咱們使用

// 字符串函數
/*
unquote（$string）：刪除字符串中的引號；
quote（$string）：給字符串添加引號；
To-upper-case（$string）：將字符串小寫字母轉換爲大寫字母
To-lower-case（$string）：將字符串大寫字母轉換爲小寫字母
*/
// 數值函數
/*
percentage($value)：將不帶單位的數轉換成百分比值；
round($value)：將數值四捨五入，轉換成一個最接近的整數；
ceil($value)：向上取整；
floor($value)：向下取整；
abs($value)：取數的絕對值；
min($numbers…)：找出幾個數值之間的最小值；
max($numbers…)：找出幾個數值之間的最大值；
random(): 獲取隨機數
*/
// 顏色函數
/*
rgb($red,$green,$blue)：根據紅、綠、藍三個值建立一個顏色；
rgba($red,$green,$blue,$alpha)：根據紅、綠、藍和透明度值建立一個顏色；
red($color)：從一個顏色中獲取其中紅色值；
green($color)：從一個顏色中獲取其中綠色值；
blue($color)：從一個顏色中獲取其中藍色值；
mix($color-1,$color-2,[$weight])：把兩種顏色混合在一塊兒。
*/
// 列表函數
/*
length($list)：返回一個列表的長度值;
nth($list, $n)：返回一個列表中指定的某個標籤值;
join($list1, $list2, [$separator])：將兩個列給鏈接在一塊兒，變成一個列表；
append($list1, $val, [$separator])：將某個值放在列表的最後；
zip($lists…)：將幾個列表結合成一個多維的列表；
index($list, $value)：返回一個值在列表中的位置值。
-->

自定義函數

@fuunction (num){
    return num * num + px;
}

div{
    width: square(20);
    height: square(20);
}

層級結構

// 和less中同樣sass中在一個選擇器樣式內部寫另外一個選擇器,默認是層級結構即父子關係,
// 能夠經過添加 & 符來取消層級關係
.father{
    // ...
    &:hover{
        // ...
    }
    .son{
        // ...
    }
}

繼承

// 和Less同樣，Sass能夠經過繼承來下降代碼冗餘度
// Sass經過@extend來進行繼承
.center{
    // ...
}

div{
    @extend .center;
}

條件判斷

// sass中不支持混合的匹配模式,可是sass和less同樣支持條件判斷,並且比less中的更加完全
// 格式@if(){}@else if(){}...else{}

// 繪製三角形
@mixin triangle($dir, $width, $color){
  width: 0;
  height: 0;
  border-width: $width;
  border-style: solid;
  border-color: transparent;
  @if($dir == Up){
    border-bottom-color: $color;
  }@else if($dir == Down){
    border-top-color: $color;
  }@else if($dir == Left){
    border-right-color: $color;
  }@else if($dir == Right){
    border-left-color: $color;
  }
}

div{
  @include triangle(Up, 30px, red);
}

循環

```scss
/*
sass中支持循環
for循環:
@for $變量名 form 變量起始值 through 變量結束值{}
@for $變量名 form 變量起始值 to 變量結束值{}
第一種for循環包前包後,第二種for循環包前不包後

while循環:
@while(循環條件){}

/
ul{
li{
/
// 從5到8的li背景變黃色
@for $i from 5 through 8 {
&:nth-child(#{$i}) {
background: yellow;
}
}
*/

$i: 5;
    @while($i <= 8){
        &:nth-child(#{$i}){
             background: yellow;
        }
        $i: $i + 1;
    }
}

}
`