LESS基本用法

本文主要介绍less的基本用法和一些简单的小技巧。

一、编译.less文件以.css使用命令行

具体请参照LESS官网链接

二、LESS基本用法

2.1 变量的设置与使用

设置变量，封装样式：

@main-color: #5B83AD;

使用变量：

body{
    background: @bg-color;
}

渲染结果如下：

body {
  background: #FFFFFF;
}

2.2混合使用

设置混合使用的.class样式，封装样式：

.padding{
    padding: 0.5rem 0.625rem;
}

调用所需的.class样式

.nav-wrapper{
    .padding;//使用less混合功能，仅需在所需要的.class类(.nav-wr