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 {   width: 400px; } #aHeight {   height: 600px; } p {   width: 400px;   height: 600px; }

带选择器的混合集：

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

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 {   border: 1px 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 {   color: black; } /*看这里*/ .my-other-mixin {   background: white; } .class {   color: black;   /*看这里*/   background: white; }

代码二：

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 {   color: black; } /*看这里*/ .class {   color: black;   /*看这里*/   background: white; }

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

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; @padding: 2px) {   color-2: @color;   padding-2: @padding; } .mixin(@color; @padding; @margin: 5px) {   color-3: @color;   padding-3: @padding;   margin: @margin @margin @margin @margin; } h1{   .mixin(red); } div{   .mixin(green;4px); } span{   .mixin(blue; 6px; 8px); }

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;   margin: 5px 5px 5px 5px; } span {   color-3: #0000ff;   padding-3: 6px;   margin: 8px 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(#bf6da5; 60px;) }

CSS：

1 2 3 4 5 6 7 8 9 10

.class1 {   color: #e4393c;   padding: 10px;   margin: 20px; } .class2 {   color: #bf6da5;   padding: 60px;   margin: 15px; }

@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(2px; 5px;) }

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-decoration: none;       &: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-size: 26px;   font-weight: bold; } #header .sub_title {   color: #ff00ff; } #header .study_list {   color: #ff6fff; } #header p {   font-size: 12px; } #header p a {   text-decoration: none; } #header p a:hover {   border-width: 1px;   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 {   width: 80%;   margin: 0 auto; } #loginForm ul li {   margin: 15px 0; } #loginForm ul li:nth-child(2) {   position: relative; } #loginForm ul li label {   color: #d4d2d2;   font-family: 'Microsoft Yahei';   font-weight: bold;   font-size: 1.1em; } #loginForm .imgBground {   width: 100%;   height: 28vh;   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;   background: url('../images/1.jpg'); }

详情参考官方文档：

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

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

总结

以上是生活随笔为你收集整理的Less学习笔记 -- Mixins（混合）一的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。