十分钟带你学会Less预编译器

CSS预编译器 Less

我们在书写css样式的时候经常会被权重给恶心到要吐血。所以预编译器应运而生。预编译器它就是使用一种更加优雅的方式来书写css代码，通过编译器，将其转换为可以被浏览器识别的传统css代码

目前，最流行的预编译器有LESS和SASS，由于它们两者特别相似，我们在这里介绍Less

less官网：http://lesscss.org/
sass官网：https://sass-lang.com/

LESS的安装和使用

从我们前面介绍的就可以知道，要使用Less，必须要安装Less编译器

通过npm下载安装

npm i -D less

安装好了less之后，它提供了一个CLI工具lessc，通过该工具即可完成编译lessc Less文件 编译后的文件

lessc index.less index.css

新建一个index.less文件，编写内容如下：

@color: red;
.redcolor {
    color: @color;
}

运行命令：

npx lessc index.less index.css

可以看到编译之后的代码：

.redcolor {
  color: red;
}

LESS的基本使用

• 变量：变量是通过@符号来表示的。

@color:#f40;
@width:100px;
@height:@width+10px;
.box{
    color:@color;
    width:@width;
    height:@height
}
//会被编译为:
.box{
    color:#f40;
    width:100px;
    height:110px;
}

• 混合：类似封装一个方法，每次调用的时候，相当于使用这些属性

.border { //混合方法
  border: 1px solid red;
}
.box1{
  color: #000;
  .bordered();
}
.box2{
  color: #f40;
  .bordered();
}
//会被编译为:
.box1{
  color: #000;
  border: 1px solid red;
}
.box2{
  color: #f40;
  border: 1px solid red;
}

• 嵌套：less语法中最nice的功能。一看代码就明白。&符号表示当前选择器的父级

.box{
  color: #000;
  .content{
    font-size: 14px;
    color: red;
    .title{
      font-size: 20px;
      font-weight: bolder;
      &:hover{
        color: blue;
      }
    }
  }
}
//会被编译为:
.box {
  color: #000;
}
.box .content {
  font-size: 14px;
  color: red;
}
.box .content .title {
  font-size: 20px;
  font-weight: bolder;
}
.box .content .title:hover {
  color: blue;
}

• 运算：算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。

@width:100px;
@height:@width * 2 + 10 //210px;
@color:#224488;
@color2:@color/ 2 //#112244

• 函数：可以传递参数。Less 内置了多种函数用于转换颜色、处理字符串、算术运算等

.center(@type:absolute){
  position: @type;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.box{
  .center(relative)
}
//会被编译为:
.box {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Less内置函数：更多内置函数，查看官方文档。简单举例：

//if:如果2大于1,则显示0,否则3px.和三目运算符有些类似
//iscolor:传入一个值,判断是否是颜色。
@some: foo;
div {
    margin: if((2 > 1), 0, 3px);
    color:  if((iscolor(@some)), @some, black);
}
//会被编译为:
div {
  margin: 0;
  color: black;
}

• 作用域：和js一样，Less也有作用域

@color: red;
.box {
  @color: white;
  .content {
    color: @color; // white
  }
}
//会被编译为:
.box .content {
  color: white;
}

• 注释：块注释会被保留，因为和css注释相同，行注释会直接抹去

/* 
 * 块注释
 */
 @color: red;

 // 行注释
 @color: white;
 .box{
   color: @color;
 }

//会被编译为------------------------
/* 
 * 块注释
 */
.box {
  color: white;
}

• 导入：可以用@import来导入外部的less样式。比如导入我们写的基础样式

base.less文件

@color:red;

index.less文件

@import "./base.less";
 .box{
   color: @color;
 }

最后会被编译为：

.box {
  color: red;
}

看到这里，已经足够我们应对日常开发中的less语法，如果你想更深度的学习。去官网看看吧