关于 less 变量

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;
}
6 就可看到页面



你可能感兴趣的:(关于 less 变量)