Lesscss基础语法

Lesscss中文网

//lesscss基础语法
//声明编码格式
@charset "UTF-8";

//定义变量
@color:#333;
@classBox:box;

//调用
a{
    color: @color;
}

.@{classBox}{
    color: @color;
}

//Minxin
//类混入
//定义类
.boxs{
    height: 50px;
}
//调用
.h{
    .boxs();
}

//函数混入
//定义函数
.w50(){
//没有带参数的函数
    width: 50%;
}
//函数调用
.w{
    .w50();
}

//带参数函数
//没有设置默认值
.f(@direction){//定义了参数必须传参(没有默认值)，调用必须传参
    float: @direction;
}
//调用
.f_left{
    .f(left);
}
//带有默认值
.fr(@dir:right){ //带有默认值可以不传参
    float: @dir;
}
//调用
.f_right{
    .f();
}

//嵌套
.app{
    display: block;
    img{
        display: none;
    }
    //需要连接的情况加 & 符号
    &:hover{
        img{
            display: block;
           }
    }
    &::before{//伪元素也一样
       content: "";
    }
    > div{//后代选择器
        display: block;
    }
}




//导入 Import样式（.less | .css 可以省略）
@import "demo1";
@import "demo2";
@import "demo3";



//函数(内置函数，运算)
//运算
@num:5;
ul {
    width: 100% * num;//500%
    li{
        width: 10% / num;//20%
        color: red + yellow + blue;//#ffffff
        //内置函数
        border-color: lighten(red,20%); //亮度添加10%
     }
}