less简单的入门知识总结

less的注释：

/**/    会编译出来，作为注释保存在css文件里面//    仅仅是注释，不会再被编译

less的变量

//@变量名:变量值;@red:red;body{    background:@red;}//编译结果body{    background:red;}

less混合

//@变量名:变量值;@red:red;.box{    background:@red;    .border}.border{    border:1px solid black;}//编译结果.box{    background:red;    border:1px solid black;}.border{    border:1px solid black;}

less混合—-可带参数

//@变量名:变量值;@red:red;.box{    background:@red;    .border(1px);}.border(@size){    border:@size solid black;}//编译结果.box{    background:red;    border:1px solid black;}.border{    border:1px solid black;}

less混合—-默认带值

//@变量名:变量值;@red:red;.box{    background:@red;    .border();//一定得带括号，当需要更改值时，.border(2px);}.border(@size：1px){    border:@size solid black;}//编译结果.box{    background:red;    border:1px solid black;}.border{    border:1px solid black;}

less匹配模式

//相当于if.triangle(top,@w:5px,@c:#ccc){//向上三角形    border-width: @w;    boeder-color: transparent transparent @c transparent;    border-style: dashed dashed solid dashed; //使用dashed设置虚线样式，确保ie下面正常显示三角形}.triangle(bottom,@w:5px,@c:#ccc){//向下三角形    border-width: @w;    boeder-color: @c transparent transparent transparent;    border-style: solid dashed dashed dashed;}.triangle(left,@w:5px,@c:#ccc){//向左三角形    border-width: @w;    boeder-color: transparent @c transparent  transparent;    border-style: dashed solid dashed dashed;}.triangle(right,@w:5px,@c:#ccc){//向右三角形    border-width:@w;    boeder-color:transparent transparent transparent  @c;    border-style:dashed dashed dashed solid;}.triangle(@_,@w:5px,@c:#ccc){  //@_表示无论何时，引用.triangle都会加载这里面的内容    width:0;    hoght:0;    overflow:hidden;}.sanjiao{    .triangle(top);//top表示调用.triangle(top,@w:5px,@c:#ccc)绘制向上的三角形,可以调用left right bottom}

less运算

@test_01:100px;@test_02:2;@add=@test_01+@test_02;//102px  只需要一个有单位即可，加减乘除都可以

less嵌套

ul{    width:600px;    height:300px;    margin:30px auto;    padding:0;    li{        height:30px;        line-height:30px;    }    a{        color:blue;        &:hover{      //&代表上一层选择器,&现在等于a            color:red;        }    }}//编译后的结构ul{    ...}ul li{    ...}ul a{    ...}ul a:hover{    ...}

less—-@arguments变量

.border(@w:2px,@c:red;@s:solid){    border:@arguments;//@arguments代替了所有定义的变量相当于 border:@w @c @s;    //需要更改值时，直接给@arguments赋值@arguments(40px);相当于@w=40px;}

less—-避免编译

.test{    width:~'calc(300px-30px)';//~""或者~''里面的内容不会被编译}

less—-!important

.test{    .border() !important;}

less—-导入其他文件

@import "a.css";//导入css文件，写在什么位置，就在什么位置引入@import(less) "a.css";//作为less导入@import "a";//导入less文件