一、Less介绍

​ Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。less可以看出css的超集，

​ 可以运行在 Node（服务器）、浏览器和 Rhino 平台上。

Sass:

less使用 .less 作为文件后缀。通过第三方工具，可以一键或者实时编译成对应的css文件。

二、使用Less

​Less可以用到服务器端，也可以用作浏览器端。我们今天只研究如何在浏览器端使用。

有两种办法使用Less：

2.1 在HTML中直接使用 .less文件

1. 书写扩展名为.less的less文件，比如：

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  box-shadow:         @style @c;
  -webkit-box-shadow: @style @c;
  -moz-box-shadow:    @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box { 
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

1. 在html中引入less文件.注意：ref属性必须是 stylesheet/less href的值就是指的less文件。

   <link rel="stylesheet/less" type="text/css" href="styles.less">
   

2. 引入下面的js文件，负责把 less文件编译成css文件。(less.js需要预先下载完成。)

   <script src="less.js" type="text/javascript"></script>
   

   也可以使用cdn加速

   <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.min.js"></script>
   

注意： 一定要先引入less文件，再引入script标签。

缺点：由于less的编译是在前台通过css实时编译的，所以会影响前端页面的执行效率，在实际的生产环境中一般不建议使用，而是使用下面的先编程成css文件，然后在页面中仍然引用css文件。

2.2 提前把.less编译成 .css文件，然后再使用 css文件

实际开发中, 推荐使用下面的方式:

1. 下载less cli工具(需要先安装nodejs)

   npm install -g less
   

2. 在webstorm中设置 file watcher，则webstorm会自动把less编译成css