在Intellij中使用Less

使用Intellij安装Less编译插件

参考教程：https://www.cnblogs.com/liaojie970/p/6653593.html
本人亲测可行。
Less实时编译效果如下图所示：

Less的相关语法

最近学习了css预编译语言less，现在在这里记录一下相关语法的使用。

变量

在Less中变量并不是和我们平时学习的编程语言中的变量一样，它是一个不可改变的常量。我们可以理解成js中的const变量。Less的变量通过”@”符号作为标记，代码如下：

@colorPrimary:#44B336;
div{
  background:@colorPrimary;
}

是不是有点像Android中的颜色配置？

嵌套

在编写css代码中，我们常常会对选择器做嵌套选择，像这样：

h1{}
h1 a{}
h1 a span{}

Less对上面的代码做了抽象，像这样：

h1{
  /*h1的css*/
  a{
  /*a的css*/
     span{
     /*span的样式*/
     }
  }
}

Exp：
html:

    <div class="less">
        我是less container
        <a href="#">
            我是container中的a标签
            <span>我是a中的spanspan>
        a>
    div>

less：

编译后：

显示结果：

Less的嵌套功能中还有一个“&”操作符，它代表着父选择器，这个运算符提供了两个很实用的功能。一是可以用来应用伪类，二是可以用来生成重复的类名。
应用伪类代码：

a{
 &:hover{

 }
}

生成重复类名：

.btn{
  &-ok{
  }
  &-warn{
  }
}

编译后如下：

.btn-ok{
}
.btn-warn{
}

作用域

Less中的变量存在作用域限制，这点与JS的变量作用域类似。查找变量的顺序是先在局部变量中查找是否拥有定义，如果没有则会向上一级查找，直到全局作用域。

混合

其实混合可以理解为JS中的函数，代码如下：（注意参数也是变量，所以需要用@符号标识）

//混合集
.borderRadius(@radius){
  border: 1px solid @color;
  border-radius:@radius;
}

.less{
  .borderRadius(5px);
}

约束和循环

Less的循环是通过递归实现的，主要关键字为”when”，用来做约束。

//循环
.loop(@count,@i:1) when(@i<@count){
  .test-@{i}{
    width:(@i*100%/@count);
  }
  .loop(@count,(@i+1));
}

.loop(4);

编译后：

.test-1 {
  width: 25%;
}
.test-2 {
  width: 50%;
}
.test-3 {
  width: 75%;
}

导入

原生的css中@import关键字实现导入功能存在两大弊端。首先，“@import”导入规则必须先于除了”@charset”外的其他css规则执行。其次，导入的文件需要等待引用其父文件下载解析才被执行。这样就丢失了css并行下载的能力，加大了资源加载的开销。
而Less中提供的导入方法是在编码阶段被引入的，在最终代码中会合并成单个css文件。除此之外，还提供了导入选项来更灵活地引入第三方文件。——iKcamp

以上。