Less笔记

概览

less 是一门 css 预处理语言，它扩展了 css 语言，增加了变量，混合，函数等特征，使css 更易维护和扩展，less可以运行在Node或浏览器。

Koala可以把less文件编译为css文件。

1. 注释

示例：

/*编译后显示*/
//编译后不显示

2. 变量

示例：

//变量
//定义变量
@width:100px;
@height:100px;
//引用变量
.one{
    width: @width;
    height: @height;
    background-color: aqua;
}

3. 混合

示例：

混合
.o {
    width: 100px;
    height: 100px;
}

.one{
    .o;
    background-color: red;
}

.two{
    .o;
    background-color: blue;
}

4. 混合带参数

示例：

//混合带参数
.border(@b-w,@b-s,@b-c){
    border: @b-w @b-s @b-c;
}
.one{
    width: 100px;height: 100px;.border(5px,dotted,red)
}

5. 混合参数有默认值

示例：

//混合参数有默认值
.border(@b-w:5px){//默认值为5px
    border: @b-w solid blue;
}

.one{
    width: 100px;
    height: 100px;
    .border(10px)
}

6. 嵌套

示例 1：

.one{
    width: 500px;
    height: 500px;
    ul{
        width: 500px;
        height: 500px;
        li{
            list-style: none;
            width: 500px;
            height: 20px;
            background-color: red;
            margin-top: 10px;
            a{
                margin-left: 50%;
                color: black;
                text-decoration: none;
            }
        }
    }
}

示例 2：

.one {
    width: 500px;
    height: 500px;

    ul {
        width: 500px;
        height: 500px;
    }

    li {
        list-style: none;
        width: 500px;
        height: 20px;
        background-color: red;
        margin-top: 10px;
    }

    a {
        margin-left: 50%;
        color: black;
        text-decoration: none;
        &:hover{color: green};
    }
}

7. 运算（加减乘除均可使用）

示例：

//运算
@width:100px;
@height:100px;
@color:#000;
.one{
    width: @width+100;//200px
    height: @height+100;//200px
    background-color: @color+100;//#646464;
}

8. @arguments（全选）

示例：

//@arguments
.border(@b-w,@b-s,@b-c){
    border: @arguments;
}
.one{
    width: 100px;height: 100px;.border(5px,dotted,red)
}

9. @import（导入）

示例：

//@import
@import "2.less";

10. 匹配

示例：

//匹配
.aaa(a){
    width: 100px;
    height: 200px;
    background-color: coral;
}

.aaa(b){
    width: 100px;
    height: 200px;
    background-color:green;
}

.one{
    .aaa(b);
}