Less学习笔记（WebStorm+小程序）

时间 2021-01-05

为什么要学 Less ？就一个字：“懒！”。记得以前初中还是高中的时候，学过一篇文章，大概意思是说懒汉改变世界，因为懒，所以创造各种各样的工具来解决问题，使工作、事情更快速、轻松地完成。

学习环境

MacOS 10.13.6
npm 6.5.0
lessc 3.9.0
Webstorm 2018.1.4

快速入门

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Xixin、函数等特性，使 CSS 更易维护和扩展。

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

例子：

test.less

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

test.css

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

使用以下命令生成：

lessc test.less test.css

使用方法

安装

$ npm install -g less

命令行用法

首先认识 lessc 命令，它是 Less 的编译器，也是核心功能，所以以下操作都会用它来进行。

1.编译

$ lessc test.less

在控制台中会输出编译完成后的样式，例如

/* less */
.header {
  background: aliceblue; a {
    color: antiquewhite;
  }
}

/* css */
.header {
  background: aliceblue;
}
.header a {
  color: antiquewhite;
}

2.编译保存

$ lessc test.less test.css

将会在当前目录下生成 test.css 文件

3.压缩编译生成

由于 Less 自带的压缩功能（-x 属性）已经被废弃，所以我们需要使用 less-plugin-clean-css 插件来进行压缩。

$ lessc --clean-css test.less test.min.css

我在实际的使用过程中遇到下面这个问题，提示我找不到 clean-css 插件

Unable to load plugin clean-css please make sure that it is installed under or at the same level as less

那么我们先来安装一下，使用 npm 来安装

$ npm install -g less-plugin-clean-css

代码用法

暂无

开发工具使用

WebStorm

用惯一些 IDE 工具后，再用 微信开发者工具 真的很不习惯，所以一般开发小程序我都是用 WebStorm ，再用 微信开发者 工具来预览、调试。下面来介绍一下如何配置 WebStorm 编写 Less 保存自动生成 wxss/css 。

样式支持配置

配置路径 Preferences | Editor | File Types

自动生成 css 配置

配置路径 Preferences | Tools | File Watchers | +

笔者经过试验操作，提供了几个配置，仅供参考（小程序配置不局限于小程序）。

默认配置
小程序配置1（当前目录生成 .wxss）
小程序配置2（less独立文件夹，生成 .wxss 文件到指定的目录中）

默认配置

Arguments：
$FileName$ $FileNameWithoutExtension$.css --source-map 
# $FileName$ 当前编辑文件名
# $FileNameWithoutExtension$.wxss 去除.less扩展名再加上.wxss扩展名
# --source-map 表示会生成less路径在css文件中
# 其它的点击旁边按钮INSERT MACRO查看

Output paths to refresh：
$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
# 冒号表示生成多个文件
# 保存在当前less目录下，并刷新项目结构显示文件出来

小程序配置1

当前目录生成 .wxss

Arguments：
--no-color $FileName$ $FileNameWithoutExtension$.wxss
# --no-color 禁用彩色的输出
# $FileName$ 当前编辑文件名
# $FileNameWithoutExtension$.wxss 去除.less扩展名再加上.wxss扩展名

Output paths to refresh：
$FileNameWithoutExtension$.wxss
# 保存在当前less目录下，并刷新项目结构显示文件出来

小程序配置2

less独立文件夹，生成 .wxss 文件到指定的目录中

Arguments：
--no-color $FileName$ $ProjectFileDir$/pages/$FileDirPathFromParent(less)$/$FileNameWithoutExtension$.wxss
# --no-color 禁用彩色的输出
# $FileName$ 当前编辑文件名
# $ProjectFileDir$/pages/$FileDirPathFromParent(less)$/$FileNameWithoutExtension$.wxss 项目目录/pages/在当前目录找到父目录less的路径/当前编辑文件名去除.less扩展名再加上.wxss扩展名


Output paths to refresh：
$ProjectFileDir$/pages/$FileDirPathFromParent(less)$/$FileNameWithoutExtension$.wxss
# 保存在指定的目录下，并刷新项目结构显示文件出来

参考资料

http://lesscss.cn/

https://www.css88.com/doc/less/usage/

https://www.cnblogs.com/zhanggf/p/5903410.html