WEB前端：less（4）：less编译为css引入到html中、变量

最新推荐文章于 2023-07-06 17:41:48 发布

hahahafree

最新推荐文章于 2023-07-06 17:41:48 发布

阅读量814

点赞数 1

分类专栏： less 文章标签： less

本文链接：https://blog.csdn.net/weixin_43731793/article/details/103014577

版权

less 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

less编译为css引入到html中

index.html

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <h1>你好啊！</h1>
    </header>
    <footer>
        <h1>谢谢夸奖！</h1>
    </footer>
</body>

</html>

style.less

@green:#801f77;
@baise:white;

header,footer{
    background: @green;
    h1{
        color: @baise;
    }
}

style.css

header,
footer {
  background: #801f77;
}
header h1,
footer h1 {
  color: white;
}

在这里插入图片描述

//作为选择器和属性名的变量
@kuandu:width;
.@{kuandu}{
    @{kuandu}:150px;
}

//作为URL的变量
@imgurl: "https://www.baidu.com/img/";
header {
    background: @green url("@{imgurl}bdlogo.png");
    height: 300px;
}

//定义多个相同名称的变量时
@var: 0;

.class {
    @var: 1;

    .brass {
        @var: 2;
        three: @var; //这是的值是3
        @var: 3;
    }

    one: @var; //这是的值是1
}