Less学习笔记 -- Mixins（混合）一

Posted 2020-08-15

混合：

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

Less：

.aWidth{width:400px;}
#aHeight{height:600px;}
p{
  .aWidth;
  #aHeight;
}

CSS：

.aWidth {
  width: 400px;
}
#aHeight {
  height: 600px;
}
p {
  width: 400px;
  height: 600px;
}

带选择器的混合集：

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

Less：

.my-hover-mixin(){//加个空括号，不执行这段代码的编译
  &:hover{
    border:1px solid #ddd;
  }
}
button{
  .my-hover-mixin;
}

CSS：

button:hover {
  border: 1px solid #ddd;
}

不输出混合集：

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

代码一：

Less：

.my-mixin{
  color:black;
}
/*看这里*/
.my-other-mixin{
  background:white;
}
.class{
  .my-mixin;
  /*看这里*/
  .my-other-mixin;
}

CSS：

.my-mixin {
  color: black;
}
/*看这里*/
.my-other-mixin {
  background: white;
}
.class {
  color: black;
  /*看这里*/
  background: white;
}

代码二：

Less：

.my-mixin{
  color:black;
}
/*看这里*/
.my-other-mixin(){
  background:white;
}
.class{
  .my-mixin;
  /*看这里*/
  .my-other-mixin;
}

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

.my-mixin {
  color: black;
}
/*看这里*/
.class {
  color: black;
  /*看这里*/
  background: white;
}

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

Less：

.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：

#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：

.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：

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：

.mixin(@color:blue; @padding:10px; @margin:15px;){
  color:@color;
  padding:@padding;
  margin:@margin;
}
.class1{
  .mixin(@margin:20px; @color:#e4393c;)
}
.class2{
  .mixin(#bf6da5; 60px;)
}

CSS：

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

@arguments变量

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

Less：

.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：

.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：

.foo(@bg:#f00, @color:#666){
  background:@bg;
  color:@color;
}
.unimportant{
  .foo;
}
.important{
  .foo !important;
}

CSS：

.unimportant {
  background: #ff0000;
  color: #666666;
}
.important {
  background: #ff0000 !important;
  color: #666666 !important;
}

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

示例一

Less：

@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：

#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：

@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:

#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

本文出自 “dapengtalk” 博客，请务必保留此出处http://dapengtalk.blog.51cto.com/11549574/1862989