SASS

1. 简介

  • Sass 文件就是普通的文本文件,里面可以直接使用 CSS 语法。文件后缀名是 .scss,意思为 Sassy CSS。

2. 语法

// 所有变量以 $ 开头
$blue : #1875e7; 
div {
    color : $blue;
}

// class 可以继承
.class2 {
    @extend .class1;
  font-size:120%;
}

// 插入外部文件
@import "path/filename.scss";

// if else
p {
    @if 1 + 1 == 2 { border: 1px solid; }
    @if 5 < 3 { border: 2px dotted; }
    @else { border: 3px;}
}

//for 循环
@for $i from 1 to 10 {
    .border-#{$i} {
        border: #{$i}px solid blue;
    }
}

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

//each 命令
@each $member in a, b, c, d {
    .#{$member} {
        background-image: url("/image/#{$member}.jpg");
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
最近更新: 8/11/2019, 11:08:36 PM