3.less - 3.变量（Variables） - 《Web 前端工程师-2022》

1、属性值变量定义和使用：
2、属性变量定义和使用

1、属性值变量定义和使用：

@width: 100px;
@height: @width + 10px;
@color: rebeccapurple;
.container {
  width: @width;
  height: @height;
  background-color: @color;
}

2、属性变量定义和使用

//属性值变量定义
@width: 100px;
@height: @width + 10px;
@color: rebeccapurple;
//属性变量定义
@c: container;
@b: background-color;
@w: width;
//属性变量用@{}使用
.@{c} {
  @{w}: @width;
  height: @height;
  @{b}: @color;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>less</title>
    <!-- 这里引入的是lessc styles.less styles.css编译后的css文件 -->
    <link rel="stylesheet" type="text/css" href="./styles.css" />
</head>
<body>
    <div class="container">
        <span> 
            aaa 
        </span>
    </div>
</body>
</html>