前言
我们在写 CSS
的时候,可能会遇到许许多多的问题。现如今我们可以使用 CSS预处理器
来提高我们的开发效率及开发的舒适度,本文就带大家来聊聊比较流行的 Less
的特点以及使用方法。
一、简介
1. CSS预处理器
CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序。市面上有很多CSS预处理器可供选择,且绝大多数CSS预处理器会增加一些原生CSS不具备的特性,例如代码混合,嵌套选择器,继承选择器等。这些特性让CSS的结构更加具有可读性且易于维护。—— MDN Web Docs
2. Less
Less (Leaner Style Sheets 的缩写) 是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档(中文版),包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。—— Less 中文网
二、开始使用
1. 在 Node.js 环境中使用
1.1 手动编译
全局安装 Less:
npm i -g less
# or
yarn global add less
# 查看版本,有版本则安装成功
lessc -v
# 成功示例:lessc 4.1.2 (Less Compiler) [JavaScript]
全局安装成功后就可以使用命令行将 .less
文件编译为 .css
文件啦!我们来试一试,新建一个 demo.less
的文件。
@color-theme: #0094ff;
.demo {
background-color: @color-theme;
}
打开命令行,切换到该文件的目录下,然后输入 lessc demo.less demo.css
,得到编译后的文件 demo.css
:
.demo {
background-color: #0094ff;
}
1.2 在 webpack 中使用
基本步骤:
- 安装
less
以及less-loader
- 配置
webpack
- 如果是
.vue
文件要在style
标签上增加属性lang="less"
安装:
npm i less less-loader --save-dev
# or
yarn add less less-loader --dev
配置 webpack
:
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.less$/i,
loader: [
// compiles Less to CSS
'style-loader',