less预编译语言使用总结

Posted learnings

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了less预编译语言使用总结相关的知识,希望对你有一定的参考价值。

以前就使用过less和sass,其实很简单,就是很长时间不用,忘记语法了,现在来总结一片使用技巧

一、注释

less的注释不会被编译到css文件中,所以提倡多使用less中的注释:/**/

二、变量

less语言中也有自己的变量,定义变量@变量名:变量值,使用该变量时,直接@变量名,就是该变量值

@width: 300px;

body { background-color: white; }

.div1 { width: @width; }

三、混合(mixin)

混合可以将一个定义好的class A轻松引入到另一个class B中,从而简单实现class B继承class A中所有属性,还可以带参数地调用。

例如定义一个样式类.border,直接用到另一个样式类.box中,另一个样式类就很方便的具有了这个类的样式,很好的实现了css代码的复用;

再例如有一个.box2,它和.box有一些属性相同,那就直接继承.box再做特定的修改即可:

.border{

  border:1px solid black;

}

.box{

  .border;

}

.box2{

  .box;

  margin:20px;

}

混合(mixin):可带参数,以实现传入变量参数来用一个样式类生成各种不同的样式:

.border2(@border_width){   //定义变量参数

  border:@border_width solid black;

}

.box3{

  .border2(5px);//参数位置传入变量以控制不同的样式

}

.box4{

  .border2(10px);

}

混合(mixin)参数可带默认值(多个参数之间使用逗号隔开)

.border3(@border_width2:5px){

  border:@border_width2 solid black;

}

.box5{

.border3();

}

一些常见的兼容性写法就可以用混合封装起来进行简化:

.border_radius(@border_radius:2px){

border-radius:@border_radius;

-moz-border-radius:@border_radius;

}

四、模式匹配

有些情况想根据传入的参数来改变混合的默认呈现,比如:

下面通过less模式匹配,定义不同央视模式的三角(top模式和bottom模式),但无论哪种模式,@_(放在模式参数位置)定义的样式所有模式都公有

.triangle(@_,@w,@c){

  width:0;

  height:0;

  overflow:hidden;

}

.triangle(top,@w,@c){

  border-width:@w;

  border-color:transparent transparent @c transparent;

  borser-style:dashed dashed solid dashed;

}

.triangle(bottom,@w,@c){

  border-width:@w;

  border-color:transparent transparent @c transparent;

  borser-style:solid dashed dashed dashed;

}

.triangle2{

  .trangle(bottom,20px,red);

}

.triangle3{

  .trangle(top,30px,green);

}

五、运算(对变量进行加减乘除等)

@box_width:100px;

.box6{

  width:(@box_width-10)*2;

}

六、嵌套

可以在一个选择器中直接潜逃另一个选择器来实现继承,这样很大程度减少代码量,并且代码看起来结构更清晰:

.list1{

  width:600px;

  height:600px;

  li{//相当于在外边写.list1 li{}

    height:20px;

    a{

      float:left;

      &:hover{   //&代表上一层选择器,所以这样写相当于 .list1 a:hove{}

        color:red;

      }

    }

  }

}

七、@arguments

@arguments包含了所有传递进来的参数,如果你不想单独处理每一个参数的话就可以像这样写:

.box-shadow(@x:0;@y:0,@blur:1px,color:#000){

  box-shadow:@arguments;   //相当于()参数里的值放到了这

  -moz-box-shadow:@auguments;

  -webkit-box-shadow:@arguments;

}

.box-shaow(2px,5px);

八、避免编译

有时候需要输出一些不正确的css语法或者使用一些less不认识的专有语法

//要输出这样的值我们可以在字符串前加一个~

.class1{

  filer:~"ms:alwaysHasItsOwnSyntax.For.Stuff()";

}

 

 完整的Less中文文档: 
http://www.bootcss.com/p/lesscss/


以上是关于less预编译语言使用总结的主要内容,如果未能解决你的问题,请参考以下文章

CSS预编译语言Less的用法总结

Less学习总结

5分钟学会使用Less预编译器

C语言面试题总结

less学习:基础语法总结

C语言面试题总结