Less笔记

Less

Less把px转换为rem
使用Less语法快速编译生成CSS代码

.father {
        color: red;
        width: (68 / 37.5rem);
}

CSS预处理器，后缀名为.less
扩充CSS语言，使CSS有逻辑性、计算能力
浏览器不识别Less代码

Easy Less: vscode插件

注释

//注释内容
/*
注释内容
*/

单行注释无法生成到css

语法

除法需要小括号或在/前加.
Less4.0之前不需要加小括号或.

嵌套

.father {
        .son {
                &:hover {

                }
        }
}

&表示同级，用于伪选择器生成

变量

Less变量设置属性值

@变量名: 值;

CSS属性: @变量名;

导入其他Less文件

@import './other.less';
//后缀为less的文件可以省略.less

导出CSS位置

1. 配置Easy Less插件
   在setting.json中编辑添加代码

    "less.comoile":{
            "out": "../css/"
    }
   

2. 在less文件中写代码

    // out:./abc/myname.css
   

3. 禁止导出

    // out:false
   

方便js添加类名

.active {
        &.off {

        }
}

<div class="active off"></div>

混合

mix in
将一系列属性从一个规则集引入到另一个规则集的方式

普通混合

.juzhong {
    margin: auto;
}

.father {
    .son1 {
        .juzhong;
    }
    .son2 {
        .juzhong;
    }
}

带参数混合

.juzhong(@w, @h, @c) {
    margin: @w @h;
    color: @c;
}

.father {
    .son1 {
        .juzhong(100px, 200px, pink);
    }
    .son2 {
        .juzhong(50px, 100px, black);
    }
}

带参数默认值

.juzhong(@w:10px, @h, @c) {
    margin: @w @h;
    color: @c;
}

命名参数

.juzhong(@w:10px, @h, @c) {
    margin: @w @h;
    color: @c;
}

.son2 {
    .juzhong(@c: black);
}

匹配模式

// triangle.less
// 不论下面调用哪个，会先调用第一个参数为@_的
.triangle(@_, @w, @c) {
    width: 0px;
    height: 0px;
}
.triangle(L, @w, @c) {
    border: solid @w;
    border-color: transparent transparent transparent @c;
}
.triangle(R, @w, @c) {
    border: solid @w;
    border-color: transparent @c transparent transparent;
}
.triangle(T, @w, @c) {
    border: solid @w;
    border-color: @c transparent transparent transparent;
}
.triangle(B, @w, @c) {
    border: solid @w;
    border-color: transparent transparent @c transparent;
}

// box.less
@import "./triangle.less"
.box {
    .triangle(L, 40px, red)
}
.rbox {
    .triangle(R, 40px, red)
}

arguments变量

//包含参数的伪数组
.border(@1, @2, @3){
    border: @arguments;
}

.box {
    .border(1px, solid, black)
}

继承

.juzhong {
    margin: auto;
}

.juzhong:hover {
    margin: auto;
}

.father {
    .son:extend(.juzhong) {
        // &:extend(.juzhong all); 加了all，hover也会继承
        &:nth-child(1) {

        }
        &:nth-child(2) {

        }
    }
}

避免编译

// ~"" 避免编译
* {
    margin: 10 * 10 px;
    padding: ~"cacl(100px + 100)";
}