CSS(三）less一篇搞定

目录

一、less

1.1什么是less

1.2Less编译

1.3变量

1.4混合

1.5嵌套

1.6运算

1.7函数

1.8作用域

1.9注释与导入

---

一、less

1.1什么是less

   我们写了这么久的CSS,里面有很多重复代码，包括通配颜色值、容器大小。那我们能否通过js声明变量来解决这些问题？原生的css不支持，但less支持。css预处理器为css增加一些编程特性，无需考虑浏览器的兼容问题，可以在CSS中使用变量，简单的逻辑程序，函数等在编程语言中的一些基本的性能，可以让css更加的简洁，增加适应性以及可读性，可维护性等。

注意：

• 浏览器不认识less，写的less代码，需要编译成css让浏览器识别。
• 再项目，通常我们都是用预处理语言

1.2Less编译

安装node

安装less         npm install -g less

编译less 

方式一        lessc styles.less styles.css

方式二  

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="https://cdn.jsdelivr.net.cn/npm/less" ></script>

方式三    下载easyless插件