sass 使用指南

sass 和 scss

sass 和 scss 的語法不同，scss 語法很接近 css，而 sass 語法主要是不使用大括號和分號。

使用 sass 語法的文件後綴是 .sass 使用 scss 語法的文件後綴是 .scss。

scss 語法和 css 不一樣主要是，scss 能夠嵌套選擇器。

.main {
    .box {
        color: #000;
    }
    
    a {
        &:hover {
            background: orange;
        }
    }
}
複製代碼

其中&表明父選擇器。

變量

定義變量是使用$開頭，好比：

$text-color: #fff;
$height: 10px;

body {
    color: $text-color;
}
複製代碼

使用變量可讓項目更好的維護和直觀。

部分

咱們能夠將變量單獨存放一個文件中，而 sass 不會編譯建立一個專門的 css 文件。

partial 文件以_開頭，如_variables.scss，而後再須要這些變量的文件中開頭使用@import "variables";導入變量。

混入

混入可讓一段代碼，多處使用。

@mixin warning {
    color: #fff;
    background: orange;
}

.warning-button {
    @include warning;
    font-size: 18px;
}
複製代碼

咱們使用@mixin定義，使用@include使用。

咱們還能夠再 mixin 中使用其餘選擇器。

@mixin links {
    a {
        color: #000;
    }
}

@include links;

body {
    background: #fff;
}
複製代碼

和變量同樣咱們也能夠將 mixin 單獨放入一個 partial 文件中。

mixin 參數

@mixin color($color) {
    color: $color;
}

@mixin box {
    @include color(#fff);
    background: #ccc;
}
複製代碼

mixin 還有默認參數，剩餘參數。

@mixin shadow($shadows...) {
    box-shadow: $shadows;
}

@mixin box($color: #fff, $bgc: #ccc) {
    color: $color;
    background: $bgc;
    @include shadow(1px 2px 6px #fff, 2px 3px 0px #ccc);
}

.box {
    @include box($bgc: #000);
}
複製代碼

content

mixin 還能夠用 content 定義插槽。

@mixin ie6 {
    * html {
        @content;
    }
}

@include ie6 {
    body {
        color: #fff;
    }
}
複製代碼

導入

sass 保留了 css import 的功能。還添加了本身功能。

除了 partial 文件，partial 還能夠添加其餘 scss 文件。

咱們可使用 mixin 和 import 導入字體。

@mixin google-font($font) {
    $font: unquote($font);
    @import url(https://fonts.googleapis.com/?family=#{$font});
}

@include google-font("Alegreya+Sans");
複製代碼

#{}讓 sass 知道 $font 是變量，unquote函數是去引號。

媒體查詢

sass 中咱們可使用嵌套媒體查詢。

#main {
    @media only screen and (max-width: 960px) {
        width: auto;
    }
}
複製代碼

編譯成 css 文件會將媒體查詢提取到最外層。

咱們還能夠和 mixin 結合。

@mixin small-screens() {
    @media only screen and (max-width: 320px) {
        @content;
    }
}
複製代碼

函數

css 中有許多函數，如rgb, hsl，sass 中也有許多內置函數。

完整函數列表

除了內置函數，還能夠自定義函數。

@function sum($a, $b) {
    @return $a + $b;
}

@function strip-unit($v) {
    @return $v / ($v * 0 + 1);
}

@function em($px, $f: 16px) {
    @return ($px / $f) * 1em;
}

.box {
    width: sum(10px, 90px);
}
複製代碼

咱們經過@function定義函數，sass 中的值能夠帶有單位。

em函數將 px 轉換成 em。strip-unit將單位去除。

繼承

繼承有點相似 mixin。

.base {
    color: #fff; 
}

.box {
    @extend .base;
    @extend .foo !optional;
    background: #000;
}
複製代碼

使用@extend繼承指定選擇器的代碼。並且只能繼承單個選擇器的代碼好比.a.b，不能是.a .b。並且媒體查詢中不能繼承媒體查詢外面的代碼。

!optional表示有就繼承，沒有就算了。

還有就是能夠繼承佔位符類（placeholder class）。

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}
複製代碼

佔位符是以%開頭。若是沒有被使用則不會生成相應 css 代碼。

繼承和混入的區別在於，繼承不會生成重複的代碼，它是生成選擇器來共用代碼。而混入會重複相同的代碼。

因此混入會增大 css 文件的大小。可是有人發現重複的代碼比共用相同部分的代碼性能更高。這也是有人會使用混入代替繼承的緣由。

條件

使用條件判斷能夠根據條件生成不一樣的代碼，切換不一樣的主題。

$theme: dark;
$bgc: #000;

@if $theme == dark {
    $text-color: #fff;
    $bgc: #111;
    font-size: 10px;
} @else if $theme == light {
    $text-color: #eee;
} @else {
    $bgc: #333;
}
複製代碼

循環

循環能夠幫助快速編寫重複的代碼。sass 中有三種循環。

@for $i from 1 to 6 {
    .col-#{$i} {
        width: $i*5px;
    }
}
@for $i from 1 through 6 {
    .col-#{$i} {
        width: $i*5px;
    }
}
複製代碼

for 循環有兩種寫法，to和through，它們的區別是to不包括上界，如上面to爲1到5。through爲1到6.

$list: cat, dog, bird;
@each $ani in $list {
    .#{$ani} {
        background: url('/img/#{ani}.png');
    }
}

$sizes: (small: 6px, medium: 10px, large: 20px);
@each $k, $v in $size {
    .#{$k} {
        font-size: $v;
    }
}
複製代碼

each 循環幾乎是用着作多的循環。

$i: 1;
while $i < 10 {
    .pic-#{$i} {
        width: $i * 10px;
    }
    $i: $i + 1;
}
複製代碼

while 循環和編程語言的差很少。