BEM

bem 规则： > 表示下一个层级 ^ 表示上一个层级 + 表示紧邻的兄弟元素 . 后面的 - 相当于 less 嵌套规则里的 & 表示前一个类的所有前缀 { } 用来写元素包含的文本

$表示自动顺序补齐，@加数字：表示从哪个开始。 使用$时，如果已经有 1，要从 2 开始，就加上@2 这里就是$@2 () 会把里面的所有内容视为一个整体，就不用关心里面的元素到底有多少层级，就不用^来提多次层级。

1
header.header>.-item{$@2}*3|bem

LESS

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
48
49
50
51
52
53
54
55
#layout(@name) {
    & when(@name=header) {
        height: 60px;
        #bg-color(black);
    }

    & when(@name=banner) {
        height: 560px;
        background-color: #6a6593;
    }

    & when(@name=recommend) {
        height: 560px;
        #bg-color(white);
    }

    & when(@name=courses) {
        height: 560px;
        #bg-color(pale);
        overflow: hidden;
    }

    & when(@name=footer) {
        height: 560px;

        #bg-color(black);
    }

    position: relative; //第一种给全部模块加上
}

#layout(@name) {
    position:relative;//第二种给全部模块加上
}

.header {
    #layout(header);
}

.banner {
    #layout(banner);
}

.recommend {
    #layout(recommend);
}

.courses{
    #layout(courses);
}

.footer{
    #layout(footer);
}

1
2
3
4
5
6
7
8
// 功能样式定义
#center-h(@width) {
    left: 50%;
    margin-left: @width*-.5;
}
#bg-image(@src){
    background-image: url("../images/@{src}");
}
1
2
3
4
.cover-background() {
    background-size: contain;
    background+_:no-repeat center;
}

background+是拼接的作用，之前使用 background 设置的样式与现在的图片地址进行拼接，而不是覆盖的作用。默认值用逗号隔开，但是 background 属性值中间使用空格隔开的，所以使用_，代表空格。
如：

1
2
3
4
5
6
7
8
9
10
.header {
    #layout(header);
    .logo {
        width: 128px;
        height: 36px;
        background+_: url(../images/logo.png);
       .cover-background();
        .fl();
    }
}
1
2
3
4
5
6
7
8
9
10
&__submit {
           display: block;
           position: absolute;
           right: 25px;
           top: 4px;

           background-position: 0 0 ;
           #square(22px);
           #bg-image("icon-1-_w22.png");
       }

插入图标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
&__phone:before,
      &__message:before,
      &__mail:before{
          content: "";
          display: block;
          position: absolute;
          left: 19px;
          top: 19px;
          #square(22px);
          #bg-image("icon-1-sprite_w22.png");
      }
      &__phone:before{
          background-position: 0 -22px ;
      }
      &__message:before{
          background-position: 0 -44px ;
      }
      &__mail:before{
          background-position: 0 -66px ;
      }

人民符号

1
2
3
4
5
6
7
8
9
  i{
     font-style: normal;
    padding: 0 3px;
    vertical-align: super;
    }
···

clearfix

.clearfix() {
&:after {
content: “”;
display: block;
font-size: 0;
line-height: 0;
clear: both;
zoom: 1;
}
}