Less学习笔记(三)

65 阅读1分钟

1.Less中的变量插值(了解)

1.什么是变量插值?

如果是属性的取值可以直接使用变量 但是如果是属性名称或者选择器名称并不能直接使用变量 必须使用变量插值的格式

2.变量插值的格式

@{变量名称}

例:HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04.less变量中的插值</title>
    <link rel="stylesheet" href="./css/04.less中的变量插值.css">
</head>
<body>
<div></div>
</body>
</html>

例:预处理后的css

@w: 200px;
@h: 200px;
@size:width;
@D:div;

@{D} {
  @{size}: @w;
  hight: @h;
  background-color: red;
}