Less学习笔记 -- Mixins(混合)一


混合:

混合可以将一个定义好的classA轻松的引入到另一个classB中,从而简单实现classB继承classA中的所有属性。任何CSS中的class或者id都可以引入

Less:

1
2
3
4
5
6
.aWidth{width:400px;}
#aHeight{height:600px;}
p{
  .aWidth;
  #aHeight;
}

CSS:

1
2
3
4
5
6
7
8
9
10
.aWidth {
  width400px;
}
#aHeight {
  height600px;
}
p {
  width400px;
  height600px;
}


带选择器的混合集:

混合集不仅可以包含各种属性,而且可以包含各种选择器

Less:

1
2
3
4
5
6
7
8
.my-hover-mixin(){//加个空括号,不执行这段代码的编译
  &:hover{
    border:1px solid #ddd;
  }
}
button{
  .my-hover-mixin;
}


CSS:

1
2
3
button:hover {
  border1px solid #ddd;
}


不输出混合集:

如果你想创建一个混合集,但是却不想让它输出到你的样式中,你可以在混合集的名字后面加一个括号。这句话怎么理解呢?对比以下两段代码:

代码一:

Less:

1
2
3
4
5
6
7
8
9
10
11
12
.my-mixin{
  color:black;
}
/*看这里*/
.my-other-mixin{
  background:white;
}
.class{
  .my-mixin;
  /*看这里*/
  .my-other-mixin;
}


CSS:

1
2
3
4
5
6
7
8
9
10
11
12
.my-mixin {
  colorblack;
}
/*看这里*/
.my-other-mixin {
  backgroundwhite;
}
.class {
  colorblack;
  /*看这里*/
  backgroundwhite;
}


代码二:

Less:

1
2
3
4
5
6
7
8
9
10
11
12
.my-mixin{
  color:black;
}
/*看这里*/
.my-other-mixin(){
  background:white;
}
.class{
  .my-mixin;
  /*看这里*/
  .my-other-mixin;
}


CSS:带空括号的混合集并没有编译过来,但是可以编译到另一个引用它的选择器里面

1
2
3
4
5
6
7
8
9
.my-mixin {
  colorblack;
}
/*看这里*/
.class {
  colorblack;
  /*看这里*/
  backgroundwhite;
}


我们还可以带参数的调用,就像使用函数一样

Less:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.filter(@blur){
  -webkit-filter:blur(@blur);
  -moz-filter:blur(@blur);
  -ms-filter:blur(@blur);
  filter:blur(@blur);
}
.border-radius(@radius:5px){
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
#section{
  .border-radius;
  /*如果写公共样式的时候没有设定具体的数值,引用的时候就必须设定,否则出不来效果*/
  .filter(5px);
}
#footer{.border-radius(10px);}

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#section {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  /*如果写公共样式的时候没有设定具体的数值,引用的时候就必须设定,否则出不来效果*/
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}
#footer {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}


带多个参数的混合

参数可以用逗号分号分隔,但是推荐用分号分隔。

定义多个具有相同名称和参数数量的mixins是合法的,less会使用它可以使用的属性。如果使用mixin的时候只带一个参数,比如.mixin(red),这个属性会导致所有的mixin都会强制使用这个明确的参数:

Less:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.mixin(@color) {
  color-1: @color;
}
.mixin(@color; @padding2px) {
  color-2: @color;
  padding-2: @padding;
}
.mixin(@color; @padding; @margin5px) {
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}
 
h1{
  .mixin(red);
}
div{
  .mixin(green;4px);
}
span{
  .mixin(blue6px8px);
}


CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
h1 {
  color-1: #ff0000;
  color-2: #ff0000;
  padding-2: 2px;
}
div {
  color-2: #008000;
  padding-2: 4px;
  color-3: #008000;
  padding-3: 4px;
  margin5px 5px 5px 5px;
}
span {
  color-3: #0000ff;
  padding-3: 6px;
  margin8px 8px 8px 8px;
}


命名参数

引用mixin时可以通过参数名称而不是参数的位置来为mixin提供参数值,任何参数都通过它的名称来引用,而不是特定的顺序

Less:

1
2
3
4
5
6
7
8
9
10
11
.mixin(@color:blue; @padding:10px; @margin:15px;){
  color:@color;
  padding:@padding;
  margin:@margin;
}
.class1{
  .mixin(@margin:20px; @color:#e4393c;)
}
.class2{
  .mixin(#bf6da560px;)
}


CSS:

1
2
3
4
5
6
7
8
9
10
.class1 {
  color#e4393c;
  padding10px;
  margin20px;
}
.class2 {
  color#bf6da5;
  padding60px;
  margin15px;
}


@arguments变量

arguments在Javascript中代表所有的参数,在这里也是同样的意思,只不过用法稍有区别。如果你不想单个单个的处理参数,这一特性是很有用的:

Less:

1
2
3
4
5
6
7
8
.box-shadow(@x:0; @y:0; @blur:1px; @color:#000;){
  -webkit-box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  box-shadow: @arguments;
}
.big-block{
  .box-shadow(2px5px;)
}


CSS:

1
2
3
4
5
.big-block {
  -webkit-box-shadow: 2px 5px 1px #000000;
  -moz-box-shadow: 2px 5px 1px #000000;
  box-shadow: 2px 5px 1px #000000;
}



!important关键字

在调用的混合集后面追加!important关键字,可以使混合集里面所有的属性都继承!important

Less:

1
2
3
4
5
6
7
8
9
10
.foo(@bg:#f00, @color:#666){
  background:@bg;
  color:@color;
}
.unimportant{
  .foo;
}
.important{
  .foo !important;
}


CSS:

1
2
3
4
5
6
7
8
.unimportant {
  background#ff0000;
  color#666666;
}
.important {
  background#ff0000 !important;
  color#666666 !important;
}



在这里,也可以体验一把Less在实际开发中关于提高代码维护,给我们带来的魅力

示例一

Less:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@pink:#f0f;
#header{
  h2{
    font-size:26px;
    font-weight:bold;
  }
  .sub_title{
    color:@pink;
  }
  .study_list{
    color:@pink+111;
  }
  p{
    font-size:12px;
    a{
      text-decorationnone;
      &:hover{
        border-width:1px;
        color:@pink+666;
      }
    }
  }
}


CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#header h2 {
  font-size26px;
  font-weightbold;
}
#header .sub_title {
  color#ff00ff;
}
#header .study_list {
  color#ff6fff;
}
#header p {
  font-size12px;
}
#header p a {
  text-decorationnone;
}
#header p a:hover {
  border-width1px;
  color#ffffff;
}


示例二

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
@url:"../images";
.filter(@blur){
  -webkit-filter:blur(@blur);
  -moz-filter:blur(@blur);
  -ms-filter:blur(@blur);
  filter:blur(@blur);
}
.border-radius(@radius:5px){
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
 
#loginForm{
  width:80%;
  margin:0 auto;
  ul{
    li{
      margin:15px 0;
      &:nth-child(2){
        position:relative;
      }
      label{
        color:#d4d2d2;
        font-family:'Microsoft Yahei';
        font-weight:bold;
        font-size:1.1em;
      }
    }
  }
  .imgBground{
    width:100%;
    height:28vh;
    filter:url(blur.svg#blur);
    .filter(5px);
    .border-radius(10px);
    background:url('@{url}/1.jpg');
  }


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
#loginForm {
  width80%;
  margin0 auto;
}
#loginForm ul li {
  margin15px 0;
}
#loginForm ul li:nth-child(2) {
  positionrelative;
}
#loginForm ul li label {
  color#d4d2d2;
  font-family'Microsoft Yahei';
  font-weightbold;
  font-size1.1em;
}
#loginForm .imgBground {
  width100%;
  height28vh;
  filter: url(blur.svg#blur);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  backgroundurl('../images/1.jpg');
}



详情参考官方文档:

http://www.css88.com/doc/less/features/#mixins-feature

本文转自   frwupeng517   51CTO博客,原文链接:http://blog.51cto.com/dapengtalk/1862989

上一篇:【云周刊】第192期:阿里系统软件技术2018中国开源年度报告发布,阿里系独占鳌头


下一篇:Java8之stream流