Less 基本使用

说明

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展，Less 是基于 JavaScript 的，使用 Less 编写样式最简单的方式可以在 页面中引入 less.min.js 即可，样式会在客户端处理

不同于 Sass, Sass 是一种动态样式语言，基于 ruby 运行，样式必须在到达浏览器前处理完成

1. 声明及使用变量

@br: 1px solid red;

.box{
    border: @br;
}

// 变量作为类名，或者作为属性值得一部分使用 变量值会代替 @{变量名} 得部分
@path: image;
@property: color;

.@{path}{
    width: %;
    height: %;
}

#box{
    background-image: url("/@{path}/icon.png");
    @{property}: red;

}
           

2. 生明及使用混合 Mixins

// 会输出到最终编译后的 css 中的 Mixin，与一般 class 写法一致
.border-red {
    border: px solid red;
}

#box{
    .border-red;
}

// 不会存放到输出的css 中的 Mixin, 要加括号。可以在其中写参数
.flexv (@jc: center, @ai: center) {
  display: flex;
  flex-direction: column;
  justify-content: @jc;
  align-items: @ai;
}

#box{
    .flexv() !important; // 得到的所有 mixin 属性值都会加上 !important
}
           

3. 使用继承 extend

继承同一个类的，共同继承的部分会被提取出共有样式

.fv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  p{
    color: red;
  }
}

// extend(.fv) 只继承 .fv 的样式 .fv p 的样式不被继承 
#box {
    &:extend(.fv);
    width: %;
}

// extend(.fv all) .fv p 的样式也被继承
#box {
    &:extend(.fv all);
    width: %;   
}

#box:extend(.fv) {
    width: %; // 与上边结果一致
};

// 输出的共有样式被提取
           

4. 嵌套规则

#box{
    width: %;
    p {
        width: %;
        &:last-child{
            width: %;
        };
    }
}
           

5. 可加减乘除运算，包括 数值、颜色、变量

6. Scope 作用域，变量就近获取

@var: red;
#box{
    color: @var; // white
    @var: white;
}
           

7. 通过 @import 引用外部样式文件

@import "_common"; // _common.less
@import "_common.css"; // CSS 文件

@import (reference) '_common'; // 引入的文件不输出到最终的 css 中
// ...