less 简介

• 网址

bootcss 中文网： https://less.bootcss.com/ (opens new window)

lesscss 中文网：http://lesscss.cn/ (opens new window)

vue-cli3 中使用 less

• 安装依赖： npm install less-loader --save-dev

• 局部导入外部 less

<style scoped lang="less">
  @import "../assets/styles/varibles.less";
  @import "../assets/styles/mixins.less";
  /* 样式代码 */
</style>

• 全局引入外部 less

全局 less 文件，只需在 main.js 里引入即可：import './../theme/theme.less'

less 和 sass 的区别

1. 实现方式不同

   Less 是基于 JavaScript，是在客户端处理的。

   Sass 是基于 Ruby 的，是在服务器端处理的，以前是 Ruby，现在是 Dart-Sass 或 Node-Sass。

2. 变量符不同

Less 用@，Sass 用$。

3. 输出设置不同

Less 没有输出设置，Sass 提供 4 中输出选项：nested, compact, compressed 和 expanded。

输出样式的风格可以有四种选择，默认为 nested

• nested：嵌套缩进的 css 代码
• expanded：展开的多行 css 代码
• compact：简洁格式的 css 代码
• compressed：压缩后的 css 代码

4. Sass 支持条件语句，可以使用 if{}else{},for{}循环等等。而 Less 不支持。

5. 引用外部 CSS 文件不同

scss@import 引用的外部文件如果不想编译时多生成同名的.css 文件，命名必须以开头, 文件名如果以下划线开头的话，Sass 会认为该文件是一个引用文件，不会将其编译为同名 css 文件.

Less 引用外部文件和 css 中的@import 没什么差异。