# 第八模块:前端开发-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";
上次更新: 1/5/2023, 5:29:59 PM