LESS

Posted 2020-12-10 tlf01

less

Less编译工具

1. koala 官网:www.koala-app.com

less中的注释

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

less中的变量

1. 使用@来申明一个变量
   1. 语法： @变量名
2. 作为普通属性值只来使用: 直接使用@pink
   1. 语法: @变量名: 值;
   2. 使用：@变量名
   3. 定义方法: @pink：pink => 使用：@pink
3. 作为选择器和属性名：@{selector的值}的形式
   1. 语法: @变量名: 选择器 或者 属性名
   2. 使用: @{变量名}
   3. 定义方法: @m:margin => 使用：@{m}
4. 作为URL：@{url}
5. 变量的延迟加载

less中的嵌套规则

1. 基本嵌套规则
   1. 都是包含关系
2. &的使用
   1. & 表示上面一个类名

less中的混合

• 混合就是将一系列属性从一个规则集引入到另一个规则集的方式
  • 语法：混合以点开头然后写名称.名称()

1. 普通混合,不带输出的混合

   • 语法：点名称+括号.名称()，这里不加括号，就会编译到css文件中，所以这里需要加上括号
   • 使用：直接点名称 .名称不需要加括号

2. 带参数的混合

   • 语法：点名称(参数1，参数2，参数3) [参数的写法和定义变量一样，使用也一样]
   • 例如：.centet(@w,@h){widht:@w;height:@h}
   • 说明：形参有多少，实参就要写多少，少些一个都不行

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

   • 语法：点名称(参数1:默认值，参数2:默认值，参数3:默认值)
   • 说明：有默认值，可以不用传参数，如果要传：一次传递，不能后面参数传，前面的不传；但是可以前面传，后面不写默认；不能前面默认后面传；

4. 命名参数

   • 语法：点名称(参数1:默认值，参数2:默认值，参数3:默认值)
   • 使用：点名称(参数3:传递值)；
   • 说明： 指定传递值，但是要写上参数名称；

5. 匹配模式

   • 语法：在形参前面添加一个字符串，调用的时候需要选择匹配的那个字符串就可以了不同选择
     • 例如定义：
       .position(t,@w,@h){position:top; widht:@w;height:@h;}
       .position(r,@w,@h){position:right; widht:@w;height:@h;}
       .position(b,@w,@h){position:bottom; widht:@w;height:@h;}
       .position(l,@w,@h){position:left; widht:@w;height:@h;}
     • 使用：
       .position(t[说明：这里选择那个，就会匹配那个],10,20)
   • @_ 说明：在匹配模式中，有相同的样式，可以提取出来，放在一个和匹配模式相同的名称，需要参数，参数写(@_); 在执行匹配模式的类名时，会制动执行公共部分带@_的这个相同名称
     • 例如
       .position(@_){color:#fff;font-size:2px;}
       .position(t,@w,@h){position:top; widht:@w;height:@h;}
       .position(r,@w,@h){position:right; widht:@w;height:@h;}
       .position(b,@w,@h){position:bottom; widht:@w;height:@h;}
       .position(l,@w,@h){position:left; widht:@w;height:@h;}
     • 使用
       .position(t,10,20); //position(@_)这个里面会自动添加到这个里面来

6. arguments变量

   • 语法： @arguments
   • 定义： .border(@1,@2,@3){border:@arguments}
     • 说明： 专递的参数会自动替换到@arguments这里；参数随意写，不影响
   • 使用： .border(1px,solid,black);

less运算

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

less避免编译

• 波浪号+引号引起来，表示原来格式输出
• 例如： *{margin: 100 * 10px;padding: ~"cacl(100px + 100)";}
• 输出为：* {margin: 1000px;padding: cacl(100px + 100);}

less继承

- 使用extend() 函数
- 例如：
    #asd{ &:extend(.a all){代码块}
    - 说面： 后面加all 表示继承a中的所有状态，包括伪类
- 便以为: .a,#asd{代码块}
性能比混合高
灵活度比混合低