View on GitHub

learning

学习笔记

LESS

CSS预处理语言, 为CSS赋予了动态语言的特征,如变量、继承、运算、函数等

注释

  1. /* 将会被编译
  2. // 不会被编译

变量

@ + 变量名

@test: 300px;

div {
    height: @test;
}

混合

将一个选择器充当另一个选择器的声明, 这样另一个选择器就拥有前者的所有声明了
甚至还能带上变量, 变量还可默认带值
可用于兼容性处理

    //混合
    .div {
        .border;
    }
    .border {
        border: 1px solid red;
    }
    //混合, 带值
    .div_02 {
        .border(5px);
    }
    .border_02(@border_width) {
        border: @border_width solid red;
    }
    //混合, 带默认值
    .div_03 {
        .border();
    }
    .border_03(@border_width:10px) {
        border: @border_width solid red;
    }

    //兼容性例子
    .border_radius(@radius:5px) {
        -webkit-border-radius:@radius;
        -moz-border-radius:@radius;
        border-radius:@radius;
    }

匹配模式

同一个选择器,根据传入的第一个参数决定使用哪一种模式, 可以当做是if

@_通配

//实现一个能自己选择方向的三角形
//左
.triangle(left,@w:5px,@c:#ccc) {
    border-width: @w;
    border-color: transparent transparent @c transparent;
    border-style: solid;
}
//右
.triangle(right,@w:5px,@c:#ccc) {
    border-width: @w;
    border-color: transparent @c transparent transparent;
    border-style: solid;
}
//both
.triangle(@_,@w:5px,@c:#ccc) {
    width: 0;
    height: 0;
    overflow: hidden;
}

.sanjiao {
    .triangle(left, 100px);
    //此时效果为: .triangle(left,@w:5px,@c:#ccc) 和 .triangle(@_,@w:5px,@c:#ccc) 
}

注意: 后面的参数不要忘记

运算

less可以进行运算, 包括像素、颜色等(不需要带单位)

@test:300px;
.box {
    width: (@test -20) * 5;
}

嵌套

在一个CSS规则中嵌套上其子节点的CSS规则

.list {
    width: 600px;
    margin: 30px auto;
    padding: 0;
    list-style: none;

    li {
        height: 30px;
        line-height: 30px;
        background-color: red;
        margin-bottom: 5px;
    }
    a {
        float: left;
    }
    span {
        float: right;
    }
}

伪类的写法: &:hover (&代表上一层选择器)

a {
    float: left;

    &:hover {
        color: red;
    }
}

@arguments变量

@arguments包含了传入的所有变量

.border(@w:1px;@c:red;@s:solid) {
    border: @arguments;
}

避免编译

不需要编译的部分, 让其不变异

属性值前加上: ~

.test{
    width: ~calc(100px - 20px);
}

##