CSS 编写的痛点

CSS 作为一种样式语言 ,本身用来给HTML元素添加样式 是没有问题的.

但是目前前端项目已经越来越复杂,不再是简简单单的几行CSS 就可以搞定的,我们需要几千行甚至上万行的CSS 来完成页面的美化工作.

随着代码量的增加,必然会造成很多的编写不便:

比如大量的重复代码,虽然可以用类来勉强管理和抽取 ,但是使用起来依然不方便
比如无法定义变量(当然通过CSS 函数目前已经支持),如果一个值被修改,那么需要修改大量代码,可维护性很差;(比如主题颜色)
比如没有专门的作用域和嵌套 ,需要定义大量的id/class 来保证选择器的准确性,避免样式混淆.

所以有一种对CSS 称呼是 "面向命名编程"

CSS痛点问题的解决

社区为了解决 CSS 面临的这些问题,出现了一系列的CSS 预处理器(CSS preprocessor)
CSS 预处理器是一个能让你通过预处理自己独有的语法来生成 CSS 的程序.
市面上有很多CSS 预处理器可供选择 ,且大多数预处理器会增加一些原生CSS 不具备的特性;
代码最终会转化为CSS 来运行 ,因为对于浏览器来说:它只识别CSS;

常见的CSS 预处理器

常见的预处理器有哪些呢? 目前使用较多的是三种预处理器:

Sass/Scss:

2007年诞生,最早也是最成熟的CSS 预处理器,拥有ruby社区的支持,是属于Haml(一种模版系统)的一部分;
目前受LESS 影响,已经进化到了全面兼容CSS的SCSS;

Less:

2009年出现,受SASS 的影响比较大,但又使用CSS的语法 ,让大部分开发者更容易上手
比起SASS 来,可编程功能不够,不过优点是使用方式简单,便捷,兼容CSS,并且已经足够使用
另外反过来也影响了SASS 演变到了 SCSS的时代;
著名的Twitter Bootstrap 就是采用 LESS做底层语言的,也包括React 的UI框架 AntDesign.

Stylus:

2010年产生,来自Node.js社区,主要用来给Node项目进行CSS 预处理支持;
语法偏向于Python,使用率相对于Sass/Less 少很多

Less 预处理器

什么是LEss呢? 官方的介绍如下:

It's CSS, with just a little more.

Less (Leaner Style Sheets 的缩写) 是一门CSS 拓展语言,并且兼容CSS.

Less 增加了很多相比于CSS 更好用的特性;
比如 定义变量,混入,嵌套,计算等等
Less 最终需要被编译成CSS 运行于浏览器中(包括部署到服务器中)

Less 代码的编译

less 代码的编译通常有如下几种方式:

方式一 : 下载Node环境,通过 npm 包管理下载less 工具,使用less 工具进行编译;

可以通过webpack 配置完成此操作,篇幅问题,不再做演示.

方式二: 通过VSCode 插件来完成CSS 或者在线编译

lesscss.org/less-previe... (在线翻译网站)

方式三:引入CND的less 编译代码,对less 进行实时的处理

css 复制代码

<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>

方式四: 将less 编译的js 代码下载到本地,执行js代码对less 进行编译;

将方式三链接种的代码拷贝到本地
在html 中引入js 文件

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<link rel="stylesheet/less" href="./test.less">
<script src="./lessc.js"></script>
</head>
<body>
    <div class="box"></div>
    
</body>
</html>