Less基础

执行时用js编译less

<style type="text/less">
  #wrap{
        width: 500px;
        height: 500px;
        border: 1px solid;
        .inner{
                width: 100px;
                height: 100px;
                background: pink;
        }
}
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

Less编译工具 koala 官网:www.koala-app.com

less中的注释

    以//开头的注释，不会被编译到css文件中
    以/**/包裹的注释会被编译到css文件中 

变量

// @定义的 选择器,属性名,url  使用时必须 @{xx}使用  .
// 属性值不能@{}使用 会报错
@color:pink;
@selector:wrap;
@margin:margin;
@background_url:'http://xx.jpg';
.@{selector}{
    @{margin}:20px;
    color:@color;
    background-image: url('@{background_url}');
}

变量的延迟加载

{}是less的作用域  赋值时取的是作用域内变量最终的结果 ,当前作用域不存在变量取上层作用域最终结果
@size:10;
.wrap{
    border: @size px solid; //10px
    .inner{
        @size:1px;
        border: @size solid; //20px 
        @size:20px;
    }
}
//编译结果
.wrap {
  border: 10 px solid;
}
.wrap .inner {
  border: 20px solid;
}

嵌套规则

//以.inner为基准的伪类 用&符开头&就相当于.inner本身  不写会视为子选择器
.inner{
        width: 100px;
        height: 100px;
        background:@color;
        &:hover{
            background: black;
        }
    }

混合 (提取公共代码 跟函数很像的东西 可以传参,以.开头)

<!--普通混合  编译时会被当成类选择器 加入css文件 -->
@color:pink;
.common{
    width: 100px;
    height: 100px;
}
.wrap{
    .inner1{
        .common;
    }
    .inner2{
        .common;
    }
}
<!--不带参数的混合 编译时不会被当成类选择器加入css文件-->
.common(){....} 
<!--带参数的混合 编译时不会被当成类选择器加入css文件-->
//除非是有默认值的形参 否则一旦定义了形参 就算混合内部没用上这个形参 调用时不传实参也会报错
//形参的默认值 可以是其他变量
@color:#fff;
.common(@margin,@c:@color){
    width: 100px;
    height: 100px;
    background:@c;
    margin: @margin;
    &:hover{
        background: black;
    }
}
.wrap{
    .inner1{
        .common(10px,#666);
    }
    .inner2{
        .common(20px);
        border: 1px solid;
    }
}
<!--命名参数-->
// 调用时 无视参数的顺序 指定参数的值
@color:#fff;
.common(@margin,@pd:10px,@c:@color){
    width: 100px;
    height: 100px;
    background:@c;
    margin: @margin;
    padding:@pd;
    &:hover{
        background: black;
    }
}
.wrap{
    .inner1{
        .common(@margin:20px);
    }
    .inner2{
        .common(@pd:20px,@margin:30px);
        border: 1px solid;
    }
}

<!--匹配模式--->
//可以将匹配混合集的公共代码提取,名字一致  写了@_后(形参个数也必须一致) 一旦混合被匹配上会自动调用 
.sjx(@_,@ww,@cc){
    width: 0px;
    height: 0px;
    overflow: hidden; 
    border-width: @ww;
}
.sjx(T,@width,@color){
    //border-width: @width;
    border-style:solid dashed dashed dashed;
    border-color:@color transparent transparent transparent ;
}
.sjx(R,@width,@color){
    //border-width: @width;
    border-style:dashed solid dashed dashed;
    border-color:transparent @color transparent transparent ;
}
.wrap{
    .inner{
        .sjx(T,20px,yellow);//根据标识 调用匹配上的混合
    }
}

<!-- arguments 混合内部使用实参时不用一个个写 一次性写完 鸡肋的一个功能-->
.border(@w,@style,@c){
    border: @arguments;
}

.wrap .sjx{
   .border(1px,solid,black)
}

继承

//继承的灵活性不好 但是性能好 , 与混合相比(混合编译后css相当于复制粘贴) 继承则不会出现重复的代码

.juzhong{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

.juzhong:hover{
    background: red!important;
}
.juzhong .test{
    color: red;
}
.inner{
        &:extend(.juzhong all); //all表示 以.juzhong开头的全部继承 (这里:hover .test都会继承)
        &:nth-child(1){
           width: 100px;
           height: 100px;
           background: pink;
        }
        &:nth-child(2){
           width: 50px;
           height: 50px;
           background: yellow;
        }
}
//最终生成的css文件,就是 分组选择器
.juzhong,
.wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}
.juzhong:hover,
.wrap .inner:hover {
  background: red!important;
}
.juzhong .test,
.wrap .inner .test {
  color: red!important;
}
.wrap {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid;
  margin: 0 auto;
}
.wrap .inner:nth-child(1) {
  width: 100px;
  height: 100px;
  background: pink;
}
.wrap .inner:nth-child(2) {
  width: 50px;
  height: 50px;
  background: yellow;
}

避免编译

margin: ~"calc(10+10)";  ~" xxx"里的内容 不会被less编译 

引入其他less文件

@import './xx.less'; //可以将一些混合写入其他文件 使用时引入这个文件就行