关于 less 变量

最新推荐文章于 2023-11-05 11:37:04 发布

liyeford

最新推荐文章于 2023-11-05 11:37:04 发布

阅读量573

点赞数

本文链接：https://blog.csdn.net/liyeford/article/details/51065839

版权

1 首先是环境的配置用koala 这个软件然后将less文件拖进来就可以啦还要把js文件导入工程里面

2 然后在html里面导入 <link rel="stylesheet/less" href="less/demo1.less"> <script src="js/less.min.js"></script>

3在html页面写上 <body><header> <h1>你好！</h1></header><footer class="width"> <h1>da rwr </h1></footer></body>

4 less 里面配置

@red:blue;
@baise:yellow;
header,footer{
  background: @red;
  h1{
    color:@baise;
  }
}
//作为选择器
@kuandu:width;
.@{kuandu}{
  @{kuandu}:180px;
}
//作为url
@imgurl:"https://www.baidu.com/img";
header{
  background:greenyellow url("@{imgurl}bdlogo.png") no-repeat;
  height:300px;
}
//定义多个变量名称一样是  会使用最新定义的哪一个 也就是统计目录下离他最近的那个

5 这是less文件的内容下面会自动编译的css文件类容

header,
footer {
  background: #0000ff;
}
header h1,
footer h1 {
  color: #ffff00;
}
.width {
  width: 180px;
}
header {
  background: #adff2f url("https://www.baidu.com/imgbdlogo.png") no-repeat;
  height: 300px;
}