less的基本了解和使用

前言

今天了解了一下less，主要是因为昨天学习taro的时候，在demo中我发现正常的书写px像素单位会被转成rem，并且这个计算不是很准确，例如375的屏幕宽度，1rem=23.4375px，这个换算导致在真正的页面书写使用px做单位的时候计算特别麻烦，使用rem计算同样麻烦。我就想统一将单位进行转化，通过less的语法支持算术运算特性，将两个单位进行对等转化，所以今天除了工作开发至于，看了看less相关的东西。以下是我在taro样式文件中做的px和rem对等转化，以375宽度的屏幕为例子：

// 在375宽度屏幕下，1re它等于23.4375px，然后咱们在less中可以这样做单位转换
// index.less文件中声明一个转换系数,这个系数就是将rem转换成用1px来表示了，@rem2px这个系数就相当于1px
@rem2px: 1rem / 23.4375;
// 咱们可以这么使用这个系数，比如页面中一个类名为demo的元素高度是20px
.demo {
    height: @rem2px * 20;
}

less的基本用法

生命变量

// @Variable: [value]
@H: 20px;
.a {
    height: @H; // a类高度20px
}

混入mixins

// 简易混入模式
.mixin {
    height: @H;
    width: 100px;
}
.b {
    .mixin()
}
// 得到结果
.b {
    height: 20px;
    width: 100px;
}
// 带参数混入模式,可以给定默认值也可以不给
.paramsMixin(@radius: 5px) {
    border-radius: @radius;
}
// 使用如下
.use-mixin {
    .paramsMixin()
}
=>
.use-mixin {
    border-radius: 5px;
}
// OR
.use-mixin {
    .paramsMixin(8px)
}
=> 
.use-mixin {
     border-radius: 8px;
}
// 带!important的混入
.imporMixin {
    height: 20px;
    width: 20px;
}
// 使用如下
.use-imporMixin{
    .imporMixin() !important;
}
=>
.use-imporMixin{
    height: 20px !important;
    width: 20px !important;
}

less的作用域

// 在index.less生命变量
@var: red;
.a {
    @var: green;
    .b {
        color: @var;   
    }
}
=> 
.a .b{
    color: green;
}
// 或者
.a {
    .b {
        color: @var;    
    }
    @var: green;
}
=>
.a .b{
    color: green;
}

less中的方法，less中的函数是内定的函数，并不能实现自定义函数，所以这里就不总结了，就用到的再去翻看吧,懒得去写了。