1.目录结构
2.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>less</title>
<link href="styles.css" type="text/css" rel="stylesheet"/>
<script src="https://cdn.bootcss.com/less.js/3.0.0-pre.4/less.js"></script>
</head>
<body>
<div class="dialog"></div>
</body>
</html>3.styles.less
@color: color;
@dialog: .dialog;
@suffix: fix;
// 空格将被忽略，若要保留空格则需要使用单引号或双引号
@hi: '徐 ';
@dear: 同保 ;
.dialog{
// 用于 rule属性部件，必须使用"@{变量名}" 的形式
background-@{color}: #888;
// 用于 rule属性，必须使用"@{变量名}" 的形式
@{color}: #000eff;
border-color: @dialog-border-color;
border- @dialog-border-width;
border-style: solid;
}
// 用于 选择器，必须使用"@{变量名}" 的形式
@{dialog}{
200px;
}
@{dialog}::after{
content: '@{hi}@{dear}'; // 用于 字符串拼接，必须使用"@{变量名}" 的形式
}
@h: 1000px;
// 用于 选择器部件，必须使用"@{变量名}" 的形式
.ie-@{suffix}{
@h: 30px; // 存在作用域，局部作用域优先级高于全局作用域。
height: @h; // 用于属性值，两种形式均可使用
line-height: 30px;
}
// 1. 以@作为变量的起始标识，变量名由字母、数字、_和-组成
// 2. 没有先定义后使用的规定；
@dialog-border-color: #f70009;
@dialog-border- 10px;
@dialog-border- 1px; // 3. 以最后定义的值为最终值；4.安装和命令行用法
$ npm install -g less$ lessc styles.less styles.css5.生成styles.css
.dialog {
background-color: #888;
color: #000eff;
border-color: #f70009;
border- 1px;
border-style: solid;
}
.dialog {
200px;
}
.dialog::after {
content: '徐 同保 ';
}
.ie-fix {
height: 30px;
line-height: 30px;
}
6.运行结果
