less的使用.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>less的使用</title>
<link rel="stylesheet" href="my.css">
</head>
<body>
<div>我是颜色也是粉色</div>
</body>
</html>
my.less:
// 定义一个粉色的变量
// 错误的变量名：@1color @color~@#
// 变量名区分大小写 @color 和@Color是两个不同的变量
@color:deeppink;
@color2:blue;
// 定义了一个字体为14像素的变量
@font14: 14px;
body {
background-color: @color;
}
div {
color: @color2;
font-size: @font14;
}
a {
font-size: @font14;
}
less文件保存市自动生成的my.css文件：
body {
background-color: deeppink;
}
div {
color: blue;
font-size: 14px;
}
a {
font-size: 14px;
}