动态CSS语言框架less

一、Less是什么

Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量，Mixin，嵌套等特性，使CSS更易维护和扩展。

二、环境搭建

1、安装node.js
检查是否安装成功：在“命令提示符” 下输入 node -v
2、安装less,在“命令提示符”（快捷键：win+R，输入cmd）下运行命令 npm install -g less
检查是否安装成功：在“命令提示符” 下输入 lessc -v
3、配置webstorm，点击 file > settings 弹出设置界面，在左侧导航找到 tool > file Watchers 点击 “+” 号按钮找到less文件选项点击添加。

4、配置less

Programs：C:\Program Files\nodejs\lessc.cmd（替换自己安装less的路径）

三、使用less

1、注释
// 模板注释，在less源文件使用，转换成CSS后删除（不能编译为CSS）
/* */ less语法可以编译为CSS中的注释
2、变量
将需要重复使用或经常修改的值定义为变量。语法：@变量名:变量值;

/* .less*/
@color: #f5f5f5;
div{
  background-color: @color;
}

/* .css */
div{
 background-color: #f5f5f5;
}

3、Mixin

.headerStyle(@radius: 5px) {
   border-radius: @radius;
}
// 定义的类应用到另个一个类中
#header {
  .headerStyle; /*或 .headerStyle() 或 .headerStyle(10px)*/
}

4、嵌套
用嵌套语法替代CSS中的子代选择器。

// .less
@width = 1024px;
.mydiv{
  width: @width;
  > .row {
    height: 100%;
    a{
      color: red;
      &:hover{
        color: white;
      }
    }
  }
   sapn{
    width: 100px;
    .hello {
      background-color: #fff;
    }
  }
}

/* .css */
.mydiv{
  width: 1024px;
}
.mydiv> .h1{
  height: 100%;
}
.mydiv> .row a {
  color: red;
}
.mydiv> .row a:hover {
  color: white;
}
.mydiv {
  width: 100px;
}
.mydiv sapn .hello {
  background-color: #fff;
}

5、Import
将样式放到多个文件中，最后通过@import 的方式合并

/*less*/
@import url('demo.less');
@width = 1024px;
.mydiv{
  width: @width;
  > .row {
    height: 100%;
    a{
      color: red;
      &:hover{
        color: white;
      }
    }
  }
   sapn{
    width: 100px;
    .hello {
      background-color: #fff;
    }
  }
}