sass学习中常见语法的一些简单备注

sass中的两种风格

sass又两种风格,一种是以.sass为后缀的,另一种是以.scss为后缀的。基于向原生语法及形式靠拢的原则,我一直以来用的就是.scss这种风格的。所以对于.sass这种风格的我没写过,工具性的东西选择一个适合自己的即可。

注释

1
2
3
/*! 我是凸现注释,即常规的压缩后还会存在的注释 */
/* 我是普通的多行注释,也是标准注释。sass压缩后也许还可以存在,其他压缩工具则可能会让我灰飞烟灭*/
// 我还是注释,不过我是单行注释。一旦压缩,你就见不到我了。

导入css样式:

1
2
3
4
5
//直接引入css文件
@import url("header.css");
//引入模版文件,如引入partials文件夹下的_header.scss(模版文件以下划线为前缀)。当然,这其实是一种简写后的写法。
@import "partials/header";

sass中的变量

sass的变量前面有个美元符号$,至于什么命名规则的话,跟常见语言的命名规则一样,比如:非数字开通,支持- _。

1
2
3
4
5
6
7
8
9
$variable-name:value;
$color: #f50;
.wrap {
color: $color;
}
// 对应的css文件
.wrap {
color: #f50;
}

sass中的“&”

&代表的是完整父级,与前后位置有关系

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// sass 文件
.wrap {
.tit {
font-size: 100%;
&.sub-tit {
font-size: 80%;
}
}
&.tit {
color: #333;
& .sub-tit {
font-size: 90%;
}
}
}
// 对应生成的对应的css文件
.wrap .tit {
font-size: 100%;
}
.wrap .tit.sub-tit {
font-size: 80%;
}
.wrap.tit {
color: #333;
}
.wrap.tit .sub-tit {
font-size: 90%;
}

sass中的“:”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// sass 文件
.border {
border: {
top: 1px #eee solid;
bottom: 1px #bbb dashed;
left: 1px #aaa solid;
radius: 5px;
}
}
// 对应的css文件
.border {
border-top: 1px #eee solid;
border-bottom: 1px #bbb dashed;
border-left: 1px #aaa solid;
border-radius: 5px;
}

@at-root

sass的层级结构看起来很清楚,但是有时候嵌套太多了则就不好了,绝大部分的人都建议控制在三级以内。那么当嵌套过深时,则需要跳出嵌套结构了。所以就有了@at-root这个命令。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div {
div1 {
div2 {
div3 {@
at-root div4 {
style: value;
}
}
}
}
}
// 如果没又使用@at-root,则生成的css会是:
div div1 div2 div3 div4 { style: value;}
// 使用@at-root后则是:
div4 { style:value;}

普通代码扩展及引入

  • 未涉及变量的纯样式引用使用@extend
1
2
3
4
5
6
7
.box {
css: value1;
}
.box-extend {
@extend .box;
css: value2;
}

有多个引入的话,则用英文字符的逗号隔开:

1
@extend .box1, .box2,...;

纯扩展用%

1
2
3
%box { css-style;}
.box-extend { @extend %box;}
  • 带有变量参数的混合宏@minix,则使用@include。混合宏模块文件要在申明变量模块之后使用,否则会报错并提示变量未定义。

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@minxin bd($value) {//$color是待写入的自定义参数
style: 1px solid $value;
}
引用:
div { @include bd(#eee);}
@mixin border($color) {
border: 1px solid $color;
}
.border {
@include border(#eee);
}
// 生成对应的css文件
.border {
border: 1px solid #eee;
}

若带有默认值,则在没有新赋值的情况下输出默认的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@mixin border-delault($color:#aaa) {
border: 1px solid $color;
}
.border-delault {
@include border-delault;
}
.border-delault-value {
@include border-delault(#bbb);
}
// 对应的css
.border-delault {
border: 1px solid #aaa;
}
.border-delault-value {
border: 1px solid #bbb;
}

赋值中的默认值!default。如果有新参数则默认值失效,否则使用默认值。

$defined-style-type: value !default;

sass中的常见运算

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
$width: 40%;
$width2: 10%;
.width-1 {
width: $width;
}
.width-1-1 {
width: $width + $width2;
}
.width2 {
width: 100% - $width;
}
.width2-1 {
width: 100% -$width - $width2*2;
}
.width3-1, .width3-2 {
width: (100% - $width)/2;
}
.width4 {
width: 100% - $width*2;
}
// 对应的css
.width-1 {
width: 40%;
}
.width-1-1 {
width: 50%;
}
.width2 {
width: 60%;
}
.width2-1 {
width: 40%;
}
.width3-1, .width3-2 {
width: 30%;
}
.width4 {
width: 20%;
}

@for循环

1
2
3
4
5
6
7
8
@for $i from 1 through 4 {//其中i是自定义变量,从1到4循环4次。1和4是自定义的开始和结束。
.div-#{$i} {
style: css-#{$i}.jpg;
}
}
@for $i from 1 to 4 {//从1到4循环3次,只包括1、2、3
xxx;
}

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
@for $i from 1 through 4 {
.col-#{$i} {
background: url(images-#{$i}.jpg);
}
}
@for $j from 1 to 4 {
.row-#{$j} {
background: url(images-#{$j}.jpg);
}
}
// 对应的css
.col-1 {
background: url(images-1.jpg);
}
.col-2 {
background: url(images-2.jpg);
}
.col-3 {
background: url(images-3.jpg);
}
.col-4 {
background: url(images-4.jpg);
}
.row-1 {
background: url(images-1.jpg);
}
.row-2 {
background: url(images-2.jpg);
}
.row-3 {
background: url(images-3.jpg);
}

补充:

sass的语法不止这些,还有包括颜色处理,if循环等等。只不过,个人在实际工作中,截至目前主要用到的就是上面的那些了。

自动化工具

自动化工具目前主要就是grunt和gulp了,这两个我都有接触过。一开始用的是grunt,后来不知不觉就用了gulp了。这里有自己之前配置好了的自动化工具。该工具可以实现sass自动编译成css,以及对css的压缩。同时,可以自动检测内容改动而刷新浏览器(还需要一个livereload的浏览器插件)。

一些学习资料:

坚持原创分享,您的支持将鼓励我继续创作!