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