0%

Sass 笔记

很久没有写CSS,最近写Css 的时候发现很多 Sass 语法忘记了,本着好记性不如烂笔头的原则,开一篇记录一下常用的 Sass 语法
为方便读者追本索源,转载请保留本文地址

变量

变量使用 $ 来声明,ex:

1
2
3
4
5
$smallFont: 12px;
$normalFont: 14px;
$largeFont: 16px;

$baseColor: #E86295;

使用的时候:

1
2
color: $baseColor;
font-size: $smallFont;

假如变量需要拼接,则需要使用 #{$baseColor} 这样的语法来拼接,如:

1
2
$calc: 306 + 32;
height: calc(100vh - #{$calc});

方法

方法、关键字指令使用 @ 来标记, ex:

1
2
3
@function mySize($size) {
@return $size + 24 + px;
}

使用的时候直接

1
font-size: mySize(12);

循环

使用 each 关键字:

1
2
3
4
5
@each $type in center, left, right {
.text-#{$type} {
text-align: $type;
}
}

逻辑判断

使用 if 关键字:

1
2
3
4
5
6
7
@function mySize($size) {
@if $size < 14 {
@return $size + px;
} @else {
@return $size + 24 + px;
}
}

混淆

混淆的作用是分离代码块, 在 scss 中导入 混淆即可引入代码块

1
2
3
4
5
@mixin button() {
font-size: 14px;
text-align: center;
padding: 10px 20px;
}

使用的时候:

1
2
3
4
5
.my-btn {
...
@include button();
...
}