less学习

Posted 2020-10-29

变量：
a. 简单变量：
a-1. 定义：

@color:red;

a-2. 使用：

body{
color:@color;
}

b. 复杂变量：
b-1. 定义：

@mix:{
color:red;
background:blue;
};  // 此处末尾有分号

b-2. 使用：

body{
@mix();
}

条件表达式：
a. 用在根目录：

@bool:true;
& when(@bool=true){
body{
    color:red;
}
}
& when(@bool=false){
body{
    color:yellow;
}
}

b. 用在类中：

.class(@a) when (@a>5px){
width:@a;
}
body{
.class(6px);
}

c. 常见判断函数：

iscolor  // 是否是颜色值
isnumber  // 是否是数值
isstring  // 是否是字符串
iskeyword  // 是否是关键词
isurl  // 是否是url地址
--
@isnumber下：
ispixel  // 是否是像素
ispercentage  // 是否是百分比
isem  // 是否是em
isunit  // 是否是单元

递归调用：
a. 代码：

.class(@num) when (@num > 0) {
.class((@num - 1));
width: (10px * @num);
}
div {
.class(5);
}

b. 输出：

div {
width: 10px;
width: 20px;
width: 30px;
width: 40px;
width: 50px;
}

面向对象：
a. 封装：
a-1. 代码：

.class(){
@color:red;  // 定义内部变量
color:@color;  // 使用变量
}
body{
.class();  // 使用类
}

a-2. 输出：

body {
color: red;
}

b. 继承：
b-1. 代码：

.class(){
@color:red;
color:@color;
}
body{
.class;
background: blue;
}

b-2. 输出：

body {
color: red;
background: blue;
}

c. 多态：
c-1. 使用一个参数：
c-1-1. 代码：

.class(@color){
color:@color;
}
.class(@color;@background){
color:@color;
background: @background;
}
body{
.class(red);
}

c-1-2. 输出：

body {
color: red;
}

c-2. 使用两个参数：
c-2-1. 代码：

.class(@color){
color:@color;
}
.class(@color;@background){
color:@color;
background: @background;
}
body{
.class(red,blue);
}

c-2-2. 输出：

body {
color: red;
background: blue;
}

c-3. 默认参数：
c-3-1. 代码：

.class(@color:red){
color:@color;
}
body{
.class();
}

c-3-2. 输出：

body {
color: red;
}

d. 命名空间：
d-1. 代码：

.namespace(){
.class(){
    color:red;
    background: blue;
}
}
body{
.namespace();
.class();
}

d-2. 输出：

body {
color: red;
background: blue;
}

插件：
a. test.js：

module.exports = {
install: function(less, pluginManager, functions) {
    functions.add(‘pi‘, function(val) {
        return less.dimension(Math.PI);
    });
}
};

b. test.less：

@plugin "test.js";
body{
width:pi() * 2;
}

c. 输出：

body {
width: 6.28318531;
}