空梦博客

Sass基础用法

1、变量:

Sass中的变量需要以 $开头进行命名,如 $blue;如果需要插入在字符串中,则需使用#{ }进行包裹;如:border-#{$de}-color;

2、计算:

Sass允许在语句中直接使用算式记性计算,如:right: $var * 10;

3、嵌套:

Sass可以使用语法的嵌套,可以使代码的可读性更强。如:

(1) 标签嵌套

1
2
3
div{
h1{ };
}

(2)属性嵌套:

1
2
3
4
5
p{
border:{
color:red;
}
}

TIPS:
在嵌套的代码中,可以使用&来引用父级,如

1
2
3
a{
&:hover{ }
}

4、注释:

/* 注释 */:普通注释,会保留到编译后的文件中,如果使用压缩模式编译,则会省略;

// 注释:只保留在Sass源文件中,编译后则省略;

/*! 重要注释 */:压缩模式下编译也会保留;

5、继承:

使用 @extend 可实现继承:

1
2
3
4
5
.class1{ };
.class2{
@extend class1;
font-size:14px;
}

6、重用代码块:

使用 @mixin进行代码块的定义,使用@include进行已定义的代码块的调用;

1
2
3
4
5
6
7
8
@mixin left{
float:left;
margin-left:10px;
}

div{
@include left;
}

在代码块的定义中,也可以传入参数和默认值:

1
2
3
4
5
6
7
8
@mixin left($value:10px){
float:left;
margin-right:$value;
}
// 调用;
div{
@include left(20px);
}

7、插入文件:

可以使用 @import进行文件的引入:

1
@import "path/filename.scss";

8、条件判断:

使用 @if/@else写条件语句;

1
2
3
4
5
6
7
p{
@if 1+1 == 2{
width:10px;
}@else{
width:20px;
}
}

9、循环语句:

for循环:

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

while循环:

1
2
3
4
5
6
7
$i:6;
@while $i>0{
.item-#{$i}{
width:2em * $i;
}
$i:$i-1;
}

each语句:

1
2
3
4
5
@each $menber in a,b,c,d{
.#{$menber}{
background:blue;
}
}

10、自定义函数:

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

#sidebar{
width:double(5px);
}
Y(・∀・)Y 蟹,请我喝瓶可乐吧!
  • QQ
  • AliPay
  • WeChat


本文作者: Mr. 空梦
发布时间: 2020-01-01
最后更新: 2020-02-27
本文标题: Sass基础用法
本文链接: https://kmbk0.top/2020/01/01/Sass基础用法/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!

 评论