less使用记录

运行环境

Less 可以运行在 Node 或浏览器端。

安装node

• 下载nodejs安装包安装https://nodejs.org/en/
• macOS下使用brew安装node
  • 安装brew http://brew.sh/
• linux下使用yum安装nodejs (自行搜索安装方法)

Node.js 环境中使用 Less ：

npm install -g less
> lessc styles.less styles.css

在浏览器环境中使用 Less ：

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

Phpstorm配置Less

配置：“Phpstorm”> “Preferences”（command+,）弹出设置界面，在左侧导航找到“Tools”>”File Watchers” 点击“+”号按钮找到less文件选项点击添加。

Output paths to refresh：
默认：

$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

修改为：

$FileParentDir(less)$/css/$FileDirPathFromParent(less)$/$FileNameWithoutExtension$.css

//说明
$FileParentDir(less)$ 是获取 less 目录的路径
$FileDirPathFromParent(less)$ 是获取 less 文件到 less 目录的路径
$FileNameWithoutExtension$ 是获取 less 文件不带后缀的名字

Atom配置Less

“Window” -> “Settings” -> “Packages”
安装插件

• 搜索atom-less -> install
• 搜索less-autocompile -> install

Example

less/base.less

  // "out": false, "compress": false
  /**
   * 不编译 不压缩
   */

less/styles.less

  // out: ../css/styles.css, sourcemap: true, compress: true
  /**
   * 编译输出到../css/styles.css
   * 生成sourcemap
   * 压缩文件
   */

  @import "my/components/select.less";

less/my/components/select.less

  // main: ../../styles.less

  @import "base.less";

  .select {
    height: 100px;
    width: 100px;
  }

参考：
1.http://lesscss.cn/
2.https://less.bootcss.com/
3.https://www.cnblogs.com/enix/p/3505610.html
4.https://www.cnblogs.com/zzhbx/p/6944922.html