21. 解决样式重复问题

css 预编译期

基本原理

编写css的时候,受限于css语言本身,常常有一写难以处理的问题:

• 重复的样式值 : 例如常用颜色,常用尺寸
• 重复的代码片段: 例如,绝对定位,清除浮动
• 重复的嵌套书写

由于从官方迟迟不对css语言本身做出改进,一些第三方的机构开始想办法解决这些问题

其中一种方案,就是预编译器

预编译器的原理很简单,即使用一种更加优雅的方式来书写代码,通过一个编译器,将其转换为浏览器可以识别的传统的css代码

目前,最流行的预编译器就是LESS和SASS,由于两者特别相似,因此学习一种即可(这里介绍LESS)

less官网：http://lesscss.org/
less中文文档1（非官方）：http://lesscss.cn/
less中文文档2（非官方）：https://less.bootcss.com/
sass官网：https://sass-lang.com/
sass中文文档1（非官方）：https://www.sass.hk/
sass中文文档2（非官方）：https://sass.bootcss.com/

LESS的安装和使用

从原理可知，要使用LESS，必须要安装LESS编译器

LESS编译器是基于node开发的，可以通过npm下载安装

npm i -D less

安装好了less之后，它提供了一个CLI工具lessc，通过该工具即可完成编译

lessc less代码文件 编译后的文件

试一试:

新建一个index.less文件，编写内容如下：

// less代码
@red: #f40;
.redcolor {
    color: @red;
}

运行命令：

lessc index.less index.css

可以看到编译之后的代码：

.redcolor {
  color: #f40;
}

LESS的基本使用

具体的使用见文档：https://less.bootcss.com/

• 变量
• 混合
• 嵌套
• 运算
• 函数
• 作用域
• 注释
• 导入

webpack中使用less

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode: "development",
    devServer: {
        open: true
    },
    module: {
        rules: [
            { test: /\.css$/, use: ["style-loader", "css-loader"] },
            { test: /\.less$/, use: ["style-loader", "css-loader?modules", "less-loader"] },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html"
        })
    ]
}