定义变量

image.png

实例：

先新建一个.less后缀名的文件，然后定义几个变量

  1. // 定义一个粉色的变量
  2. @color: pink;
  3. // 错误的变量名：@1color @color~@#
  4. // 变量名区分大小写 @color 和 @Color 是两个不同的变量
  5. // 定义一个字体为14px的变量
  6. @font14:14px;
  7. // less同时兼容css的语法，并且可以在其中使用变量
  8. body {
  9.     background-color: @color;
  10. }
  11. div {
  12.     color: @color;
  13.     font-size: @font14;
  14. }
  15. a {
  16.     font-size: @font14;
  17. }

Less的变量类型

Less中有很多种变量类型，集中大多与js相同，我们来说些不同的：

集合/规则集合(rulesets)

其样式和JS中的对象或者python中的集合一样，使用大括号包裹的键值对：

/* 集合/规则集合 */
@ruleset: {
  color: red;
  font-size: 15px;
}

Less编译

插件推荐：vscode插件 - easy less
image.png
安装完毕后，只需要在 less文件内 Ctrl + S 保存，就会在当前目录下，自动编译生成css文件。
image.png
编译后的 css 文件内容：

body {
  background-color: pink;
}
div {
  color: pink;
  font-size: 14px;
}
a {
  font-size: 14px;
}