Ray 的记录站

日常开发实践记录

0%

SASS 基础知识

同 CSS 相比,SASS 的一些额外能力都是为软件工程化服务的,因此有必要加以了解。

可以定义和使用变量:

1
2
3
4
5
6
7
$main-fonts: Arial, sans-serif;
$headings-color: green;

h1 {
font-family: $main-fonts;
color: $headings-color;
}

可以嵌套定义选择器规则:

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
/* css 的原始方式:*/
nav {
background-color: red;
}

nav ul {
list-style: none;
}

nav ul li {
display: inline-block;
}

/*sass 的方式: */

nav {
background-color: red;

ul {
list-style: none;

li {
display: inline-block;
}
}
}

可以通过 mixin 创建可重用的 CSS,mixin 在 SASS 中就是一组可重用的 CSS 规则,并且支持传参:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@mixin box-shadow($x, $y, $blur, $c){ 
-webkit-box-shadow: $x $y $blur $c;
-moz-box-shadow: $x $y $blur $c;
-ms-box-shadow: $x $y $blur $c;
box-shadow: $x $y $blur $c;
}
/*这样在不同的位置都可以引用这个 mixin 而不用重复写*/

div {
@include box-shadow(0px, 0px, 4px, #fff);
}

.textContainer {
@include box-shadow(0px, 1px, 5px, #fff);
}

在 SASS 中支持逻辑判断:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@mixin make-bold($condition) {
@if $condition == true {
font-weight: bold;
}
}

@mixin text-effect($val) {
@if $val == danger {
color: red;
}
@else if $val == alert {
color: yellow;
}
@else if $val == success {
color: green;
}
@else {
color: black;
}
}

可以使用循环:

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
/* 普通 for 循环 */
@for $i from 1 through 12 {
.col-#{$i} { width: 100%/12 * $i; }
}

/* for each 方式 */
@each $color in blue, red, green {
.#{$color}-text {color: $color;}
}

/* 定义一个字典变量后再循环 */
$colors: (color1: blue, color2: red, color3: green);
@each $key, $color in $colors {
.#{$color}-text {
color: $color;
}
}

/* while 循环 */
$x: 1;
@while $x < 13 {
.col-#{$x} {
width: 100%/12 * $x;
}
$x: $x + 1;
}

/* 这样在比如 H1 到 H6 的 font-size 赋值上就非常方便了 */

可以将自定义的 Style 划分到多个 partial 中,SASS 中的 Partial 是可被其他文件引用的一类特殊文件。Partial 的文件名以 _ 开头,扩展名为 .scss,要引入另外一个 Partial,可以使用 @import,比如有个 Partial 文件名为 _mixins.scss,想在 main.scss 中使用,则可以:@import 'mixins',当引入后,Partial 中的所有变量,mixin 和其他代码都可以在引用者文件中使用。

可以对另外一个 selector 进行继承操作,这样样式的覆盖就非常明显和可控了:

1
2
3
4
5
6
7
8
9
10
11
12
.panel{
background-color: red;
height: 70px;
border: 2px solid green;
}

/* 继承后覆盖一些样式 */
.big-panel{
@extend .panel;
width: 150px;
font-size: 2em;
}