Less介绍和使用

• 介绍：less是一种CSS预处理器，官网
• 使用：
  1，Koala自动监视编译 / Webpack / FIS
  2，less.min.js脚本转换
  3，使用 编辑器插件自动转换

Less语法和功能

变量

// 定义变量
@header-height:60px;
@header-bottom-bgcolor:#000;

// 使用变量
.header{
    height:@header-height;
    background:@header-bottom-bgcolor;
}

普通混合

// 相当于定义函数
.fl{
    float: left;
}
// 注意：以这种方式定义的话，转换后的CSS文件中不会存在.fr
.fr(){
    float: right;
}
.nav-block-margin(){
    height: 36px;
    margin: 12px 25px;
}

// 相当于使用函数
.logo{
    .fl();
    .fr();
    .nav-block-margin();
}

参数混合

// 相当于定义带参数的函数
.border-radius(@radius: 50%){
    -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

// 相当于使用带参数的函数
.profile__ava{
    width: 36px;
    height: 36px;
    margin: 12px;
    .border-radius(50px);
}

参数混合逻辑控制

/* 背景色定义 */
#bg-color(@name) when(@name=dark) {
    background-color: #2b333b;
}
#bg-color(@name) when(@name=light){
    background-color: #363c41;
}
/* 字体大小定义 */
#ft-size(@name) when(@name=small){
    font-size: 12px;
}
#ft-size(@name) when(@name=medium){
    font-size: 14px;
}

// 使用背景色
.nav__item:hover{
    #bg-color(light)
}
// 使用字体大小
.nav__item{
    #ft-size(medium);
}

嵌套

// BEM选择器写法
.nav{
    &__item{                  // .nav__item
        display: block;
        float: left;
        line-height: 60px;
        padding: 0 25px;
        text-decoration: none;
        #color(white);
        #ft-size(medium);
        &:hover{               // .nav__item:hover
            #bg-color(light)
        }
        &_icon_new{            // .nav__item_icon_new
            #bg-color(light)
        }

    }
}

文件引用

// 使用场景1
// 比如我们会把一些全局变量放在variable.less文件中，然后通过@import引入
@import "variable.less";  // 引号里面是相对路径

// 使用场景2
// 比如在初始化的时候，我们会在init.less文件中把一些less文件都引入进来

@import "init1.less";
@import "init2.less";