Sass文档

发表于 | 分类于 ， | 阅读次数:

Sass文档

Sass是一种css的预编译语言。提供了变量（variables）、嵌套（nestedrules）、混合（mixins）、函数（functions）等功能，并且完全兼容css语法。

它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的css文件。

Sass用法指南

基本用法

1. 变量

sass允许使用变量，所有变量以$开头。

1
2
3
4
5
$-primary-color: #16b3fc;

button {
    color: $-primary-color
}

如果变量需要嵌入在字符串之间，必须要写在#{}之中

1
2
3
4
5
$side: left;

button {
    padding-#{$side}: 5px;
}

2. 计算功能

sass允许在代码中使用算式：

1
2
3
4
5
6
7
$var: 200px;

div {
    margin: (20px/2);
    top: 50px + 100px;
    right: $var * 10%;
}

3. 嵌套

sass允许选择器嵌套，属性也可以嵌套，比如border-color属性，可以写成

1
2
3
4
5
6
// 注意，border后面必须加上冒号
button{
    border:{
        color: blue;
    }
}

在嵌套的代码块内，使用&引用父元素，例如button:hover，可以写成：

1
2
3
4
5
6
7
button {
    &:hover{
        border:{
            color: blue;
        }
    }
}

4. 注释

sass两种注释方式

  • 标准的/* comment*/，会保留到编译后的文件
  • 单行注释// comment，编译后会被省略
  • 重要注释/*! comment*/，即使是压缩模式编译，也会保留这行注释，通常用于声明版权。

代码的复用

1. 继承

sass还允许一个选择器继承另一个选择器，例如：

1
2
3
.button1{
    color: blue;
}

button2要继承button1，可以使用@extend命令：

1
2
3
4
.button2{
    @extend .button1;
    font-size: 14px;
}

2. mixin混入

mixin是可以复用的代码块。

使用@mixin命令，定义一个代码块。

可以直接写死某些内容，直接使用，也可以指定参数和缺省值，例：

1
2
3
4
5
@mixin base-color-style($--background-color,$--color,$--border-color: blue){
    background-color: $--background-color;
    color: $--color;
    border-color: $--border-color;
}

使用@include命令，调用这个mixin。

1
2
3
button{
    @include base-color-style(blue, white, skyblue)
}

3. 颜色函数

sass提供了一些内置的颜色函数，方便生成系列颜色。

1
2
3
4
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

4. 插入文件

@import命令，来插入外部文件。如果是插入的.css文件，等同于css的import命令

1
@import './common/var.scss'

高级用法

1. 条件语句

@if用来判断：

1
2
3
4
button{
    @if 1 + 1 = 2 { border: 1px solid;}
    @if 5 < 3 { border: 2px dotted; }
}

@else命令：

1
2
3
4
5
@if lightness($color) > 30% {
    background-color: #000;
} @else {
    background-color: #fff;
}

2. 循环语句

sass支持for循环：

1
2
3
4
5
@for $i from 1 to 10 {
　　.item-#{$i} {
　　　　border: #{$i}px solid blue;
　　}
}

while循环：

1
2
3
4
5
6
7
8
$i: 6;

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

@each命令，作用和@for类似，和@for的差别在于，@each通过遍历 list或者 map实现循环输出:

  • list：指列表

  • map：可以包含若干值的对象类型，使用()包裹一个map，里面的键值用逗号隔开，键和值可以是任何的sass数据类型，键必须唯一。

    注意：map不能直接在css中使用，把map赋值给一个元素会报错。

    list例子：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    @each $var in <list>
    /*
      var是变量名，list是一个sassScript表达式，它会返回一个列表值。   
     */
    $list: aa,bb,cc,dd,ee; // 多个变量，可以用空格，也可以使用逗号隔开
    @each $member in $list {
      　　　　.#{$member} {
      　　　　　　background-image: url("/image/#{$member}.jpg");
      　　　　}
      　　}

多个列表的遍历，我们也可以使用多个参数来保存相应的元素，例子：

1
2
3
4
5
6
7
8
9
10
11
12
$alt: alert, yellow, red;

$sub: submit, white, green;

$bck: back, blue, transparent;

@each $type, $txt, $back in $alt,$sub,$bck {
  .#{$type}-button {
      color: $txt;
      background-color: $back;
  }
}

map，我们就可以使用两个变量来存储元素的 key 和value例子：

1
2
3
4
5
6
7
$params: (a1: a, a2:b, a3: c);

@each $key, $a in $params {
    .#{$member} {
　　　　　　background-image: url("/image/#{$a}.jpg");
　　 }
}

3. 自定义函数

sass允许用户编写自己的函数

1
2
3
4
5
6
7
@function double($n) {
    @return $n * 2;
}

.button {
    width: double(5px);
}