CSS讲解(7)-预处理

前端CSSCSS讲解 阅读量

css

介绍

CSS预处理器：

  • 基于CSS的另一种语言
  • 通过工具编译成CSS
  • 添加了很多CSS不具备的特性
  • 能提升CSS文件的组织

方案：

  • less
    • node.js 写的
    • 安装： npm install less
  • sass
    • ruby 写的

功能：

  • 嵌套 放映层级和约束
  • 变量和计算 减少重复代码
  • Extend和Mixin 代码片段
  • 循环 适用于复杂有规律的样式
  • import CSS文件模块化

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

& 平级,把空格去掉

编译成CSS后：

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

sass嵌套

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

写法和less是一样的，编程成css也是一样的。
sass输出有很多种格式

less变量

@ 变量定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

sass变量

$ 变量定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

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

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

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

less loop

比如要实现如下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;
}

使用less的递归的方式：

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

sass loop

1
2
3
4
5
@for $i from 1 through 12 {
    .col-#{$i} {
        width: 1000px/12*$i;
    }
}

less import

1
2
3
@import "./6-import-variable";
@import "./6-import-module1";
@import "./6-import-module2";

sass import

1
2
3
@import "./6-import-variable";
@import "./6-import-module1";
@import "./6-import-module2";

预处理器框架

  • SASS - Compass
  • Less - Lesshat / EST
  • 提供现成的mixin
  • 类似JS类库 封装常用功能

Compass

Est是一个基于Less的mixin库，它可以帮助您更高效地编写更少的代码。

Est提供了100多个方便的mixin，只有在调用它们时才生成样式规则。Est没有为特定的HTML类名提供任何样式，因为这样的“可视化类名”可能会污染HTML语义。您可以基于est构建自己的样式库来加速开发。

总结

  • 常见的CSS预处理器

    • Less（Node.js）
    • Sass (Ruby 有Node版本)

  • 预处理器的作用

    • 帮助更好地组织CSS代码
    • 提高代码复用率
    • 提高升码维护性

  • 预处理器的能力

    • 嵌套 放映层级和约束
    • 变量和计算 减少重复代码
    • Extend和Mixin代码片段
    • 循环 适用于复杂有规律的样式
    • import CSS文件模块化

  • 优缺点

    • 优点： 提高代码复用率和可维护性
    • 缺点： 需要引入编译过程，有学习成本

Powered by Hexo and Hexo-theme-hiker

Copyright © 2013 - 2021 朝着牛逼的道路一路狂奔 All Rights Reserved.

访客数 : | 访问量 :