css 变量

$

$Primary-color : #333;

Modules 模块

@use

1
2
3
4
5
6
7
8
// _base.scss
$font-stack :Helvetica,sans-serif;
$primary-color:#333;

body{
    font: 100% $font-stack;
    color: $primary-color;
}
1
2
3
4
5
6
@use 'base';

.inverse{
    background-color: base.$primary-color;
    color: #fff;
}

Mixins & Functions

@mixin

Sass

1
2
3
4
5
6
7
8
@mixin transform ($property) {
    -webkit-transform: $property;
    -ms-transform: $property;
    transform: $property;
}
.box {
    @include transform(rotate(30deg))
}

css

1
2
3
4
5
.box{
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}

Inheritance 继承

**@extend **

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
%message-shared{
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}

.message{
    @extend %message-shared;
}

.success{
    @extend %message-shared;
    border-color: green;
}

逻辑判断

**@if …. @else if …. @else **

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22


@mixin triangle($size,$color,$direction) {
    height: 0;
    width: 0;
    border-color: transparent;
    border-style: solid;
    border-width: $size/2;
}

@if $direction == up {
    border-bottom-color: $color;
}@else if $direction == right {
    border-left-color: $color;
}@else {
    @error "Unknown direction #{ $direction}."
}

.next{
    @include triangle(5px, black,right )
}

插件

VsCode 里面 插件 ：Live Sass Compiler

在 setting 设置里面搜索 live sass compiler

设置 format 里面

1
2
3
"format": "compressed", //压缩css
"extensionName": ".css", //编译扩展名
"savePath": "/css" //编译后存放路径

在需要转换为css的sass 的文件里面点击Vscode 下面的Watching... 即可转换成/css/文件夹下的css文件