混入

无参数

.card(){  .和#号都可以用什么定义下面使用的时候用什么
    width: 100px;
    height: 100px;
    background-color: yellow;
    box-shadow: 0 1px 2px rgba(150,150,150,.58);
   -webkit-box-shadow: 0 1px 2px rgba(150,150,150,.58);
  }
  #box2{
      .card()
  }

默认参数

// 默认参数
.border(@a: 10px; @b: 10px; @c: 30px; @color: #231231) {
    width: 100px;
    height: 100px;
    border: solid 1px @color;
    box-shadow: @arguments;  @arguments代表.dorder的全部参数
    background-color: yellow;
}

#box2 {
    .border()
}

方法匹配模式

第一个参数left会找到方法中匹配的最高的，如果匹配的相同将全部选择并存在的相同样式惊醒覆盖替换
如果匹配的参数是变量，则将会匹配，如@_
.tair(top,@width:20px,@color:#000){
  border-color: transparent transparent @color transparent;
}
.tair(right,@width:20px,@color:#000){
    border-color: transparent   @color transparent transparent;
  }
.tair(bottom,@width:20px,@color:#000){
    border-color:@color transparent   transparent transparent  ;
  }
.tair(left,@width:20px,@color:#000){
    border-color: transparent    transparent transparent @color;
  }
.tair(@_,@width:20px,@color:#000){
    border-style: solid;
    border: @width;
  }
#box2 {
    .tair(left,50px,#999)
}

css
#box2 {
  border-color: transparent transparent transparent #999;
  border-style: solid;
  border: 50px;
}

方法的命名空间

/* 方法的命名空间 */
#cord(){
    background:red;
    .d(@width:300px){
      width: @width;
      #a(@h:300px){
          height: @h;
      }
    }
}
#box2{
    #cord  .d  #a(100px);
    #cord  .d(400px);
    
    #cord > .d > #a(100px);
    #cord > .d(400px);
    
    #cord;
}

css

#box2 {
  height: 100px;
  width: 400px;
  background: red;
}

方法的条件筛选

比较运算有 > >= = =< <

#card() {

    //when
    .border(@width, @color, @style) when (@width>100px) and (@color=#999) {
        border: @style @color @width;
    }

    //when not 相当于 ！ 不符合才会执行
    .bacground(@color) when not(@color=#222) {
        background: @color;
    }
    // . 逗号分隔符方法 ||   自要有一个符合条件都会执行
    .fort(@size:20px) when (@size>150px) , (@size<100px){
        font-size: @size;
    }
}
#box2{
    #card > .border(200px,#999,solid);
    #card  > .bacground(#111);
    #card>.fort(110px)
}

css

#box2 {
  border: solid #999 200px;
  background: #111;
}

数量不定的参数

.boxShow(...){
    box-shadow: @arguments;
}
.textShadow(@a,...){
    width: @a;
    text-shadow: @arguments;
}
#box2{
   .boxShow(1px ,2px,30px,red);
    .textShadow(1px,2px,3px,green);
}
css
#box2 {
  box-shadow: 1px 2px 30px red;
  width: 1px;
  text-shadow: 1px 2px 3px green;
}

方法优先级

.border{
    border: 1px solid red;
    margin: 50px;
}
#box2{
    .border() !important;
}

css

#box2 {
  border: 1px solid red !important;
  margin: 50px !important;
}

循环

递归的循环方法

.generate(1);
.generate(@n,@i:4) when (@i>=@n){
    .column-@{i}{
        width: (@i*100%/@n);
    }
    .generate(@n,(@i - 1));
};
css
.column-4 {
  width: 400%;
}
.column-3 {
  width: 300%;
}
.column-2 {
  width: 200%;
}
.column-1 {
  width: 100%;
}

.generate(4);
.generate(@n,@i:1)when (@i<=@n){
    .column-@{i}{
        width: (@i*100%/@n)
    }
    .generate(@n, (@i + 1))
};
css
.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}

属性拼接

加号+代表逗号
.boxShadow() {
    box-shadow+: inset 0 0 10px #555;
}

#box2 {
    .boxShadow();
    box-shadow+: 0 0 20px #000;
}
#box2 {
  box-shadow: inset 0 0 10px #555, 0 0 20px #000;
}
+_代表空格
.animation() {
    transform+_: scale(2);
}

.main {
    .animation();
    transform+_: rotate(15deg);
}
.main {
  transform: scale(2) rotate(15deg);
}

使用技巧

.aver(@x,@y){
    @average:((@x+@y)/2)
}
.div{
    .aver(16px,30px);
    padding:  @average;
}
.div {
  padding: 23px;
}

继承

extend

.aninationn{
    transform: all .3s ease-out;
    .hide{
        transform: scale(0);
    }
}
#main{
    &:extend(.aninationn);
}
#box{
    &:extend(.aninationn  .hide);
}

css
.aninationn,
#main {
  transform: all 0.3s ease-out;
}
.aninationn .hide,
#box {
  transform: scale(0);
}

all全局替换

#main{
    width: 200px;
}
#main{
    &:after{
        content:'less is good'
    }
}
#worp:extend(#main all){}

css
#main,
#worp {
  width: 200px;
}
#main:after,
#worp:after {
  content: 'less is good';
}

减少代码重复性

.method{
    width: 200px;
    &:after{
        content:'less is good'
    }
}
#main{
    .method()
}

css
.method {
  width: 200px;
}
.method:after {
  content: 'less is good';
}
#main {
  width: 200px;
}
#main:after {
  content: 'less is good';
}

导入

父级 @import './daoru'; daoru子级

=reference导入但不编译

@import (reference) './daoru.less';

=once相同的导入一次

@import (once) './daoru.less';

=multiple可以导入多次

@import (multiple) './daoru.less'; @import (multiple) './daoru.less';

带条件的混合

 lightness判断亮度
.minin(@a) when (lightness(@a)>=50%) {
    background: black;
}
.minin(@a) when (lightness(@a)<=50%){
    background: white;
}
.minin(@a){
    color: @a;
}
.class{
    .minin(#ddd)
}
.class1{
    .minin(#555)
}

css
.class {
  background: black;
  color: #ddd;
}
.class1 {
  background: white;
  color: #555;
}

类型检测函数

iscolor isnumber isstring iskeyword isurl

.minin(@a; @b) when (isNumber(@b)) {
    color: @a;
    font-size: @b;
}
.minin(@a,@b) when (isColor(@b)){
    background-color: @b;
    font-size: @a;
}
.class{
    .minin(#fff,20px);
}
.calss1{
    .minin(20px,#fff);

}
css
.class {
  color: #fff;
  font-size: 20px;
}
.calss1 {
  background-color: #fff;
  font-size: 20px;
}

单位类型检测函数

ispixel 是不是px ispercentage isem isunit

.minin(@a) when (isem(@a)){
    width: @a;
}
.class{
    .minin(20em)
}

函数