less学习

2024-01-16 09:59:58

less——css预处理器

引入

<link rel="stylesheet" href="lib/honeySwitch.css">

<link rel="stylesheet/less" href="lib/honeySwitch.less"> // css名改less
<script src="https://cdn.bootcss.com/less.js/3.0.4/less.min.js"></script> // 引这句代码(写在head里)

引用

在一个less里引用另一个less
@import "./lib/comp.less"

编译

编译转换：less ==> css
编译工具--koala：http://koala-app.com/

定义变量 @

@colorp:pink;
@colorb:blue;  //定义样式
@m: margin;  //定义属性(一般不用)
@selector: .btn   //定义选择器(一般不用)
*   {
    @{m}: 0;    属性和选择器在写的时候要加上 {} ,而样式不用
    padding: 0;
  }
@{selector} {
          backgroundColor:@colorp;
          border: 1px solid @colorb;
       }

延迟加载，作用域

作用域：一个 { } 里算一个作用域
延迟加载：等作用域里的所有变量加载完，再执行其他操作

    @var:  #1111111;
        div  {
        @var:  #333333;
        color:  @var;    由于延迟加载，这里的color: #666666
        @var:  #666666
    }
     backgrundColor: @var     由于作用域的原因，这里是backgroundColor: #111111

嵌套规则，&

less与css的区别之一就是less可以嵌套写
&符号是指当前元素

   .div1{
        width: 300px;
        height: 300px;
        .div2{
              width:50px;
              height:50px;
              backgroundColor: blue;
              &: hover {          这里的&: hover 既  div2: hover
               backgroundColor: red;
              }
        }
  }

混合 —— 以 . 开头，并且有 ( )


  定义混合(以 . 开头)：
    .beijing(@w:10px,@h:10px,@bgc: pink){    带参混合（参数间用逗号隔开）。
            width: @w;                       设定默认值10,10,pink(若不设定默认值，
            height: @h;                      下面引用时少输入一个参数， 就会报错，  
            bacjgroundColor: @bgc;           如只输入10px,purple)
      }

  调用：
      .div1{
          .beijing(100px,100px,blue);    所有参数均输入===100px,100px,blue
      }
      .div2{
          .beijing();   未输入参数，则直接调用默认值===10px,10px,pink
      }
      .div3{
          .beijing(@bgc: red);    指定输入参数(既命名参数)，则其他未输入
      }                           的为默认值===10px,10px,red

匹配模式(例子：画一个三角形)

定义混合：
.triangle(@_,@w,@c){      这里是公用代码。 @_ 是匹配符的意思,既在调用相同名字的代码时，
      width: 0;            带匹配符的就算没调用也没关系，系统会默认调用。 
      height: 0;          所以：1相同名字(如这里的triangle)，2匹配符，
      overflow: hidden;    3公用代码，三者组成公用样式
}
.triangle(T,@w,@c){          T,R,B,L===标识符(less语法之一)
    border-width: @w;
    border-style: solid;
    border-color: @c transparent transparent transparent
}
.triangle(R,@w,@c){
    border-width: @w;
    border-style: solid;
    border-color: transparent @c transparent transparent
}
.triangle(B,@w,@c){
    border-width: @w;
    border-style: solid;
    border-color: transparent transparent @c transparent
}
.triangle(L,@w,@c){
    border-width: @w;
    border-style: solid;
    border-color: transparent transparent transparent @c 
}

调用：
.sanjiaoxing1{
      .triangle(R,40px,blue);
  }
.sanjiaoxing2{
     //.triangle();   此处可以省略不调用，用上面说的@_匹配符可以解决问题
      .triangle(B,50px,purple);
  }

继承

性能比混合高，灵活度比混合低

避免编译

符号 ~" "
~" 这里是需要避免编译的代码 "

码农公寓