1. 什么是 Less
Less 它是一个 css 的预编译器，它可以扩展 css 语言、添加功能，比如变量、混合函数以及一些其他的技术，可以让你的 css 更具维护性、主题性和扩展性。
在编程语言里面我们可以定义变量，而 css 它就不能，那么通过 Less，就可以实现给 css 使用这些变量，或者是混合，还是还有这些函数这样的一些技术。
所以说使用 Less 来维护 css 是非常的方便的。
2. 官方网站
那么我们来看一下 Less 的官方网站，那么这里有两个，第一个是英文的http://www.lesscss.org/ 。如果同学英文不是太好，那么我通常就会选择 Less 的中文网站进行浏览，那么我们可以看一下 Less 的中文网站。其实就是后缀不一样，后缀改为这个 .net 就可以了 http://www.lesscss.net/ 。大家可以去了解一下，看一下。
3. 与 Less 的第一次碰面
我们来看一段代码，那么这一段代码是定义了一个列表的样式。那么前面是一个容器，里面有个 ul ，还有一个无序列表，那么我们可以来写一下这样的一个代码来进行一个演示。
新建一个项目放到 G 盘下面的 less。这是一个空白的项目，然后新建一个网页文档 index.html 。接下来首先来看一下 html 的结构：
3.1 css 的写法
如果我们要用传统的 css 方式给它定义，那么需要在 head 标签中写一个 style。去掉无序列表这个点，使用一张图片来代替这个刚刚的小的黑点。再给这个列表一个高度，比如说 25 个像素，然后行高也为 25 个像素，然后添加背景图片：
3.2 等效的 less 写法
less 的写法如下：
分析一下这 3 个样式，那么它们都包含什么？
都包含 conten ，对吧？那么我们可不可以只让 conten 写一次？在 Less 中是可以这样来写的。我们可以把 conten 单独提出来。然后将其他内容放到 conten 里面去，这样就是形成了一个父子关系了。其中， ul 它的父级就是 conten。而 li 也是 conten 下面的对吧？我们同样的也可以把它放到 conten 里面去。同样对于 a 也可以把它放到里面去。这样一段代码它和我们上面这样的一段代码它的效果是一样的：
那么我们还可以怎样写呢？还可以把 ul 直接放到外层这样来写，但是这样它在生成子子类的时候，它的选择器就会多一层。这会导致 ul 下面的 li 下面的 a , 就无形的又增加了一些负担，对吧？
4. Less 文件的编译
那么 Less 到底写在哪里？其实它的文件的格式后缀是以 .less 结束的，比如说我们的样式都放在 style 目录下，之前我们将样式写在 style/style.css 文件中，但是学过 Less 之后就可以将样式写在 style/style.less 文件中。
之后我们就通可以通过编译工具，生成和我们上面写的 css 一样的代码。
5. Less 中的注释
在 Less 中有两种注释方式，第一种是以双斜线的这种形式来注释的，这一种注释不会被编译到 css 文件中。而第二种格式，以星号斜线这种格式来包裹的注释，则会被编译到 css 文件中。
6. 总结
以上就是本文介绍的 Less 入门的主要的知识点了，本文主要讲到了：
- 什么是 Less？Less 它是 css 的一个预编译器，可以支持一些变量混合函数。
- Less 的中文和英文的官方网站。
- 第一次使用 Less 写样式。
- Less 的编译和两种注释。
大家需要谨记的是 Less 只是给我们提供一种更方便的 css 的这种维护方式，它最后的结果依然是生成 css 才会被浏览器识别。
原文链接：https://juejin.cn/post/7352763168903938102 作者：垂慕容
