less课程笔记

less

less是一种动态样式语言，属于css预处理器的范畴，它扩展了css语言，增加了变量、mixin、函数等属性，使css更易维护和扩展
less既可以在客户端运行，也可以借助node.js在服务端运行

less编译工具

省

less中的注释

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

less中的变量

使用@来声明一个变量：@pink: pink;

1. 作为普通属性值来使用，直接使用@pink
2. 作为选择器和属性名：#@{selector的值}的形式
3. 作为URL：@{url}
4. 变量的延迟加载

less中的嵌套规则

1. 基本的嵌套规则
2. &的使用

less中的混合

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

1. 普通混合——编译后仍存在于css代码
2. 不带输出的混合——加小括号 编译后不存在 .aaa()
3. 带参数的混合——小括号内传参 .aaa(@w, @h, @c)
4. 带参数并且有默认值的混合 .aaa(@w:10px, @h, @c)
5. 带多个参数的混合
6. 命名参数 .aaa(@c:black)
7. 匹配模式
   1. 可以复用的代码分离出去，并定义参数
   2. @import引入使用，传入实参
   3. 可以在1中添加标识符如：(L, @a, @b) (R, @a, @b) 代表left方向与right方向的三角形；2调用时使用(L, xxx, xxx)
8. arguments变量
   1. arguments？实参列表、伪数组（具有length属性的对象）
   2. 用法：定义时可以作为简练写法如 .border(@w, @style, @c) { border: @arguments }

less运算

在less中可以进行加减乘除的运算（如 100+100px 只需在末尾加单位）

less继承

性能比混合高
灵活度比混合低
用法： :extend(.xxx all)
使用时注意变量延迟加载问题，可以添加 !important 提高优先级

less避免编译

使用 ~“” 来包裹不想被预编译的css语句
如 padding: ~“cacl(100px + 100)”;