【Less】一文带你了解Less
文章目录
一、CSS预处理器
1.1 CSS编写的痛点
- CSS作为一种样式语言, 本身用来给HTML元素添加样式是没有问题的.
- 但是目前前端项目已经越来越复杂, 不再是简简单单的几行CSS就可以搞定的, 我们需要几千行甚至上万行的CSS来完成页面的美化工作.
- 随着代码量的增加, 必然会造成很多的编写不便:
- 比如大量的重复代码, 虽然可以用类来勉强管理和抽取, 但是使用起来依然不方便;
- 比如无法定义变量(当然目前已经支持), 如果一个值被修改, 那么需要修改大量代码, 可维护性很差; (比如主题颜色)
- 比如没有专门的作用域和嵌套, 需要定义大量的id/class来保证选择器的准确性, 避免样式混淆; 等等一系列的问题;
1.2 认识CSS预处理器
- 社区为了解决CSS面临的大量问题, 出现了一系列的CSS预处理器(CSS_preprocessor)
- CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序;
- 市面上有很多CSS预处理器可供选择,且绝大多数CSS预处理器会增加一些原生CSS不具备的特性;
- 代码最终会转化为CSS来运行, 因为对于浏览器来说只识别CSS
CSS预处理器为CSS增加了一些编程特性,无需考虑浏览器的兼容问题,可以在CSS中使用变量,简单的逻辑程序,函数等在编程语言中的一些基本的性能,可以让CSS更加的简洁,增加适应性以及可复读性,可维护性等。
1.3 常见的CSS预处理器
- Sass/Scss
- Less
- Stylus
二、Less
2.1 认识Less
- Less (Leaner Style Sheets 的缩写) 是一门CSS 扩展语言, 并且兼容CSS。
- Less增加了很多相比于CSS更好用的特性;
- 比如定义变量、混入、嵌套、计算等等;
- Less最终需要被编译成CSS运行于浏览器中(包括部署到服务器中);
2.2 Less代码的编译
Less代码如何被编译成CSS代码运行呢?
-
下载Node环境,通过npm包管理下载less工具,使用less工具对代码进行编译
npm install -g less > lessc styles.less styles.css
-
通过VSCode插件来编译成CSS
-
引入CDN的less编译代码,对less进行实时的处理
<link rel="stylesheet/less" href="./Less的基本使用.less"> <script src="https://cdn.jsdelivr.net/npm/less@4" ></script>
-
将less编译的js代码下载到本地,执行js代码对less进行编译
2.3 Less语法
-
Less兼容CSS
- 所以我们可以在Less文件中编写所有的CSS代码;
- 只是将css的扩展名改成了.less结尾而已;
-
变量
-
在Less中使用如下的格式来定义变量
-
@变量名: 变量值;
@maincolor: #1296db; .container { width: 500px; height: 300px; background-color: @maincolor; }
-
-
嵌套
-
在CSS中,当我们需要找到一个内层的元素时,往往需要嵌套很多层的选择器
-
Less提供了选择器的嵌套
@maincolor: #1296db; .container { width: 500px; height: 300px; background-color: @maincolor; .box { width: 200px; height: 100px; background-color: aquamarine; } }
-
&:代表的上一层选择器的名字
-
**当前选择器的伪类或者伪元素。**如 :hover :focus :after :before等
&:hover { }
-
-
运算
- 在Less中,算术运算符 +、-、 * 、/ 可以对任何数字、颜色或变量进行运算。
- 算术运算符在加、减或比较之前会进行单位换算,计算的结果以最左侧操作数的单位类型为准;
- 如果单位换算无效或失去意义,则忽略单位;
-
混入
-
在原来的CSS编写过程中,多个选择器中可能会有大量相同的代码
-
我们希望可以将这些代码进行抽取到一个独立的地方,任何选择器都可以进行复用;
-
在less中提供了混入(Mixins)来帮助我们完成这样的操作;
-
混合(Mixin)是一种将一组属性从一个规则集(或混入)到另一个规则集的方法。
-
假设我们定义了一个类(class)如下:
.bordered { border: 1px solid black; }
-
如果我们希望在其它规则集中使用这些属性呢?没问题,我们只需像下面这样输入所需属性的类(class)名称即可,如下所示:
.container { width: 500px; height: 300px; background-color: @maincolor; .bordered(); }
-
-
extend继承
- 和mixins作用类似,用于复用代码;
- 和mixins相比,继承代码最终会转化成并集选择器
-
作用域
- 在查找一个变量时,首先在本地查找变量和混合(mixins);
- 如果找不到,则从“父”级作用域继承;
-
导入
-
导入的方式和CSS的用法是一致的;
-
导入一个 .less 文件,此文件中的所有变量就可以全部使用了;
-
如果导入的文件是 .less 扩展名,则可以将扩展名省略掉;
-