CSS预处理器(less 和 sass)

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;
}
 
.box1{
    .box();
    line-height: 2em;
}
.box2{
    .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;
}
.box1 {
  color: green;
  line-height: 2em;
}
.box2 {
  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
.module1{
    .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
.module2{
    .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
.module1 .box {
  font-size: 16px;
  color: blue;
}
.module1 .tips {
  font-size: 14px;
  color: #ccccff;
}
.module2 .box {
  font-size: 18px;
  color: blue;
}
.module2 .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
.module1{
    .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
.module2{
    .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
.module1 .box {
  font-size: 16px;
  color: blue;
}
.module1 .tips {
  font-size: 14px;
  color: #ccccff;
}
.module2 .box {
  font-size: 18px;
  color: blue;
}
.module2 .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;
}
 
.box1{
    .box();
    line-height: 2em;
}
.box2{
    .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;
}
.box1 {
  color: green;
  line-height: 2em;
}
.box2 {
  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
.module1{
    .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
.module2{
    .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
.module1 .box {
  font-size: 16px;
  color: blue;
}
.module1 .tips {
  font-size: 14px;
  color: #ccccff;
}
.module2 .box {
  font-size: 18px;
  color: blue;
}
.module2 .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
.module1{
    .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
.module2{
    .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
.module1 .box {
  font-size: 16px;
  color: blue;
}
.module1 .tips {
  font-size: 14px;
  color: #ccccff;
}
.module2 .box {
  font-size: 18px;
  color: blue;
}
.module2 .tips {
  font-size: 16px;
  color: #6666ff;
}
posted @ 2019-05-21 19:24  小段的代码  阅读(469)  评论(0)    收藏  举报