Less - 墨码山河

摘要：本文主要介绍了Less的使用。

1 简介

在了解Less之前，要先认识什么是CSS预处理器以及其有什么作用。

增强传统CSS（层叠样式表）功能的脚本语言被称为CSS预处理器，它允许开发人员使用变量、嵌套、混合等功能，以更高效和可维护的方式编写CSS代码。CSS预处理器的另一个术语是动态样式表语言。

Less是一种动态样式语言，它扩展了CSS的功能，提供了变量、嵌套、混合、运算等功能。

Less使用类似于CSS的语法，但具有更简洁的书写方式。

Less可以通过Less编译器将Less文件编译为普通的CSS文件。

Less具有较小的学习曲线，易于上手。

Sass是一种成熟且广泛使用的CSS预处理器，它提供了许多强大的功能，如变量、嵌套规则、混合、继承等。

Sass有两种语法：Sass（使用缩进）和 SCSS（使用类似于CSS的语法）。

Sass可以通过命令行工具或构建工具编译为普通的CSS文件。

Sass具有强大的功能和灵活性，适用于大型项目。

SCSS是Sass的一种语法格式，它使用类似于CSS的语法，但具有Sass的功能和特性。

SCSS可以看作是Sass的一种扩展，使用大括号和分号来表示代码块和语句。SCSS与Sass兼容，可以在一个项目中同时使用。

Stylus是一种简洁灵活的CSS预处理器，提供了类似于Sass和Less的功能，如变量、嵌套规则、混合、继承等。

Stylus使用类似于Python的缩进语法。

Stylus也可以通过命令行工具或构建工具编译为普通的CSS文件。

Stylus的语法非常简洁，可以减少样式表的代码量。

Less没有去掉任何CSS的功能，而是在现有的语法上增添了许多额外的功能特性，可以看做是CSS的一种增强版，通过Less可以用更少的代码实现更强大的样式。

Sass与Stylus相比于Less功能更为丰富，但对于学习成本以及适应时间，Less稍胜一筹。

如果是在浏览器环境中开发，可以通过引入Less的核心JS库使用Less的功能。

在官网上下载Less的JS文件，也可以通过GitHub下载：https://github.com/less/less.js/archive/master.zip

因为Less需要在CSS之后生效，所以需要在CSS后引入JS文件，或者在导入Less文件后引入JS文件：

1
2
3

<style type="text/css"></style>
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less/less.min.js"></script>

如果是在Node.js环境中开发，可以使用NPM安装Less：

bash

1	npm install -g less

使用命令将Less文件转为CSS文件：

bash

1	lessc styles.less styles.css

在VS code中安装Easy Less插件