Less基础使用

建立less

在less文件可以引入其他文件
如果引入文件时less格式，后缀名可以省略

@import "aiqi";
.aiqi{
    width: 300px;
    height: 300px;
    background-color: red;
}

在scoped下穿透

/deep/ p {
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 15px;
        line-height: 1.5;
    }

变量
可以定义变量方便复用

@backgroundColor:greenyellow!important;
.aiqi{
    background-color: @backgroundColor;
}

混入
混合（Mixin）是一种将一组属性，在另外一个css样式里面调用即可。
如果作为被引入less文件中的混入则会失效

.border{
    border-radius: 50%;
    border: 10px solid red;
}
.aiqi{
    width: 300px;
    height: 300px;
    background-color: red;
    .border()
}

嵌套
less文件中相对子级标签的样式可以直接嵌套在相对父级标签样式中

.aiqi{
    width: 300px;
    height: 300px;
    background-color: red;
    .aiqiSon{
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .border()
}

运算

less中样式属性值可以进行一定的运算

.aiqi{
	//运算
    width: 3*100px;
    height: 300px;
    background-color: red;
    .aiqiSon{
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .border()
}

转义
假设解析样式为：样式属性：（“属性值”），此时需要在属性前面加上~做转义
~转义

@import "aiqi";
.border{
    // border-radius: 50%;
    border: 10px solid red;
}
@borderRadius:~"50%";
.aiqi{
    width: 3*100px;
    height: 300px;
    background-color: red;
    border-radius: @borderRadius;
    .aiqiSon{
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .border()
}

函数
less内置许多函数（less函数）
percentage函数可以将小数转化为百分比

@import "aiqi";
.border{
    // border-radius: 50%;
    border: 10px solid red;
}
.aiqi{
    width: 3*100px;
    height: 300px;
    background-color: red;
    border-radius:  percentage(0.5);
    .aiqiSon{
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .border()
}

作用域
less中也有作用域，（取近不取远）

@import "aiqi";
.border{
    // border-radius: 50%;
    border: 10px solid red;
}
.aiqi{
    @var:300px;
    width: 3*100px;
    height: 300px;
    background-color: red;
    border-radius:  percentage(0.5);
    .aiqiSon{
        @var:100px;
        width: @var;
        height: 100px;
        background-color: red;
    }
    //此时aiqiSon宽为100px
}

不常用的功能

映射

#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

命名空间和访问符
文档链接