【less】项目工程化 （@import）

微信订阅号：Rabbit_svip

关键词： @import ‘ less路劲 ‘

---

一个项目，通常会有固定的版心，确定的主题色和辅色。

在 less 里，习惯把这些固定的常量都存到一个公共的 less 文件里。
哪个地方需要用到主题色，哪个地方需要用版心尺寸布局，就直接调用这个公共的 less 文件。

---

【第1步】新建一个公共 less 文件 —— pub.less

@bgc: #ff6600; // 背景色
@mc: #c8ff00; // 主题色

@area: 980px; // 版心

【第2步】新建其他 less 文件（这里我新建了一个 index.less），并通过 @import 调用 pub.less

@import 'pub';

body {
  width: 100%;
  background: @bgc;
}

div {
  width: @area;
  margin: 0 auto;
  background: @mc;
}

注意：@import 后面放的是 pub.less
可以写成 @import ‘pub.less’
也可以忽略文件后缀 @import ‘pub’

【第3步】编译所有 less 文件，查看转换出来的 css 文件。

转换后的 index.css

body {
  width: 100%;
  background: #ff6600;
}

div {
  width: 980px;
  margin: 0 auto;
  background: #c8ff00;
}

可以看到，转换后的 body 里面，背景色是用 pub.less 设置的 @bgc。
div 里面，width 是 pub.less 设置的 @area。

div 的背景色，是用 pub.less 设置的 @mc。

---

2种编译 less 的方法：
【less】用koala编译
【less】命令行编译