sass的多種用法

sass的多種用法

主要概括總結sass的常見用法，做爲我的筆記使用，部分知識點並不仔細講解。具體可參考文檔：sass官網

1、嵌套

.svg{
    position: absolute;
    left: 0;
    bottom: 20px;
    width: 100%;
    
    path{
        transition: all 500ms ease;
    }
}

注意嵌套中經常使用的&符號。

除了選擇器的嵌套，還有屬性的嵌套：

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

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

---

2、變量的使用

sass使用$符號來標識變量。

注意變量是有做用域的，與js變量做用域相似。

$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
}

---

3、混合器@mixin

能夠經過sass的混合器實現大段樣式的重用。(例如固定的樣式：清楚浮動，文字超出使用省略號等，或者是網站統一的按鈕樣式等。)

好比清除浮動：

@mixin clearfix(){
    &:after{
        display: block;
        content: "";
        clear: both;
    }
}

而後就能夠在你的樣式表中經過@include來使用這個混合器.

.box{
    @include clearfix;
}

一、混合器傳參

當@include混合器時，參數其實就是能夠賦值給css屬性值的變量。

@mixin multi-text($width, $row) {
    max-width: $width;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $row;
    -webkit-box-orient: vertical;
}

p{
    @include multi-text(350px,2);
}

當使用@include混合器時，有時候可能會很難區分每一個參數是什麼意思，參數之間是一個什麼樣的順序。爲了解決這個問題，sass容許經過語法$name: value的形式指定每一個參數的值。這種形式的傳參，參數順序就沒必要再在意了，只須要保證沒有漏掉參數便可。

p{
    @include multi-text(
        $width:350px,
        $row:2
    )
}

二、默認參數值

爲了在@include混合器時沒必要傳入全部的參數，咱們能夠給參數指定一個默認值。參數默認值使用$name: default-value的聲明形式，默認值能夠是任何有效的css屬性值，甚至是其餘參數的引用。

@mixin btn($width:100px,$height:36px){
    width: $width;
    height: $height;
    line-height: $height;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
}
button-1{
    @include btn;
}
button-2{
    @include btn(120px,40px);
}

---

4、選擇器繼承

選擇器繼承是說一個選擇器能夠繼承爲另外一個選擇器定義的全部樣式。這個經過@extend語法實現。

//經過選擇器繼承繼承樣式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

在上邊的代碼中，.seriousError將會繼承樣式表中任何位置處爲.error定義的全部樣式。以class="seriousError" 修飾的html元素最終的展現效果就好像是class="seriousError error"

---

5、函數指令

@function getBg($name){
    @return '../../../../images/' + $name;
}

.box{
    background-image:url(getBg('bg.png'));
}

與 mixin 相同，也能夠傳遞若干個全局變量給函數做爲參數。一個函數能夠含有多條語句，須要調用 @return 輸出結果。

---

6、控制指令

一、@if

當 @if 的表達式返回值不是 false 或者 null 時，條件成立，輸出 {} 內的代碼。@if 聲明後面能夠跟多個 @else if 聲明，或者一個 @else 聲明。若是 @if 聲明失敗，Sass 將逐條執行 @else if 聲明，若是所有失敗，最後執行 @else 聲明。

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

二、@for

@for 指令能夠在限制的範圍內重複輸出格式，每次按要求（變量的值）對輸出結果作出變更。這個指令包含兩種格式：@for $var from <start> through <end>，或者 @for $var from <start> to <end>，區別在於 through 與 to 的含義：當使用 through 時，條件範圍包含 與 的值，而使用 to 時條件範圍只包含 的值不包含 的值 。另外，$var 能夠是任何變量，好比 $i；<start> 和 <end> 必須是整數值。

經常使用於相同元素不一樣的(背景)圖片：

.item{
    @for $i from 1 through 7 {
        >div:nth-child(#{$i}) {
            .item {
                background-image: url('../../../images/us/service-#{$i}.png');
            }
            @if $i == 7 {
                margin: 0 auto;
            }
        }
    }
}

插值語句#{}

經過 #{} 插值語句能夠在選擇器或屬性名中使用變量。

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

//編譯爲：
p.foo {
  border-color: blue; 
}

三、@each

@each 指令的格式是 $var in <list>, $var 能夠是任何變量名，好比 $length 或者 $name，而 <list> 是一連串的值，也就是值列表。

（1）簡單循環

@each $animal in puma, sea-slug {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

//編譯爲：
.puma-icon {
  background-image: url('/images/puma.png'); 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); 
}

（2）複雜循環

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move){
    // $animal => (puma, black, default)
    // $color => (sea-slug, blue, pointer)
    // $cursor => (egret, white, move)
}

另外一種寫法：（ 一一對應）

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em){
    // $header => h1,h2,h3
    // $size => 2em,1.5em,1.2em
}

四、@while

@while 指令重複輸出格式直到表達式返回結果爲 false。這樣能夠實現比 @for 更復雜的循環，只是不多會用到。

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

//編譯爲：
.item-6 {
  width: 12em; 
}
.item-4 {
  width: 8em; 
}
.item-2 {
  width: 4em; 
}

五、if()

if() 是 Sass 的一個內建函數，與之類似的 @if 則是一個內建指令。if() 用來作條件判斷並返回特定值.

@mixin test($condition) {
    $color: if($condition, blue, red);
    color:$color
}

.firstClass {
    @include test(true);
}
.secondClass {
    @include test(false);
}

//編譯結果
.firstClass {
    color: blue;
}
.secondClass {
    color: red;
}

在上例中，if() 函數內的三個參數分別表明：測試條件，測試成功返回值，測試失敗返回值（除了 false 和 null 以外的全部測試條件都被視爲測試成功）。

---

7、導入sass文件

sass也有一個@import規則，sass的@import規則在生成css文件時就把相關文件導入進來。

（開發過程當中一般將比較經常使用的sass按照功能單獨放在某個文件中，在使用的時候導入）

官方文檔是這樣說的：

當經過@import把sass樣式分散到多個文件時，你一般只想生成少數幾個css文件。那些專門爲@import命令而編寫的sass文件，並不須要生成對應的獨立css文件，這樣的sass文件稱爲局部文件。對此，sass有一個特殊的約定來命名這些文件。

此約定即，sass局部文件的文件名如下劃線開頭。這樣，sass就不會在編譯時單獨編譯這個文件輸出css，而只把這個文件用做導入。當你@import一個局部文件時，還能夠不寫文件的全名，即省略文件名開頭的下劃線。舉例來講，你想導入themes/_night-sky.scss這個局部文件裏的變量，你只需在樣式表中寫@import "themes/night-sky";。

@import '../../part/variable';

.light{
    color:$base-color;
}

這裏就是在_variable.scss文件中定義了網站主題色—變量$base-color，導入以後就能夠在當前scss文件直接使用變量。

一、默認變量值：!default標籤

含義是：若是這個變量被聲明賦值了，那就用它聲明的值，不然就用這個默認值。

$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}

若是用戶在導入你的sass局部文件以前聲明瞭一個$fancybox-width變量，那麼你的局部文件中對$fancybox-width賦值400px的操做就無效。

二、靜默註釋

body {
  color: #333; // 這種註釋內容不會出如今生成的css文件中
  padding: 0; /* 這種註釋內容會出如今生成的css文件中 */
}

---

8、數據類型

sass方法

一、空值null

儘管null表示什麼都沒有，但當使用length(..)仍是會返回length爲1。這是由於null仍然表示的是一個真實存在的實體。

二、布爾型

這個數據類型只有兩個值：true和false。在Sass中，只有自身是false和null纔會返回false，其餘一切都將返回true

三、數字

數字在CSS中使用很普遍，大部分都是結合CSS的單位一塊兒使用，但在技術上而言它依然算是數字。只要操做數字和兼容的單位，這樣都是有效的。

$size: 18;                  // A number
$px-unit: $size * 1px;      // A pixel measurement
$px-string: $size + px;     // A string
$px-number: $px-unit / 1px; // A number

四、字符串

在Sass中，使用單引號('')或雙引號("")包裹的都是字符串，就是他們包裹的是一個空格，那也是字符串.

若是你想在一個字符串是使用一個變量，而你又不想讓這個變量直接變成了字符串，那就得使用到一個被稱爲變量插值，簡單點說，就是使用#{}來包裹這個變量。

$name: 'Gajendar';

$author: 'Author : $name'; // 'Author : $name'
$author: 'Author : #{$name}';

五、顏色

顏色函數

Sass主要是給你提供一些額外的功能，這樣你就能夠更有效的使用顏色。

用的比較多的函數方法：

rgba($red, $green, $blue, $alpha) : Creates a Color from red, green, blue, and alpha values.

六、數組

用空格或逗號做分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif

數組方法：

七、maps

至關於 JavaScript 的 object，(key1: value1, key2: value2)

Sass中的Map其實就是相似於關聯數組，經常以key/value對鍵值出現。Map必須用括號(())括起來，每對鍵值之間使用逗號分隔。在Map中，一個給定的key只能有一個相關的value，但一個給定的value能夠被映射到許多不一樣的key上。另外，在Map中映射給key的值value能夠是任何數據類型，包括Map.

$styling: (
  'font-family': 'Lato',
  'font-size': 1.5em,
  'color': tomato,
  'background': black
);

Map方法：

map-get($map, $key) : Returns the value in a map associated with a given key.

map-merge($map1, $map2) : Merges two maps together into a new map.

map-remove($map, $keys…) : Returns a new map with keys removed.

map-keys($map) : Returns a list of all keys in a map.

map-values($map) : Returns a list of all values in a map.

map-has-key($map, $key) : Returns whether a map has a value associated with a given key.

keywords($args) : Returns the keywords passed to a function that takes variable arguments.

---

幾篇不錯的sass技巧文章

• 使用SassMap實現響應式排版