less基础

Posted 2020-12-22 cczoi

less

less的含义：

less是一种动态样式语言，属于css预处理器的范畴，它扩展了css语言，增加了变量、Mixin、函数等特性，使css更易维护和扩展。

此外，less既可以在客户端上运行，也可以借助Node.js在服务端运行。

 

less的中文官网：http://lesscss.cn/

 

less的编译工具:

　　koala官网：www.koala-app.com

　　此外，Visual Studio Code自带less编译功能

 

less中的注释：

　　以//开头的注释，不会被编译到css文件中，而以/**/包裹的注释会被编译到css文件中

 

less中的变量：

　　在less文件中，可以使用@来申明一个变量：@color：yellow;

　　变量的形式：

　　　　1. 作为普通属性值来使用：直接使用@yellow

　　　　2. 作为选择器和属性名：#{selector的值}的形式

　　　　3. 作为URL：@{url}

　　　　4. 变量的延迟加载

 

less中的嵌套规则:

　　1. 基本的嵌套规则

　　2. &的使用 例如&hover

 

less中的混合：

　　混合即是将一系列属性从一个规则集引入到另一个规则集的方式

　　1. 普通混合

　　2. 不带参数的混合

　　3. 带参数的混合

　　4. 带参数且有默认值的混合

　　5. 带多个参数的混合

　　6. 命名参数

　　7. arfuments变量

 

less运算：

　　在less中可以进行 加减乘除 的运算

 

less避免编译：