CSS之Less预处理

五、Less

5.1 邂逅 Less

5.1.1 Less 简介

• 什么是Less？

  • Less是一门 CSS 扩展语言，也称为CSS预处理器。
  • 增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展
  • Less 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。

• Less的中文官网：https://less.bootcss.com/

• 在Less文件中***导入其他Less文件***

  • // 在 index.Less 中导入 common.Less 文件
    @import  “./common.Less”
    

5.1.2 Less 编译

• VSCode的***Less插件***：Easy LESS

  • 该插件用来把Less文件编译为 css文件 。只要保存一下Less文件，会自动生成同名的CSS文件

• 使用步骤如下

  1. 我们首先新建一个后缀名为***Less的文件***，在这个Less文件里面书写Less语句

  2. 通过Easy LESS插件可以将Less文件编译成CSS文件

  3. 在HTML页面中将编译后的CSS文件引入即可

5.1.3 Less中的注释

• 以//开头的注释，不会被编译到css文件中

• 以/**/包裹的注释会被编译到css文件中

5.1.4 Less 变量

• 语法： @变量名:值;

  • @fontColor: red;
    div {
        color: @fontColor;
    }
    

• 变量命名规范：

  1. 必须有@为前缀
  2. 不能以数字开头

• 使用Less变量

  • 作为普通属性值只来使用：直接使用@xxx
  • 作为选择器或属性名：#/@{xxx}的形式 (几乎不这么做)

Less中的变量具有块级作用域，且会提升到当前作用域的最顶端

5.2 Less 嵌套

• 基本嵌套规则

• 如果有 & 符号，它就被解析为父元素自身或父元素的伪类
  • 

5.3 Less 混合 (核心)

• Less中允许将公共的css样式存放在.xxx函数体中，并以.xxx()形式调用

  • Less中的混合采取就是抽离css公共样式思想

  • 注：定义函数名时，必须以.开头！

    ​

1. 普通调用

2. 带参数调用

• 可以在函数括号中通过@xxx定义形参，多个形参之间以逗号隔开，在调用时传入实参

• 以@xxx:值的方式定义形参的默认值，当没有传入对应的实参时，默认值会生效

3. 指定形参调用

• 在调用函数时，可以通过@xxx:值来指定形参的值

4. 匹配函数调用

1. 定义函数时，允许在所有形参的最前面定义一个占位符

2. 在调用函数时，可以传入占位符，根据占位符来调用匹配的函数

3. 当占位符为@_时，则代表全局匹配，不论传入什么占位符，该函数都会被调用

5. arguments形参

• 在定义函数时，默认会有一个@arguments形参，他代表了所有形参的合集

5.4 Less 运算

• /* Less 里面写 */
  @witdh: 10px + 5;
  div {
  	border: @witdh solid red;
  }
  
  /* 生成的css */
  div {
  	border: 15px solid red;
  }
  /* Less 甚至还可以这样 */
  width: (@width + 5) * 2;
  

• 在less中，如果希望语句不被less编译，而是被css编译，则可以采取以下写法:~"不被Less编译的内容"

  • div {
      width: ~"calc(100vh - 20vh)"
    }
    

坑：less中加法+，减法-，乘法*可以直接写，但是除法/需要（）括起来

5.5 Less继承

• 继承语法与混合类似，只不过在定义继承时不需要在括号

• 继承时通过extend(.xxx)方式继承

• 继承后会编译成并集选择器，有利于提高css性能

• 继承不灵活性能高 混合灵活性能低