less变量的使用

less变量的使用

• less中的变量用@声明。

• 一般这三种可以当做变量使用：

  • 属性值
  • 属性名
  • 选择器名

使用方法

属性值为变量

@color:yellowgreen; //属性值为变量
.one{
  width: auto;
  height: 50%;
  text-align: center;
  background: @color;
}

属性名为变量

@text:text-align;   //属性名为变量
.one{
  width: auto;
  height: 50%;
  @{text}: center;
  background: yellowgreen;
}

选择器名为变量

@selector:.one;     //选择器名为变量
@{selector}{
  width: auto;
  height: 50%;
  text-align: center;
  background: yellowgreen;
}