Less环境搭建与应用

介绍

官网是这么说的：Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。

1、环境安装

使用命令cnpm install -g less安装环境，g表示全局安装

2、使用命令编译文件

在项目中新建一个less01.less文件，并编写一端样式代码

@gwidth:100px;
@gheight:100px;

.box{
  width:@gwidth;
  height: @gheight;
  background:slateblue;
}

在当前项目路径下，执行命令lessc less01.less less01.css【命令格式：lessc file.less file.css】，则会生成一个less01.css文件，其编译后样式代码如下

.box {
  width: 100px;
  height: 100px;
  background: slateblue;
}

当然，实际开发过程中，如果使用命令方式编译效率比较慢，一般使用开发工具、Koala软件或js脚本方式自动编译，这里先只演示编译效果。

3、常用语法

3.1、变量声明

使用@符号声明变量

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

3.2、混合

类似于一个函数方式调用，这样可以复用样式代码，编译前

.size(@width:50px;@height:100px){
  width: @width;
  height: @height;
}
.box{
  .size()
}

编译后

.box {
  width: 50px;
  height: 100px;
}

3.3、嵌套

编译前

.header{
    width: 100px;
    .nav{
      height: 100px;
      width: 100px;
      ul{
        li{
          font-size: 30px;
          a{
            color: red;
            &:hover{
              color: green;
            }
          }
        }
      }
    }
  }

编译后

.header {
  width: 100px;
}
.header .nav {
  height: 100px;
  width: 100px;
}
.header .nav ul li {
  font-size: 30px;
}
.header .nav ul li a {
  color: red;
}
.header .nav ul li a:hover {
  color: green;
}

3.4、计算

支持加减乘除，编译前

.box{
  width:200px + 100px;
  height: 100px - 50px;
  color: #222 * 2;
  background: #444 / 2;
}

编译后

.box {
  width: 300px;
  height: 50px;
  color: #444444;
  background: #222222;
}

3.5、函数

如floor()函数可向下取整，编译前

.box{
  flex:floor(10.5); 
}

编译后

.box {
  flex: 10;
}

less中内置了很多函数，方便样式代码编写，具体可查看官网

3.6、判断

判断需要使用when关键字，编译前

.num(@value) when(@value >50){
  color: blue;
}
.num(@value) when(@value <= 50){
  color: yellow;
}

.box{
  .num(50);
  .num(51);
}

编译后

.box {
  color: yellow;
  color: blue;
}

3.7、继承

继承需要使用extend关键字，编译前

.box{
  width: 100px;
  height: 100px;
}
.boxExtend{
  &:extend(.box);
  color: green;
}

编译后

.box,
.boxExtend {
  width: 100px;
  height: 100px;
}
.boxExtend {
  color: green;
}