less02-变量

html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>初见LESS</title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
<header>
    <h1>麦子学院</h1>
</header>
<footer  class="widths">
    <h1>麦子学院</h1>
</footer>
</body>
</html>

less

@green: #801f77;
@baise:white;    //变量可以写到后面

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

//作为选择器和属性名的变量

@kuandu:width;

.@{kuandu}{
  @{kuandu}:150px
}

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

//定义多个相同名称的变量时，后面覆盖前面，作用域概念
@var: 0;

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

css

header,
footer {
  background: #801f77;
}
header h1,
footer h1 {
  color: #ffffff;
}
.width {
  width: 150px;
}
header {
  background: #801f77 url("https://www.baidu.com/img/bdlogo.png");
  height: 500px;
}
.class {
  one: 1;
}
.class .brass {
  three: 3;
}

 

posted @ 2017-06-13 09:45  无天666  阅读(158)  评论(0)    收藏  举报