CSS预处理器(less 和 sass)
CSS预处理器
1.基于CSS的另一种语言
2.通过工具编译成CSS
3.添加了很多CSS不具备的特性
4.能提升CSS文件的组织
提供功能：1.嵌套 反映层级和约束 2.变量和计算，减少重复戴拿 3.Extend 和 Mixin 代码片段
4.循环 适用于复杂有规律的样式 5.import CSS 文件模块化
知识点：
1.less（嵌套）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
body{
padding
:
0
;
margin
:
0
;
}
.wrapper{
background
:
white
;
.nav{
font-size
:
12px
;
}
.content{
font-size
:
14px
;
&:hover{
background
:
red
;
}
}
}
|
2.sass 嵌套
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
body {
padding
:
0
;
margin
:
0
;
}
.wrapper {
background
:
white
;
}
.wrapper .nav {
font-size
:
12px
;
}
.wrapper .content {
font-size
:
14px
;
}
.wrapper .
content
:hover {
background
:
red
;
}
|
3.less 变量
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
@fontSize:
12px
;
@bgColor:
red
;
body{
padding
:
0
;
margin
:
0
;
}
.wrapper{
background
:lighten(@bgColor,
40%
);
.nav{
font-size
: @fontSize;
}
.content{
font-size
: @fontSize +
2px
;
&:hover{
background
:@bgColor;
}
}
}
|
需要改动变量时，只需改动变量的值然后编译成 css 文件即可,一次定义，多次使用，方便维护
4.sass 变量
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
$fontSize:
12px
;
$bgColor:
red
;
body{
padding
:
0
;
margin
:
0
;
}
.wrapper{
background
:lighten($bgColor,
40%
);
.nav{
font-size
: $fontSize;
}
.content{
font-size
: $fontSize +
2px
;
&:hover{
background
:
red
;
}
}
}
|
sass 和 css 不兼容，尽量避免混淆，@在css 中是有意义的，故使用 $.
5.less mixin
有一段代码想公共使用（复用）的情况下：
|
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
41
|
@fontSize:
12px
;
@bgColor:
red
;
.box{
color
:
green
;
}
.box
1
{
.box();
line-height
:
2em
;
}
.box
2
{
.box();
line-height
:
3em
;
}
.
block
(@fontSize){
font-size
: @fontSize;
border
:
1px
solid
#ccc
;
border-radius:
4px
;
}
body{
padding
:
0
;
margin
:
0
;
}
.wrapper{
background
:lighten(@bgColor,
40%
);
.nav{
.
block
(@fontSize);
}
.content{
.
block
(@fontSize +
2px
);
&:hover{
background
:
red
;
}
}
}
|
编译成css
|
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
|
.box {
color
:
green
;
}
.box
1
{
color
:
green
;
line-height
:
2em
;
}
.box
2
{
color
:
green
;
line-height
:
3em
;
}
body {
padding
:
0
;
margin
:
0
;
}
.wrapper {
background
:
#ffcccc
;
}
.wrapper .nav {
font-size
:
12px
;
border
:
1px
solid
#ccc
;
border-radius:
4px
;
}
.wrapper .content {
font-size
:
14px
;
border
:
1px
solid
#ccc
;
border-radius:
4px
;
}
.wrapper .
content
:hover {
background
:
red
;
}
|
6. sass mixin
|
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
|
$fontSize:
12px
;
$bgColor:
red
;
@mixin
block
($fontSize){
font-size
: $fontSize;
border
:
1px
solid
#ccc
;
border-radius:
4px
;
}
body{
padding
:
0
;
margin
:
0
;
}
.wrapper{
background
:lighten($bgColor,
40%
);
.nav{
@include
block
($fontSize);
}
.content{
@include
block
($fontSize +
2px
);
&:hover{
background
:
red
;
}
}
}
|
与 less 不同点：1. less 需要 @mixin 2.参数名称不一样 3.不需要class，直接指定其名字
编译成 css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
body {
padding
:
0
;
margin
:
0
;
}
.wrapper {
background
:
#ffcccc
;
}
.wrapper .nav {
font-size
:
12px
;
border
:
1px
solid
#ccc
;
border-radius:
4px
;
}
.wrapper .content {
font-size
:
14px
;
border
:
1px
solid
#ccc
;
border-radius:
4px
;
}
.wrapper .
content
:hover {
background
:
red
;
}
|
7.less extend
解决重复代码问题，减少 css 体积
|
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
|
@fontSize:
12px
;
@bgColor:
red
;
.
block
{
font-size
: @fontSize;
border
:
1px
solid
#ccc
;
border-radius:
4px
;
}
body{
padding
:
0
;
margin
:
0
;
}
.wrapper{
background
:lighten(@bgColor,
40%
);
.nav:extend(.
block
){
color
:
#333
;
}
.content{
&:extend(.
block
);
&:hover{
background
:
red
;
}
}
}
|
mixin 是把代码直接复制过来，extend 是把选择器提取出来，把公共样式写到一起
编译成 css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
.
block
,
.wrapper .nav,
.wrapper .content {
font-size
:
12px
;
border
:
1px
solid
#ccc
;
border-radius:
4px
;
}
body {
padding
:
0
;
margin
:
0
;
}
.wrapper {
background
:
#ffcccc
;
}
.wrapper .nav {
color
:
#333
;
}
.wrapper .
content
:hover {
background
:
red
;
}
|
8. sass extend
|
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
|
$fontSize:
12px
;
$bgColor:
red
;
.
block
{
font-size
: $fontSize;
border
:
1px
solid
#ccc
;
border-radius:
4px
;
}
body{
padding
:
0
;
margin
:
0
;
}
.wrapper{
background
:lighten($bgColor,
40%
);
.nav{
@extend .
block
;
color
:
#333
;
}
.content{
@extend .
block
;
&:hover{
background
:
red
;
}
}
}
|
编译成 css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
.
block
, .wrapper .nav, .wrapper .content {
font-size
:
12px
;
border
:
1px
solid
#ccc
;
border-radius:
4px
;
}
body {
padding
:
0
;
margin
:
0
;
}
.wrapper {
background
:
#ffcccc
;
}
.wrapper .nav {
color
:
#333
;
}
.wrapper .
content
:hover {
background
:
red
;
}
|
sass 中 div 没有换行，其余再无区别，在样式表中就可以完全完成样式变更的操作，更加集中地维护代码
9.less loop (循环）
高度有规律的情况（网格） 采用递归，出口就是 n <= 0 时，跳出循环
|
1
2
3
4
5
6
7
8
|
.gen-col(@n) when (@n >
0
){
.gen-col(@n -
1
);
.col-@{n}{
width
:
1000px
/
12
*@n;
}
}
.gen-col(
12
);
|
编译成 css
|
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
|
.col
-12
{
width
:
1000px
;
}
.col
-11
{
width
:
916.66666667px
;
}
.col
-10
{
width
:
833.33333333px
;
}
.col
-9
{
width
:
750px
;
}
.col
-8
{
width
:
666.66666667px
;
}
.col
-7
{
width
:
583.33333333px
;
}
.col
-6
{
width
:
500px
;
}
.col
-5
{
width
:
416.66666667px
;
}
.col
-4
{
width
:
333.33333333px
;
}
.col
-3
{
width
:
250px
;
}
.col
-2
{
width
:
166.66666667px
;
}
.col
-1
{
width
:
83.33333333px
;
}
|
10. sass loop
|
1
2
3
4
5
6
7
8
9
10
|
@mixin gen-col($n){
@if $n >
0
{
@include gen-col($n -
1
);
.col-#{$n}{
width
:
1000px
/
12
*$n;
}
}
}
@include gen-col(
12
);
|
这是类比上面 less 的写法，但 sass 还有更简便的写法，因为 sass 支持 for,故
|
1
2
3
4
5
|
@for $i from
1
through
12
{
.col-#{$i} {
width
:
1000px
/
12
*$i;
}
}
|
编译成 css
|
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
41
42
43
44
45
46
47
|
.col
-1
{
width
:
83.33333px
;
}
.col
-2
{
width
:
166.66667px
;
}
.col
-3
{
width
:
250px
;
}
.col
-4
{
width
:
333.33333px
;
}
.col
-5
{
width
:
416.66667px
;
}
.col
-6
{
width
:
500px
;
}
.col
-7
{
width
:
583.33333px
;
}
.col
-8
{
width
:
666.66667px
;
}
.col
-9
{
width
:
750px
;
}
.col
-10
{
width
:
833.33333px
;
}
.col
-11
{
width
:
916.66667px
;
}
.col
-12
{
width
:
1000px
;
}
|
11. less import
解决 css 模块化 问题
6-import-variable
|
1
2
|
@themeColor:
blue
;
@fontSize:
14px
;
|
6-import-module1
|
1
2
3
4
5
6
7
8
9
10
|
.module
1
{
.box{
font-size
:@fontSize +
2px
;
color
:@themeColor;
}
.tips{
font-size
:@fontSize;
color
:lighten(@themeColor,
40%
);
}
}
|
6-import-module2
|
1
2
3
4
5
6
7
8
9
10
|
.module
2
{
.box{
font-size
:@fontSize +
4px
;
color
:@themeColor;
}
.tips{
font-size
:@fontSize +
2px
;
color
:lighten(@themeColor,
20%
);
}
}
|
less import（可以跨文件使用）
|
1
2
3
|
@import
"./6-import-variable"
;
@import
"./6-import-module1"
;
@import
"./6-import-module2"
;
|
编译成 css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
.module
1
.box {
font-size
:
16px
;
color
:
blue
;
}
.module
1
.tips {
font-size
:
14px
;
color
:
#ccccff
;
}
.module
2
.box {
font-size
:
18px
;
color
:
blue
;
}
.module
2
.tips {
font-size
:
16px
;
color
:
#6666ff
;
}
|
12.sass import
6-import-variable
|
1
2
|
$themeColor:
blue
;
$fontSize:
14px
;
|
6-import-module1
|
1
2
3
4
5
6
7
8
9
10
|
.module
1
{
.box{
font-size
:$fontSize +
2px
;
color
:$themeColor;
}
.tips{
font-size
:$fontSize;
color
:lighten($themeColor,
40%
);
}
}
|
6-import-module2
|
1
2
3
4
5
6
7
8
9
10
|
.module
2
{
.box{
font-size
:$fontSize +
4px
;
color
:$themeColor;
}
.tips{
font-size
:$fontSize +
2px
;
color
:lighten($themeColor,
20%
);
}
}
|
sass import（可以跨文件使用）
|
1
2
3
|
@import
"./6-import-variable"
;
@import
"./6-import-module1"
;
@import
"./6-import-module2"
;
|
编译成 css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
.module
1
.box {
font-size
:
16px
;
color
:
blue
;
}
.module
1
.tips {
font-size
:
14px
;
color
:
#ccccff
;
}
.module
2
.box {
font-size
:
18px
;
color
:
blue
;
}
.module
2
.tips {
font-size
:
16px
;
color
:
#6666ff
;
}
|
CSS预处理器(less 和 sass)
CSS预处理器
1.基于CSS的另一种语言
2.通过工具编译成CSS
3.添加了很多CSS不具备的特性
4.能提升CSS文件的组织
提供功能：1.嵌套 反映层级和约束 2.变量和计算，减少重复戴拿 3.Extend 和 Mixin 代码片段
4.循环 适用于复杂有规律的样式 5.import CSS 文件模块化
知识点：
1.less（嵌套）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
body{
padding
:
0
;
margin
:
0
;
}
.wrapper{
background
:
white
;
.nav{
font-size
:
12px
;
}
.content{
font-size
:
14px
;
&:hover{
background
:
red
;
}
}
}
|
2.sass 嵌套
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
body {
padding
:
0
;
margin
:
0
;
}
.wrapper {
background
:
white
;
}
.wrapper .nav {
font-size
:
12px
;
}
.wrapper .content {
font-size
:
14px
;
}
.wrapper .
content
:hover {
background
:
red
;
}
|
3.less 变量
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
@fontSize:
12px
;
@bgColor:
red
;
body{
padding
:
0
;
margin
:
0
;
}
.wrapper{
background
:lighten(@bgColor,
40%
);
.nav{
font-size
: @fontSize;
}
.content{
font-size
: @fontSize +
2px
;
&:hover{
background
:@bgColor;
}
}
}
|
需要改动变量时，只需改动变量的值然后编译成 css 文件即可,一次定义，多次使用，方便维护
4.sass 变量
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
$fontSize:
12px
;
$bgColor:
red
;
body{
padding
:
0
;
margin
:
0
;
}
.wrapper{
background
:lighten($bgColor,
40%
);
.nav{
font-size
: $fontSize;
}
.content{
font-size
: $fontSize +
2px
;
&:hover{
background
:
red
;
}
}
}
|
sass 和 css 不兼容，尽量避免混淆，@在css 中是有意义的，故使用 $.
5.less mixin
有一段代码想公共使用（复用）的情况下：
|
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
41
|
@fontSize:
12px
;
@bgColor:
red
;
.box{
color
:
green
;
}
.box
1
{
.box();
line-height
:
2em
;
}
.box
2
{
.box();
line-height
:
3em
;
}
.
block
(@fontSize){
font-size
: @fontSize;
border
:
1px
solid
#ccc
;
border-radius:
4px
;
}
body{
padding
:
0
;
margin
:
0
;
}
.wrapper{
background
:lighten(@bgColor,
40%
);
.nav{
.
block
(@fontSize);
}
.content{
.
block
(@fontSize +
2px
);
&:hover{
background
:
red
;
}
}
}
|
编译成css
|
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
|
.box {
color
:
green
;
}
.box
1
{
color
:
green
;
line-height
:
2em
;
}
.box
2
{
color
:
green
;
line-height
:
3em
;
}
body {
padding
:
0
;
margin
:
0
;
}
.wrapper {
background
:
#ffcccc
;
}
.wrapper .nav {
font-size
:
12px
;
border
:
1px
solid
#ccc
;
border-radius:
4px
;
}
.wrapper .content {
font-size
:
14px
;
border
:
1px
solid
#ccc
;
border-radius:
4px
;
}
.wrapper .
content
:hover {
background
:
red
;
}
|
6. sass mixin
|
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
|
$fontSize:
12px
;
$bgColor:
red
;
@mixin
block
($fontSize){
font-size
: $fontSize;
border
:
1px
solid
#ccc
;
border-radius:
4px
;
}
body{
padding
:
0
;
margin
:
0
;
}
.wrapper{
background
:lighten($bgColor,
40%
);
.nav{
@include
block
($fontSize);
}
.content{
@include
block
($fontSize +
2px
);
&:hover{
background
:
red
;
}
}
}
|
与 less 不同点：1. less 需要 @mixin 2.参数名称不一样 3.不需要class，直接指定其名字
编译成 css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
body {
padding
:
0
;
margin
:
0
;
}
.wrapper {
background
:
#ffcccc
;
}
.wrapper .nav {
font-size
:
12px
;
border
:
1px
solid
#ccc
;
border-radius:
4px
;
}
.wrapper .content {
font-size
:
14px
;
border
:
1px
solid
#ccc
;
border-radius:
4px
;
}
.wrapper .
content
:hover {
background
:
red
;
}
|
7.less extend
解决重复代码问题，减少 css 体积
|
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
|
@fontSize:
12px
;
@bgColor:
red
;
.
block
{
font-size
: @fontSize;
border
:
1px
solid
#ccc
;
border-radius:
4px
;
}
body{
padding
:
0
;
margin
:
0
;
}
.wrapper{
background
:lighten(@bgColor,
40%
);
.nav:extend(.
block
){
color
:
#333
;
}
.content{
&:extend(.
block
);
&:hover{
background
:
red
;
}
}
}
|
mixin 是把代码直接复制过来，extend 是把选择器提取出来，把公共样式写到一起
编译成 css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
.
block
,
.wrapper .nav,
.wrapper .content {
font-size
:
12px
;
border
:
1px
solid
#ccc
;
border-radius:
4px
;
}
body {
padding
:
0
;
margin
:
0
;
}
.wrapper {
background
:
#ffcccc
;
}
.wrapper .nav {
color
:
#333
;
}
.wrapper .
content
:hover {
background
:
red
;
}
|
8. sass extend
|
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
|
$fontSize:
12px
;
$bgColor:
red
;
.
block
{
font-size
: $fontSize;
border
:
1px
solid
#ccc
;
border-radius:
4px
;
}
body{
padding
:
0
;
margin
:
0
;
}
.wrapper{
background
:lighten($bgColor,
40%
);
.nav{
@extend .
block
;
color
:
#333
;
}
.content{
@extend .
block
;
&:hover{
background
:
red
;
}
}
}
|
编译成 css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
.
block
, .wrapper .nav, .wrapper .content {
font-size
:
12px
;
border
:
1px
solid
#ccc
;
border-radius:
4px
;
}
body {
padding
:
0
;
margin
:
0
;
}
.wrapper {
background
:
#ffcccc
;
}
.wrapper .nav {
color
:
#333
;
}
.wrapper .
content
:hover {
background
:
red
;
}
|
sass 中 div 没有换行，其余再无区别，在样式表中就可以完全完成样式变更的操作，更加集中地维护代码
9.less loop (循环）
高度有规律的情况（网格） 采用递归，出口就是 n <= 0 时，跳出循环
|
1
2
3
4
5
6
7
8
|
.gen-col(@n) when (@n >
0
){
.gen-col(@n -
1
);
.col-@{n}{
width
:
1000px
/
12
*@n;
}
}
.gen-col(
12
);
|
编译成 css
|
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
|
.col
-12
{
width
:
1000px
;
}
.col
-11
{
width
:
916.66666667px
;
}
.col
-10
{
width
:
833.33333333px
;
}
.col
-9
{
width
:
750px
;
}
.col
-8
{
width
:
666.66666667px
;
}
.col
-7
{
width
:
583.33333333px
;
}
.col
-6
{
width
:
500px
;
}
.col
-5
{
width
:
416.66666667px
;
}
.col
-4
{
width
:
333.33333333px
;
}
.col
-3
{
width
:
250px
;
}
.col
-2
{
width
:
166.66666667px
;
}
.col
-1
{
width
:
83.33333333px
;
}
|
10. sass loop
|
1
2
3
4
5
6
7
8
9
10
|
@mixin gen-col($n){
@if $n >
0
{
@include gen-col($n -
1
);
.col-#{$n}{
width
:
1000px
/
12
*$n;
}
}
}
@include gen-col(
12
);
|
这是类比上面 less 的写法，但 sass 还有更简便的写法，因为 sass 支持 for,故
|
1
2
3
4
5
|
@for $i from
1
through
12
{
.col-#{$i} {
width
:
1000px
/
12
*$i;
}
}
|
编译成 css
|
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
41
42
43
44
45
46
47
|
.col
-1
{
width
:
83.33333px
;
}
.col
-2
{
width
:
166.66667px
;
}
.col
-3
{
width
:
250px
;
}
.col
-4
{
width
:
333.33333px
;
}
.col
-5
{
width
:
416.66667px
;
}
.col
-6
{
width
:
500px
;
}
.col
-7
{
width
:
583.33333px
;
}
.col
-8
{
width
:
666.66667px
;
}
.col
-9
{
width
:
750px
;
}
.col
-10
{
width
:
833.33333px
;
}
.col
-11
{
width
:
916.66667px
;
}
.col
-12
{
width
:
1000px
;
}
|
11. less import
解决 css 模块化 问题
6-import-variable
|
1
2
|
@themeColor:
blue
;
@fontSize:
14px
;
|
6-import-module1
|
1
2
3
4
5
6
7
8
9
10
|
.module
1
{
.box{
font-size
:@fontSize +
2px
;
color
:@themeColor;
}
.tips{
font-size
:@fontSize;
color
:lighten(@themeColor,
40%
);
}
}
|
6-import-module2
|
1
2
3
4
5
6
7
8
9
10
|
.module
2
{
.box{
font-size
:@fontSize +
4px
;
color
:@themeColor;
}
.tips{
font-size
:@fontSize +
2px
;
color
:lighten(@themeColor,
20%
);
}
}
|
less import（可以跨文件使用）
|
1
2
3
|
@import
"./6-import-variable"
;
@import
"./6-import-module1"
;
@import
"./6-import-module2"
;
|
编译成 css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
.module
1
.box {
font-size
:
16px
;
color
:
blue
;
}
.module
1
.tips {
font-size
:
14px
;
color
:
#ccccff
;
}
.module
2
.box {
font-size
:
18px
;
color
:
blue
;
}
.module
2
.tips {
font-size
:
16px
;
color
:
#6666ff
;
}
|
12.sass import
6-import-variable
|
1
2
|
$themeColor:
blue
;
$fontSize:
14px
;
|
6-import-module1
|
1
2
3
4
5
6
7
8
9
10
|
.module
1
{
.box{
font-size
:$fontSize +
2px
;
color
:$themeColor;
}
.tips{
font-size
:$fontSize;
color
:lighten($themeColor,
40%
);
}
}
|
6-import-module2
|
1
2
3
4
5
6
7
8
9
10
|
.module
2
{
.box{
font-size
:$fontSize +
4px
;
color
:$themeColor;
}
.tips{
font-size
:$fontSize +
2px
;
color
:lighten($themeColor,
20%
);
}
}
|
sass import（可以跨文件使用）
|
1
2
3
|
@import
"./6-import-variable"
;
@import
"./6-import-module1"
;
@import
"./6-import-module2"
;
|
编译成 css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
.module
1
.box {
font-size
:
16px
;
color
:
blue
;
}
.module
1
.tips {
font-size
:
14px
;
color
:
#ccccff
;
}
.module
2
.box {
font-size
:
18px
;
color
:
blue
;
}
.module
2
.tips {
font-size
:
16px
;
color
:
#6666ff
;
}
|