码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-10-18 23:46:22      阅读:1450      评论:0      收藏:0      [点我收藏+]

标签:less css预处理器 mixins 混合 @arguments !important

混合:

混合可以将一个定义好的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

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

标签:less css预处理器 mixins 混合 @arguments !important

原文地址:http://dapengtalk.blog.51cto.com/11549574/1862989

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!