浅谈Less及如何在Html 文件中使用 Less

一、Less的用法

1.定义变量与值，可以重复使用

$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;

/* 使用变量 */
body {
  background-color: $bgcolor;
  color: $textcolor;
  font-size: $fontsize;
}

2.嵌套规则

nav {
  ul {
    margin: 0;
    padding: 0;
    li {
      display: inline-block;
    }
  }
}

将以上代码转换为 CSS 代码，如下所示：

nav ul {
  margin: 0;
  padding: 0;
}
// 注意：是后代选择器
nav ul li {
  display: inline-block;
}

更多查看 ：Less快速入门文档

二、在Html 文件中使用 Less

1. vscode 编译器安装插件 Easy LESS

它的作用就是帮你把 .less 文件转换成 .css 文件
2.在 css 文件夹下新建 .less 文件， 编辑 .less 文件点击保存会自动生成同名的 .css 文件，在 HTML 里链接 .css 文件即可。