Less语法-02-常用方式

1、使用Less进行像素/rem运算

Less文件：除法需要添加小括号
.container {
    width: 10 + 3rem;
    height: 10 - 3rem;
    inline-size: 10px * 2px;
    font-size: (10px / 5px);
}

对应的CSS文件：
.container {
  width: 13rem;
  height: 7rem;
  inline-size: 20px;
  font-size: 2px;
}

2、使用Less嵌套写法生成后代选择器

Less文件：：&表示当前选择器，通常配合伪类或伪元素使用
.container {
    .son {
        color: red;
    }
    &:hover {
        color: green;
    }
}

对应的CSS文件：
.container .son {
  color: red;
}
.container:hover {
  color: green;
}

3、使用Less变量设置属性值

Less文件：方便使用和修改
@colorAll: red;

.a {
    color: @colorAll;
}

.b {
    color: @colorAll;
}

.c {
    color: @colorAll;
}


对应的CSS文件：
.a {
  color: red;
}
.b {
  color: red;
}
.c {