Less_变量

LESS允许使用 @ 符号定义变量。 变量分配使用冒号(:)完成。

LESS中声明变量的格式为“@变量名：变量值”

xxxxxxxxxx
@width: 1200px;
@height: 300px;

.container {
    width: @width;
    height: @height;
    background-color: #f1f1f1;
}

选择器使用变量

选择器的名字也可以使用变量声明

xxxxxxxxxx
@my-selector: banner;

.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

Url地址使用变量

xxxxxxxxxx
@images: "../img";

body {
  color: #444;
  background: url("@{images}/hello.png");
}

变量可以先使用在声明

xxxxxxxxxx
.container {
    width: @width;
    height: @height;
    background-color: #f1f1f1;
}

@width: 1200px;
@height: 300px;

属性当作变量

使用$prop语法可以很容易地将属性当作变量来处理。有时，这可以使您的代码更轻松

xxxxxxxxxx
.widget {
    color: #efefef;
    background-color: $color;
    margin: 15px;
    padding: $margin;
    font-size: 30px;
    left:$font-size;
}

实时效果反馈

1. 在Less中，声明变量的关键字是：

A $

B var

C let

D @

答案

1=>D