less小计

最新推荐文章于 2025-12-18 16:14:31 发布

原创最新推荐文章于 2025-12-18 16:14:31 发布 · 109 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#less

为什么蓝桥杯web什么都考

/*less*/
@width:100px;
@height:@width + 100px; //运算
@color:aquamarine;
.div1{
    width: @width;
    height: @height - 100px;
    background-color: @color;   //变量
    .child{ //嵌套
        .border()   //混合
    };
    color: #colors[primary];    //映射
}
#colors(){
    primary:blue
}

.border{
    border: 1px solid red;
}
.div2{
    .div1();
    .border();
    color: ~"white";    //转义
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet/less" href="./index.less">
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script> -->
    <link rel="stylesheet" href="./css/index2.css">
</head>

</head>

<body>

    <div class="div1">
        这是div1
        <div class="child">
            这是div1的子元素
        </div>
    </div>

    <div class="div2">
        这是div2

    </div>


</body>

</html>