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 循环和编程语言的差很少。