less学习

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);
  }
继承

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

避免编译

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

上一篇:LeetCode 120. 三角形最小路径和


下一篇:shell脚本实现杨辉三角形