less 即学即用

推荐工具

koala 是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。

/* 是被编译的注释 */
// 是不被编译的注释

less中声明变量，

要用@开头，例如：@变量名：值

@test_width: 300px;
.classname{
    width:@test_width;
}

混合

• 基础混合

aborder{   //引用时不带括号 值
    border:solid 5px pink;
}
.classname01{
    width:@test_width;
    .aborder;
}
.classname02{
    .classname01;
    margin-left:10px;
}

• 混合-可带参数

.border_02(@border_width){
    border:solid yellow @border_width;
}
.test_hunhe{
    .border_02(30px);
}

• 混合-默认带值

.border_03(@border_width:10px){
    border:solid green @border_width;
} 
.test_hunhe_03{
    border_03();
}

// 混合的例子

border_radius(@radius:5px){
    -webkit-border-radius:@radius;
    -moz-border-radius:@radius;
    border-radius:@radius;
}
radius_tes{
 width:100px;
 height:100px;
 border_radius();
}

匹配模式

匹配模式- 小三角标实例

.triangle(top,@w:5px,@c:#ccc){   //三角向上
    border-width: @w;
    border-color: transparent transparent @c transparent;
    border-style: dashed dashed solid dashed;
}
.triangle(buttom,@w:5px,@c:#ccc){  //三角向下
    border-width: @w;
    border-color: @c transparent transparent transparent;
    border-style: solid dashed dashed dashed;
}
.triangle(left,@w:5px,@c:#ccc){   //三角向左
    border-width: @w;
    border-color: transparent @c transparent transparent;
    border-style: dashed solid dashed dashed;
}
.triangle(right,@w:5px,@c:#ccc){   //三角向右
    border-width: @w;
    border-color: transparent transparent transparent @c;
    border-style: dashed dashed dashed solid;
}
.triangle(@_,@w:5px,@c:#ccc){   //共用样式
    width: 0;
    height: 0;
    overflow: hidden;
}
.sanjiao{    
    .triangle(left,36px);
}

匹配模式- 定位实例

.pos(a){
    position: absolute;
}
.pos(r){
    position: relative;
}
.pos(f){
    position: flex: 
}
.prepre{
    width:200px;
    height:200px;
    background-color:green;
    .pos(a);
}

运算

任何数字，颜色或者变量都可以参与运算，运算应该被包裹在括号中

@test_width:300px;
@test_hight:200px;
.box{
    width:@test_width + 30  //宽度加 30 像素
    height:(@test_hight-40)*7 // 先减去40，在乘7倍
    color:#ccc - 10;
}

嵌套规则

& 对尾类使用 hover 或 focus
对链接的使用 &

a{
    color:#eee;
    &:hover{
        cool: red;
    }
}

变量 @arguments

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

.border_reg(@w:30px,@c:red,@ll:solid){
    border: @arguments
}
test_arguments{
    .border_reg(68px);
}

避免编译

有时候需要输出一些不正确的css 语法或者使用一些less 不认识的专有语法，在字符串前加上一个 ~

.test_02{
    width:~'calc(300px - 20px)';
}

!important 关键字 //层级优先最高

.border_03(@border_width:10px){
    border:solid green @border_width;
} 
.test_important{
    border_03()!important;
}