第八模块：前端开发-LESS

平常我们写的CSS叫做原生CSS，缺点在于层次不够友好，无法重用等。LESS可以帮助我们解决这些问题，但是浏览器无法直接识别LESS，需要把LESS编译成原生CSS，有很多方法，其中本地软件手动编译 https://koala-app.com/

01 变量

@color: red;

div{
    color: @color;
}

# 编译为
div{
    color: red;
}

02 混合

混合将一组属性混入到调用方中

.triangle{
    height: 0;
    width: 0;
    border-width: 20px;
    border-style: solid;
    border-color: red transparent transparent transparent; 
}

#main{
    .triangle();
}

03 嵌套

// 编译到CSS中，该注释看不见，给开发人看
/* 编译到CSS中，该注释 看得见 */

@color:pink;

.center(@c){
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100px;
    height: 100px;
    background-color: @c;
}


#wrap{
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
    
    .inner{
        .center(@color);
        &:hover{
            background-color: green;
        }
    }
}

04 运算

@height: 100 + 2px;

• 特例 cacl

05 转义

任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出

@min768: ~"(min-width: 768px)";

06 函数

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等

07 导入

若导入的文件是.less扩展名，扩展名可省略

@import "library"; // library.less
@import "typo.css";