less学习笔记

less(类似于jquery):

-less css 是一种动态样式语言，属于css预处理语言的一种。为css的赋予了动态的特性，如变量、继承、运算、函数等。

less的注释

/*我被保留*/

//我不被保留

lee中声明变量用@开头 比如：@变量名：值；

@test_width:300px;

.box{

         width:@test_width;

        height:@test_width

      }

混合

//混合

 .border{ border:solid 5px pink; }

 .box2{

     .border; 

     margin-left:100px;

 }

混合 带参数

//混合--可带参数的

.border_02(@border-width){

        border:solid yellow @border-width;

     }

.test_hunhe{

        .border_02(30px);

     }

混合 默认值 (不传入参数则走默认值,传入参数则走传进来的这个值)

说明

不带参数或值的混合，就可以直接混合class，

如果是带参数和值的，混合的时候就必须加（），

带值中，如果不使用默认值就可以直接在括号里面加上值

//混合--默认带值

.border_03(@border_width:10px){

        border:solid green @border_width;

     }

.div1{

    .border_03();

    //走的是默认值,即10px的边框

   }

.div2{

    .border_03(15px);

    //走的是传递进来的参数,即15px的边框

}

Less中的运算

@test_01:300px;

 .box_02{ 

    width:@test_01 + 20; 

    height: (@test_01 - 200) * 5; 

    background:#ccc - 10; 

}

@arguments包含了所有传递进来的参数。

.border_arg(@w:30px,@c:red,@ww:solid){

border:@arguments;

//包含所有参数 }

.test_arguments{ .border_arg(40px); }

//输出：

.test_arguments{ .border:40px #ff0000 solid; }

三角形

匹配模式：即是事先写好样式块，需要时调用即可，且可设置参数，在实际运用中可以通过修改参数来达到变化的目的。

注意：@_ 该意思为不管调用哪种样式块都会加上该样式块的样式。

.triangle(top,@w:10px,@c:#ccc){

border-width:@w;

border-color:transparent transparent @c transparent;

border-style: dashed dashed solid dashed; }

.triangle(bottom,@w:10px,@c:#ccc){

border-width:@w;

border-color:@c transparent transparent transparent;

border-style:solid dashed dashed dashed; }

.triangle(left,@w:10px,@c:#ccc){

border-width:@w;

border-color:transparent @c transparent transparent;

border-style:dashed solid dashed dashed; }

.triangle(right,@w:10px,@c:#ccc){

b order-width:@w;

border-color:transparent transparent transparent @c;

border-style: dashed dashed dashed solid; }

.triangle(@_,@w:10px,@c:#ccc){

width:0;

height:0;

overflow: hidden; } .

sanjiao{ .triangle(right); }

嵌套规则

a{ float:left; 

&:hover{ 

 //& 表示上一层选择器

 color:red; } }

less中的清除浮动：

.clearfix{ 

    &:after{

         content:"";

         display:block; 

        clear:both; } 

    zoom:1;

 }