SASS用法小记

之前项目用LESS,现在新项目打算用SASS,所以做个主要常用知识点小记。

在线编译地址

@import 引入

1
2
 @import "../binjs.scss"; // 引入文件
 @import "../huangyb.css";

@mixin 混入

注意:LESS的变量用@ , SASS是 $

  • 带参数
1
2
3
4
5
6
7
@mixin borderSet($dott: solid, $color: #fcf) {
border: 8px $dott $color;
}
div {
opacity: 0;
@include borderSet(dotted, #fa0); //带参数传入
}
  • 不带参数 显示默认值 不定义参数值 就显示默认值
1
2
3
4
5
6
7
@mixin borderSet($dott: solid, $color: #fcf) {
border: 8px $dott $color;
}
div {
opacity: 0;
@include borderSet; //不带参数传入 可括号 可不括号
}

嵌套

LESS也是一样的嵌套规则, & 符号都相同

  • 使用&引用父元素

    1
    2
    3
    4
    5
    6
    7
    div {
    opacity: 0;
    @include borderSet(); //不带参数传入 可括号 可不括号
    &:after {
    color:#ccc;
    }
    }
  • 属性的嵌套

    1
    2
    3
    4
    5
    6
    p {
    border: {
    color:red;
    width:12px;
    }
    }

变量用 #{} 包裹

如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。一般来说,我们设置的变量都是用于属性值的,而如果用在属性或者选择器上,就得以#{}包裹起来了。

1
2
3
4
5
6
7
8
9
$className:huangyb;
.#{$className} {
width: 12px;
}
// 解析成
.huangyb {
width: 12px;
}
1
2
3
4
5
6
7
8
$side : left;
.#{$side} {
  border-#{$side}-radius: 5px;
}
// 解析成
.left {
  border-left-radius: 5px;
}

!default 的使用

正常情况下 声明两个变量 会出现后面覆盖前面的变量

1
2
3
4
5
$color:red;
$color:blue;
p{
color:$color; //blue
}

若声明了 !default 会就不能出现覆盖的现象

1
2
3
4
5
$color:red;
$color:blue !default;
p{
color:$color; //red
}

多个变量的声明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$linkColor: red blue;
a{
color:nth($linkColor,1);
&:hover{
color:nth($linkColor,2);
}
}
// 解析后
a {
color: red;
}
a:hover {
color: blue;
}

@extend 继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
div {
color:#fcf;
}
p {
@extend div;
width:10px;
}
span {
@extend p;
}
// 解析后
div, p, span {
color: #fcf;
}
p, span {
width: 10px;
}

function

1
2
3
4
5
6
7
8
9
10
11
12
@function binjs($value) {
@return #{$value}px;
}
div {
width: binjs(30);
}
//解析后
div {
width: 30px;
}

@if @else 条件判断

1
2
3
4
5
6
7
8
$width:12px;
div {
@if ($width>10) {
color:#fcf;
} @else {
color:#fa0;;
}
}
0%