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
}

@mySelector: #wrap;
@Wrap: wrap;
@{mySelector} {
    // 变量名 必须使用大括号包裹
    color: #999;
    width: 50%
}
.@{Wrap} {
    color: #ccc;
}

#@{Wrap} {
    color: #666
}

@borderStyle: border-style;
@Solid: solid;
@Selector: #wrap;

@{Selector} {
    @{borderStyle}: @Solid
}

@images: "../img"; //需要引号
body {
    background: url("@{images}/dog.png"); //变量名 必须使用大括号包裹
}

// 声明变量 有点类似后面的混合方法
// 结构: @name: {属性： 值}
// 使用： @name()

@background: {background: red;};
#main {
    @background();
}

@Rules:{
    width: 200px;
    height: 200px;
    border: solid 1px red;
};

#con {
    @Rules();
}

// 加减法时 以第一个数据的单位为基准
// 乘除法时 注意单位一定要统一
@width: 300px;
@color: #222;

#wrap {
    width: @width - 20;
    height: @width - 20*5;
    margin: (@width - 20) * 5;
    color: @color*2;
    background-color: @color + #111
}

//变量作用域 就近原则
@var: @a;
@a: 100%;
#wrap {
    width: @a;
    @a: 9%
}

// 用变量去定义变量
@fnord: "I am fnord";
@var: "fnord";
#wrap::after{
    content: @@var; // 将@var替换为其值 content:@fnord
}