CSS预处理器(less 和 sass) CSS预处理器(less 和 sass) CSS预处理器(less 和 sass)

其他 2019-05-21 19:58:03 阅读次数: 0

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 ;
}

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预处理器

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 ;
}

猜你喜欢

转载自www.cnblogs.com/hkduan/p/10901825.html
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022