SASS/SCSS
谨为作者笔记用
- 在sass/scss文件的第一行,我们需要写上一行注释
- @charset”utf-8”
- 以此当文件中存在中文时方才不会报错
- sass与scss的区别自行百度,这里默认为scss的用法
- scss的使用前需要安装Ruby,安装教程自行百度
基本操作 安装配置
变量
- scss中可以
1
2
3
4
5
6* 赋值号为 “:” 号
* 变量的使用和操作逻辑与一般编程语言中的用法无二
* 在Vue.js中的使用配置
1. npm install -S sass-loader
2. npm install -S node-sass  # 二者存在依赖关系,必须全部安装
3. 修改style标签 ```<style lang="sass" rel="stylesheet/scss">
- scss中可以
编译
1
2
3
4
5
6
7
8
9单个文件的编译
sass --watch xxx.scss xxx.css
单个文件的监听
sass --watch xxx.scss:xxx.css
监听整个目录
sass --watch xxx/xxx
一般而言,我们在实际开发中并不会只针对单个文件的编译。而是针对多个文件的编译,因此作者更偏爱使用这一命令。对于整个目录的监听并编译生成CSS文件输出到指定目录中。
属性用法
- 混合器/混入mixin
1
2
3
4
5
6定义语法为
@mixin name{
ruleContent
}
使用语法为
@include name
混合器还可以传参,例如
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15//定义mixin
@mixin mixinTest($normal, $hover, $visited){
color: $normal;
&:hover{ color: $hover; };
&:visited{ color: $visited; }
}
//mixin的使用
.con{
$widths: 120px;
width: $widths;
height: $widths;
@include mixinTest(#000, red, green);
}带参数的混合器还可以为形参指定默认值.
继承
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24定义语法与定义class样式方法无二。
//继承的使用
@extend 继承的类名
//例如
.error{
border: 1px #f00;
background-color: #fdd;
}
.seriousError{
//继承的使用
@extend .error;
border-width: 3px;
}
//编译为
.error, .seriousError{
border: 1px #f00;
background-color: #fdd;
}
.seriousError{
border-width: 3px;
}导入其他文件
1
2@import fileName
默认导入为scss文件插值
- 语法为#{}
- 作者理解为花括号中的内容将会按照一定的方式进行解析而非简单的插入
- 因此我们可以放入表达式与变量之类的进行解析才能得出正确结果的对象
- 即使放在字符串中也会进行解析
基本的控制指令与表达式
@if 内置分支函数
1
2
3
4
5
6
7@if expression{
}@else if expression{
}@else{
}@for
该指令有两种形式
- for $var from
through ``` ``` 1
2. for $var from ```<start>``` to ```<end>
- 第一种包括最后一位元素,而第二种便不包括
1
2
3
4
5
6示例:
@for $i from 1 through 3{
.item-#{$i}{
width: 2px * $i;
}
}
- for $var from
- @each
- @each $i in
or map>``` 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19```
示例:
@each $i in a, b, c, d{
.#{$i}-icon{
background-image: url("./images/#{$i}.png");
}
}
还可以多重赋值:
@each $animals, $color, $cursor in(a, b, c),
(e, f, g),
(h, i, j){
.#{$animals}-icon{
background-image: url('/images/#{$animal}.png');
border: 2px solid $color;
cursor: $cursor;
}
// 可迭代对象中的数据会一一对应好变量
}
- @while
1
2
3
4
5
6
7
8$i: 6;
@while @i > 0{
.item-#{$i}{
width: 2em * $i;
}
$i : $i - 2;
}
// 直到sassscript表达式为假才推出loop
自定义函数++++
- 函数指令,支持自定义函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15// 自定义函数的定义
$grid-width: 40px;
$gutter-width: 10px;
@function funcName($n){
return $n * $grid-width + ($n - 1) + $gutter-width;
}
// 自定义函数的使用
#sidebar{
width: funcName(5);
5 * 40px + 4 + 10px
214px
}