Sass學習筆記

聲明默認變量

$swap: 3;
$swap: 2 !default;

在變量後加一個 !default

混合宏

我們可以通過在參數中傳默認值

@mixin border-radius($radius:5px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}

在 Sass 中通過 @mixin 關鍵詞聲明瞭一個混合宏，那麼在實際調用中，其匹配了一個關鍵詞“@include”來調用聲明好的混合宏。例如在你的樣式中定義了一個圓角的混合宏“border-radius”

button {
    @include border-radius(4px);
}

我們可以給參數傳值

繼承

在 Sass 中也具有繼承一說，也是繼承類中的樣式代碼塊。在 Sass 中是通過關鍵詞 “@extend”來繼承已存在的類樣式塊，從而實現代碼的繼承。

//SCSS
.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}

佔位符

Sass 中的佔位符 %placeholder 功能是一個很強大，很實用的一個功能.他可以取代以前 CSS 中的基類造成的代碼冗餘的情形。因爲 %placeholder 聲明的代碼，如果不被 @extend 調用的話，不會產生任何代碼。

//SCSS
%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

.btn {
  @extend %mt5;
  @extend %pt5;
}

.block {
  @extend %mt5;

  span {
    @extend %pt5;
  }
}

當我們不繼承 %mt5 %pt5 時，那麼這兩個代碼塊不會編譯到css中，只有@extend調用纔會產生代碼

插值#{}

@mixin generate-sizes($class, $small, $medium, $big) {
    .#{$class}-small { font-size: $small; }
    .#{$class}-medium { font-size: $medium; }
    .#{$class}-big { font-size: $big; }
}
@include generate-sizes("header-text", 12px, 20px, 40px);

使用 #{} 來拼接

@if…@else

//SCSS
@mixin blockOrHidden($boolean:true) {
  @if $boolean {
      @debug "$boolean is #{$boolean}";
      display: block;
    }
  @else {
      @debug "$boolean is #{$boolean}";
      display: none;
    }
}

.block {
  @include blockOrHidden;
}

.hidden{
  @include blockOrHidden(false);
}

@debug：如果你在命令行中使用命令生成css文件，命令行中就會打印debug的信息

@for循環

在製作網格系統的時候，大家應該對 .col1~.col12 這樣的印象較深。在 CSS 中你需要一個一個去書寫，但在 Sass 中，可以使用 @for 循環來完成。在 Sass 的 @for 循環中有兩種方式：

@for $i from <start> through <end>
@for $i from <start> to <end>

• $i 表示變量
• start 表示起始值
• end 表示結束值

這兩個的區別是關鍵字 through 表示包括 end 這個數，而 to 則不包括 end 這個數。
看如下代碼

//SCSS 
$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;

%grid {
  float: left;
  margin-left: $grid-gutter / 2;
  margin-right: $grid-gutter / 2;
}
@for $i from 1 through 12 { //插值表達式
  .#{$grid-prefix}#{$i}{
    width: $grid-width * $i + $grid-gutter * ($i - 1);
    @extend %grid;
  }  
}

@while循環

//SCSS
$types: 4;
$type-width: 20px;

@while $types > 0 {
    .while-#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1;
}

@each循環 (遍歷)

遍歷列表

@each $var in <list>

$list: adam john wynn mason kuroir;//$list 就是一個列表

@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("/images/avatars/#{$author}.png") no-repeat;
        }
    }
}

.author-bio {
    @include author-images;
}

字符串函數

unquote()函數

unquote() 函數主要是用來刪除一個字符串中的引號，如果這個字符串沒有帶有引號，將返回原始的字符串。

quote()函數

quote() 函數剛好與 unquote() 函數功能相反，主要用來給字符串添加引號。如果字符串，自身帶有引號會統一換成雙引號 “”

To-upper-case()

To-upper-case() 函數將字符串小寫字母轉換成大寫字母

To-lower-case()

To-lower-case() 函數 與 To-upper-case() 剛好相反，將字符串轉換成小寫字母

數字函數

• percentage($value)：將一個不帶單位的數轉換成百分比值；
• round($value)：將數值四捨五入，轉換成一個最接近的整數；
• ceil($value)：將大於自己的小數轉換成下一位整數；
• floor($value)：將一個數去除他的小數部分；
• abs($value)：返回一個數的絕對值；
• min($numbers…)：找出幾個數值之間的最小值；
• max($numbers…)：找出幾個數值之間的最大值；
• random(): 獲取隨機數

列表函數

• length($list)：返回一個列表的長度值； 以空格爲一個元素
• nth($list, $n)：返回一個列表中指定的某個標籤值
• join($list1, $list2, [$separator])：將兩個列給連接在一起，變成一個列表；
• append($list1, $val, [$separator])：將某個值放在列表的最後；
• zip($lists…)：將幾個列表結合成一個多維的列表；
• index($list, $value)：返回一個值在列表中的位置值。

Introspection函數

• type-of($value)：返回一個值的類型
• unit($number)：返回一個值的單位
• unitless($number)：判斷一個值是否帶有單位
• comparable($number-1, $number-2)：判斷兩個值是否可以做加、減和合並

>> comparable(2px,1%)
false
>> comparable(2px,1em)
false
>> comparable(2rem,1em)
false
>> comparable(2px,1cm)
true
>> comparable(2px,1mm)
true

Miscellaneous函數（三元表達式）

if($condition,$if-true,$if-false)

Map

基本使用

$map: (
    $key1: value1,
    $key2: value2,
    $key3: value3
)

可嵌套

$default-color: #fff !default;
$primary-color: #22ae39 !default;
$color: (
    default: #fff,
    primary: #22ae39,
    negative: #d9534f
);

進階技巧，背景主題

$theme-color: (
    default: (
        bgcolor: #fff,
        text-color: #444,
        link-color: #39f
    ),
    primary:(
        bgcolor: #000,
        text-color:#fff,
        link-color: #93f
    ),
    negative: (
        bgcolor: #f36,
        text-color: #fefefe,
        link-color: #d4e
    )
);

• map-get($map,$key)：根據給定的 key 值，返回 map 中相關的值。
• map-merge($map1,$map2)：將兩個 map 合併成一個新的 map。
• map-remove($map,$key)：從 map 中刪除一個 key，返回一個新 map。
• map-keys($map)：返回 map 中所有的 key。
• map-values($map)：返回 map 中所有的 value。
• map-has-key($map,$key)：根據給定的 key 值判斷 map 是否有對應的 value 值，如果有返回 true，否則返回 false。
• keywords($args)：返回一個函數的參數，這個參數可以動態的設置 key 和 value。

RGB顏色函數

• rgb($red,$green,$blue)：根據紅、綠、藍三個值創建一個顏色；
• rgba($red,$green,$blue,$alpha)：根據紅、綠、藍和透明度值創建一個顏色；
• red($color)：從一個顏色中獲取其中紅色值；
• green($color)：從一個顏色中獲取其中綠色值；
• blue($color)：從一個顏色中獲取其中藍色值；
• mix($color-1,$color-2,[$weight])：把兩種顏色混合在一起。

HSL函數 (還是顏色)

• hsl($hue,$saturation,$lightness)：通過色相（hue）、飽和度(saturation)和亮度（lightness）的值創建一個顏色；
• hsla($hue,$saturation,$lightness,$alpha)：通過色相（hue）、飽和度(saturation)、亮度（lightness）和透明（alpha）的值創建一個顏色；
• hue($color)：從一個顏色中獲取色相（hue）值；
• saturation($color)：從一個顏色中獲取飽和度（saturation）值；
• lightness($color)：從一個顏色中獲取亮度（lightness）值；
• adjust-hue($color,$degrees)：通過改變一個顏色的色相值，創建一個新的顏色；
• lighten($color,$amount)：通過改變顏色的亮度值，讓顏色變亮，創建一個新的顏色；
• darken($color,$amount)：通過改變顏色的亮度值，讓顏色變暗，創建一個新的顏色；
• saturate($color,$amount)：通過改變顏色的飽和度值，讓顏色更飽和，從而創建一個新的顏色
• desaturate($color,$amount)：通過改變顏色的飽和度值，讓顏色更少的飽和，從而創建出一個新的顏色；
• grayscale($color)：將一個顏色變成灰色，相當於desaturate($color,100%);
• complement($color)：返回一個補充色，相當於adjust-hue($color,180deg);
• invert($color)：反回一個反相色，紅、綠、藍色值倒過來，而透明度不變。

Opacity函數

• alpha($color) /opacity($color)：獲取顏色透明度值；

>> alpha(red)
1
>> alpha(rgba(red,.8))
0.8
>> opacity(red)
1
>> opacity(rgba(red,.8))
0.8

• rgba($color, $alpha)：改變顏色的透明度值；
• opacify($color, $amount) / fade-in($color, $amount)：使顏色更不透明；
• transparentize($color, $amount) / fade-out($color, $amount)：使顏色更加透明。