初见Less

  • Less是一门CSS预处理语言,它扩展了CSS语言,增加了变量,Mixin,函数等特性,使CSS更易维护和扩展,Less可以运行在Node或浏览器端

less中的注释

  • //开头的注释,不会被编译到CSS文件中
  • /**/包裹的注释会被编译到CSS文件中

less中的变量

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

  • 作为普通属性值来使用:直接使用@变量名

  • 作为选择器和属性名:@{selector的值}的形式

    • 编译前:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      @color: pink;
      @kuandu: width;
      @selector: #wrap;
      @{selector}{
      @{kuandu}: 300px;
      height: 300px;
      background-color: @color;
      margin: 0 auto;
      }
    • 编译后:

      1
      2
      3
      4
      5
      6
      #wrap {
      width: 300px;
      height: 300px;
      background-color: pink;
      margin: 0 auto;
      }
  • 作为URL:@{URL}

  • 变量的延迟加载

  • less中变量是块级作用域

    • 编译前:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      @var: 0;
      .class{
      @var: 1;
      .bass{
      @var: 2;
      three: @var;
      @var: 3;
      }
      one: @var;
      }
    • 编译后:

      1
      2
      3
      4
      5
      6
      .class {
      one: 1;
      }
      .class .bass {
      three: 3;
      }

less的嵌套规则

  • 基本嵌套规则

  • &的使用

    • 属性名之间的嵌套只能表示祖先元素关系

    • 属性名前加&则可以取消祖先元素关系之间的空格(设置hover常用)

    • 编译前:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      #wrap{
      width: 300px;
      height: 300px;
      background-color: pink;
      margin: 0 auto;
      .inner{
      width: 200px;
      height: 200px;
      margin: 0 auto;
      background-color: powderblue;
      &:hover{
      background-color: red;
      }
      }
      }

      编译后:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      #wrap {
      width: 300px;
      height: 300px;
      background-color: pink;
      margin: 0 auto;
      }
      #wrap .inner {
      width: 200px;
      height: 200px;
      margin: 0 auto;
      background-color: powderblue;
      }
      #wrap .inner:hover {
      background-color: red;
      }

Less中的混合(Mixin)

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

普通混合

  • 将相同的样式封装到一起,方便选择器直接使用相同的样式

    • 编译前:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      .same{
      width: 100px;
      height: 100px;
      background-color: powderblue;
      &:hover{
      background-color: red;
      }
      }

      #wrap{
      width: 300px;
      height: 300px;
      background-color: pink;
      margin: 0 auto;
      .inner{
      .same;
      }
      .inner2{
      .same;
      }
      }
    • 编译后:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      .same {
      width: 100px;
      height: 100px;
      background-color: powderblue;
      }
      .same:hover {
      background-color: red;
      }
      #wrap {
      width: 300px;
      height: 300px;
      background-color: pink;
      margin: 0 auto;
      }
      #wrap .inner {
      width: 100px;
      height: 100px;
      background-color: powderblue;
      }
      #wrap .inner:hover {
      background-color: red;
      }
      #wrap .inner2 {
      width: 100px;
      height: 100px;
      background-color: powderblue;
      }
      #wrap .inner2:hover {
      background-color: red;
      }

不带输出的混合

  • 如果不希望共同样式生成一个独立的规则集,在选择器名称后加()即可

    • 编译前:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      .same(){
      width: 100px;
      height: 100px;
      background-color: powderblue;
      &:hover{
      background-color: red;
      }
      }

      #wrap{
      width: 300px;
      height: 300px;
      background-color: pink;
      margin: 0 auto;
      .inner{
      .same;
      }
      .inner2{
      .same;
      }
      }
    • 编译后:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      #wrap {
      width: 300px;
      height: 300px;
      background-color: pink;
      margin: 0 auto;
      }
      #wrap .inner {
      width: 100px;
      height: 100px;
      background-color: powderblue;
      }
      #wrap .inner:hover {
      background-color: red;
      }
      #wrap .inner2 {
      width: 100px;
      height: 100px;
      background-color: powderblue;
      }
      #wrap .inner2:hover {
      background-color: red;
      }

带参数(多个)的混合

  • 编译前:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    .same(@w,@h,@c){
    width: @w;
    height: @h;
    background-color: @c;
    &:hover{
    background-color: red;
    }
    }

    #wrap{
    width: 300px;
    height: 300px;
    background-color: pink;
    margin: 0 auto;
    .inner{
    .same(100px,100px,blue);
    }
    .inner2{
    .same(200px,200px,purple);
    }
    }
  • 编译后:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    #wrap {
    width: 300px;
    height: 300px;
    background-color: pink;
    margin: 0 auto;
    }
    #wrap .inner {
    width: 100px;
    height: 100px;
    background-color: blue;
    }
    #wrap .inner:hover {
    background-color: red;
    }
    #wrap .inner2 {
    width: 200px;
    height: 200px;
    background-color: purple;
    }
    #wrap .inner2:hover {
    background-color: red;
    }

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

  • 如下所示:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    .same(@w:100px,@h:100px,@c:green){
    width: @w;
    height: @h;
    background-color: @c;
    &:hover{
    background-color: red;
    }
    }

    #wrap{
    width: 300px;
    height: 300px;
    background-color: pink;
    margin: 0 auto;
    .inner{
    .same(100px,100px,blue);
    }
    .inner2{
    .same(200px,200px,purple);
    }
    }

命名函数

  • 通俗地讲,就是可以使用名值对传参

    • 编译前:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      .same(@w:100px,@h:100px,@c:green){
      width: @w;
      height: @h;
      background-color: @c;
      &:hover{
      background-color: red;
      }
      }

      #wrap{
      width: 300px;
      height: 300px;
      background-color: pink;
      margin: 0 auto;
      .inner{
      .same(@c:black);
      }
      .inner2{
      .same(@c:#bfa);
      }
      }
    • 编译后:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      #wrap {
      width: 300px;
      height: 300px;
      background-color: pink;
      margin: 0 auto;
      }
      #wrap .inner {
      width: 100px;
      height: 100px;
      background-color: black;
      }
      #wrap .inner:hover {
      background-color: red;
      }
      #wrap .inner2 {
      width: 100px;
      height: 100px;
      background-color: #bfa;
      }
      #wrap .inner2:hover {
      background-color: red;
      }

匹配模式

  • less中也存在类似java的引包机制,可以将有相似内容的样式写在一个单独的less文件中,然后主less文件通过@import "包的路径";来引用

  • 匹配模式第一个参数可以是字符串形参,通过混合的第一个字符串形参,来确定具体要执行哪一个同名混合

  • 在一个less文件中,如果要定义的匹配模式中有相同部分,可以将相同部分提取出来,额外声明一个同名的匹配模式,参数必须为@_,这样在含字符串形参的匹配模式被调用时,这个匹配模式也会被调用,@ :表示匹配,_表示所有

  • 如下案例,通过less来实现四个方向三角形的样式输出

    • triangle.less

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      .triangle(@_,@w,@c){
      width: 0px;
      height: 0px;
      border-style: solid;
      }

      .triangle(L,@w,@c){ //L是字符串形参
      border-width: @w;
      border-color: transparent @c transparent transparent;
      }
      .triangle(T,@w,@c){
      border-width: @w;
      border-color: transparent transparent @c transparent;
      }
      .triangle(B,@w,@c){
      border-width: @w;
      border-color: @c transparent transparent transparent;
      }
      .triangle(R,@w,@c){
      border-width: @w;
      border-color: transparent transparent transparent @c;
      }
    • style.less

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      @import "triangle.less";

      #wrap{
      width: 300px;
      height: 300px;
      background-color: pink;
      margin: 0 auto;
      .inner{
      .triangle(R,30px,blue) //修改第一个参数调整方向
      }
      }
    • 最终样式表style.css

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      #wrap {
      width: 300px;
      height: 300px;
      background-color: pink;
      margin: 0 auto;
      }
      #wrap .inner {
      width: 0px;
      height: 0px;
      border-style: solid;
      border-width: 30px;
      border-color: transparent transparent transparent blue;
      }

arguments变量

  • 将参数列表的所有参数依次填入@arguments

    • 编译前:

      1
      2
      3
      4
      5
      6
      7
      .border(@1,@2,@3){
      border: @arguments;
      }

      #wrap .inner{
      .border(1px, solid, black)
      }
    • 编译后:

      1
      2
      3
      #wrap .inner {
      border: 1px solid black;
      }

Less的运算

  • 只可以作加减乘除
  • 计算的一方带单位即可

Less的继承

  • 继承的意义:如果不用继承,相同的样式即使是使用混合,编译结束后的CSS文件中也不会将共同代码放在以逗号链接的共同样式集中,这会使CSS文件更大,增加浏览器的负担

  • 继承类不允许存在参数

  • 继承时加all将会继承包括伪类的样式

  • 性能比混合高,灵活度比混合低

    :extend(.center all);

    • center.less

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      .center{
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
      }
      .center:hover{
      //要加!important,不然编译后会被下面的样式覆盖
      background-color: crimson !important;
      }
    • mixin.less

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      @import "center.less";
      *{
      margin: 0;
      padding: 0;
      }
      #wrap{
      position: relative;
      width: 300px;
      height: 300px;
      border: 1px solid black;
      margin: 0 auto;
      .inner{
      &:extend(.center all); //加all表示将所有状态全部拿下来,包括hover
      &:nth-child(1){
      width: 100px;
      height: 100px;
      background-color: chartreuse;
      }
      &:nth-child(2){
      width: 50px;
      height: 50px;
      background-color: chocolate;
      }
      }
      }
    • mixin.css

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      .center,
      #wrap .inner {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
      }
      .center:hover,
      #wrap .inner:hover {
      background-color: crimson !important;
      }
      * {
      margin: 0;
      padding: 0;
      }
      #wrap {
      position: relative;
      width: 300px;
      height: 300px;
      border: 1px solid black;
      margin: 0 auto;
      }
      #wrap .inner:nth-child(1) {
      width: 100px;
      height: 100px;
      background-color: chartreuse;
      }
      #wrap .inner:nth-child(2) {
      width: 50px;
      height: 50px;
      background-color: chocolate;
      }
    • html

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      <!DOCTYPE html>
      <html lang="zh-CN">
      <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link rel="stylesheet" href="mixin.css">
      </head>
      <body>
      <div id="wrap">
      <div class="inner">
      inner1
      </div>
      <div class="inner">
      inner2
      </div>
      </div>
      </body>
      </html>
  • 如图:

    image-20210522003053428

    image-20210522003106918

Less避免编译

  • 使用~“内容”避免编译

    • 编译前

      1
      2
      3
      4
      *{
      margin: 100 * 10px;
      padding: ~"cacl(100px + 100)";
      }
    • 编译后:

      1
      2
      3
      4
      * {
      margin: 1000px;
      padding: cacl(100px + 100); //将交给浏览器去计算
      }