LESS详解之混合(Mixins)初级

在LESS中,有很多方式都可以称作混合。比如继承已有的样式,调用有参数的类名等。在LESS详解之混合都会为大家一一介绍的。

 

  继承类名

 

在 LESS 中,可以定义一些通用的属性集为一个 class,然后在另一个 class 中去调用这些属性。如果我们现在需要在其他 class 中引入那些通用的属性集,那么我们只需要在任何 class 中调用就可以了。任何 CSS class, id 属性集都可以以同样的方式引入。小例子如下

 

LESS代码

 

[plain][/plain] view plaincopyprint?

  1. .width {
  2.     width:1232px;
  3. }
  4. #height {
  5.     height:2980px;
  6. }
  7. .long {
  8.     .width;
  9.     .meng {
  10.         #height;
  11.         .width;
  12.     }
  13. }

 

 

编译后的CSS代码

 

[css][/css] view plaincopyprint?

  1. .width {
  2.   width: 1232px;
  3. }
  4. #height {
  5.   height: 2980px;
  6. }
  7. .long {
  8.   width: 1232px;
  9. }
  10. .long .meng {
  11.   height: 2980px;
  12.   width: 1232px;
  13. }

 

 

  带参数混合

 

在 LESS 中,你还可以像函数一样定义一个带参数的属性集合,然后在其他选择器中像调用它。小例子如下

 

LESS代码

 

[plain][/plain] view plaincopyprint?

  1. .width (@width) {
  2.     width:@width;
  3. }
  4. #height (@height) {
  5.     height:@height;
  6. }
  7. .long {
  8.     .width(20px);
  9.     .meng {
  10.         #height(30em);
  11.         .width(50%);
  12.     }
  13. }

 

 

编译后的CSS代码

[css][/css] view plaincopyprint?

  1. .long {
  2.   width: 20px;
  3. }
  4. .long .meng {
  5.   height: 30em;
  6.   width: 50%;
  7. }

 

  隐藏属性继承

 

你也可以定义不带参数属性集合,如果你想隐藏这个属性集合,不让它暴露到 CSS 中去,但是你还想在其他的属性集合中引用,你会发现这个方法非常的好用。小例子如下

 

LESS代码

 

[plain][/plain] view plaincopyprint?

  1. .width () {
  2.     width:1234px;
  3. }
  4. #height () {
  5.     height:5678px;
  6. }
  7. .long {
  8.     .width();
  9.     .meng {
  10.         #height();
  11.         .width();
  12.     }
  13. }

 

 

编译后的CSS代码

[css][/css] view plaincopyprint?

  1. .long {
  2.   width: 1234px;
  3. }
  4. .long .meng {
  5.   height: 5678px;
  6.   width: 1234px;
  7. }

 

  默认值混合

 

我们还可以像这样给参数设置默认值。有了默认值,我们可以不用设置属性值也能被调用。小例子如下

 

LESS代码

 

[plain][/plain] view plaincopyprint?

  1. .width (@width : 2345px) {
  2.     width:@width;
  3. }
  4. #height (@height : 6789px) {
  5.     height:@height;
  6. }
  7. .long {
  8.     .width();
  9.     #height(753px);
  10.     .meng {
  11.         #height();
  12.         .width(951px);
  13.     }
  14. }

 

 

编译后的CSS代码

[css][/css] view plaincopyprint?

  1. .long {
  2.   width: 2345px;
  3.   height: 753px;
  4. }
  5. .long .meng {
  6.   height: 6789px;
  7.   width: 951px;
  8. }

 

 

LESS详解之混合(Mixins)初级主要为大家介绍了一些LESS中有关混合(Mixins)的初级用法。只有掌握好了LESS混合中初级用法才更好的掌握一些比较高级的用法。希望LESS详解之混合(Mixins)初级能为大家有所帮助。

标签