LESS

Enjoyendless 2020-06-11

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{代码块}
性能比混合高
灵活度比混合低

相关推荐