Less快速入门

Posted 2020-11-05 marlonchiu

我们都知道写 CSS 代码是有些枯燥无味的，尤其是面对那些成千上万行 CSS 代码的项目。你始终在相同的地方使用相同的规则并且在你的编译器中搜索和替换每次颜色的变化。这需要很多的努力和规则来保持你的 CSS 可维护，但它本不应该这样的。

很幸运，网站开发社区已经解决了这个问题，现在我们拥有诸如 Less, Sass 和 Stylus 之类的预处理器，它们给我们提供了许多优于纯 CSS 的好处。

• 变量 - 它可以让你更轻松的在整个样式表中定义和更改值（这个功能 CSS 在未来某一天也有可能会实现）。

• 动态计算值 - CSS 中最近出了一个 cal()， 但它只适合用于长度的计算。

• Mixins - 可以让你重用或者组合样式，而且支持传递参数。

• 函数 - 它为你提供了一些方便的程序去操纵颜色，转换图像等。

使用预处理器的唯一缺点就是，你需要将代码转换为纯 CSS 代码，让它能够在浏览器中工作。

 

1. Getting Started

Less 是用 javascript 写的，所以需要额外的 Node.js 或者网页浏览器才能够运行它。你可以在你的网站中引入 less.js ，这样在真正的运行环境下它就可以自动编译，但这个过程非常缓慢，所以不建议这么使用。 推荐的方式是提前编译成 CSS 代码并且将一个正常的发展版本备份在线上。当然还有很多可视化的的程序帮助你编译 less 文件，但是在本篇文章中我们将使用 node.js。

如果你已经安装了 Node ， 那么你应该知道什么是终端，接下来就打开一个终端。安装 less 用以下语句 ：

npm install -g less

安装完成后，你将可以在任何打开的窗口中使用 lessc 命令，这个命令允许你将 .less 文件编译成纯 CSS 文件，像下面这样：

lessc styles.less > styles.css

 如果说，我们用 less 将所有的样式写在了 style.less 中，通过上述命令，我们就可以将代码转换为纯 CSS 代码。接下来你就可以将样式表引入到 html 中了，如果在编译过程中出现了错误，将会在终端的命令行中提示你。