less语法入门

1. 变量

@color: red;

2. 混合(mixin)

// 基本
.box {
    width: 100px;
    height: 100px;
}
.box1 {
    .box
}
// 参数
.border(@width) {
    border: @width solid #000;
}
.box1 {
    .border(10px);
}
// 带默认值
.border_1(@width:10px) {
    border: @width solid #000
}
.box2 {
    .border_1();
}

3. 匹配模式

• ie中css小三角 黑底 用 dashed
• 根据调用 传那个字符, 用那种模式

// 朝上
.triangle (top, @w:5px, @c:#000) {
    border-width: @w;
    border-color: transparent transparent @c transparent;
    border-style: dashed dashed solid dashed;
}
// 朝下
.triangle (top, @w:5px, @c:#000) {
    border-width: @w;
    border-color: @c transparent transparent transparent;
    border-style: dashed dashed solid dashed;
}
// 默认值
.triangle (@_, @w:5px, @c: #000) {
    width: 0;
    height: 0;
    overflow: hidden;
}

// 调用
 .sanjiao {
    .triangle(top);
 }

4. 运算

@test: 300px;
.box {
    width: (@test-10)*5;
    color: #ccc-10; // #c2c2c2
}

5. 嵌套规则

    <ul>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
    </ul>

    // 使用嵌套样式写法 最多不要超过五层
    ul {
        width: 100px;
        height: 100px;
        li {
            height: 25px;
            line-height: 25px;
        }
        a {
            display: inline-block;
            background-color: red;
        }
        // 上一级用 &字符
    }

6. @arguments 变量

.bor_arg(@w:30px,@c:red,@style:solid) {
    border: @arguments;
}

7. 避免编译

    .box {
        width: ~'calc(300px-30px)';
    }