Less简介以及Less的几种使用方式

一、Less简介

        官方网站：http://lesscss.cn/ 

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

        Less可以运行在Node或浏览器端。也可运行在桌面客户端。

二、在Vue中使用Less

1、安装依赖

处理普通的.css 文件，        需要安装css-loader,style-loader

      　　　　　.less 文件， 需要安装 less-loader

   //.sass 文件，需安装  sass-loader

npminstall  css-loader style-loader  --save-dev

npminstall  less-loader --save-dev

//npminstall  scss-loader --save-dev

2、安装好相关loader后，我们需要在webpack.base.conf.js或者webpack.config.js 中加入相关配置代码，如下

  {undefined

        test: /.(woff2?|eot|ttf|otf)(?.*)?$/,

        loader: 'url-loader',

        options: {undefined

          limit: 10000,

          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')

        }

      },

      {

          test:/.less$/,

          use:[

           "style-loader","css-loader","less-loader"

          ]

      }

或者

      {

               test: /.less$/,

                loader:"style!css!less"

      }

3、在style中加入lang="less"即可使用less

@nice-blue:#5b83ad;

.page{undefined

width: 200px;

height: 200px;

display: flex;

background: @nice-blue;

}

三、在客户端使用

引入你的 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”:

然后点击页面顶部download按钮下载 less.js, 在 中引入:

注意你的less样式文件一定要在引入less.js前先引入。

备注：请在服务器环境下使用！本地直接打开可能会报错！

监视模式

监视模式是客户端的一个功能，这个功能允许你当你改变样式的时候，客户端将自动刷新。

要使用它，只要在URL后面加上'#!watch'，然后刷新页面就可以了。另外，你也可以通过在终端运行less.watch()来启动监视模式。

四、在服务器端使用

安装

在服务器端安装 LESS 的最简单方式就是通过 npm(node 的包管理器), 像这样:

$ npm install less

如果你想下载最新稳定版本的 LESS，可以尝试像下面这样操作:

$ npm install less@latest

使用

只要安装了 LESS，就可以在Node中像这样调用编译器:

var less = require('less');

less.render('.class { width: 1 + 1 }', function (e, css) {

    console.log(css);

});

上面会输出

.class {

  width: 2;

}

你也可以手动调用解析器和编译器:

var parser = new(less.Parser);

parser.parse('.class { width: 1 + 1 }', function (err, tree) {

    if (err) { return console.error(err) }

    console.log(tree.toCSS());

});

配置

你可以向解析器传递参数:

var parser = new(less.Parser)({

    paths: ['.', './lib'], // Specify search paths for @import directives

    filename: 'style.less' // Specify a filename, for better error messages

});

parser.parse('.class { width: 1 + 1 }', function (e, tree) {

    tree.toCSS({ compress: true }); // Minify CSS output

});

在命令行下使用

你可以在终端调用 LESS 解析器:

$ lessc styles.less

上面的命令会将编译后的 CSS 传递给 stdout, 你可以将它保存到一个文件中:

$ lessc styles.less > styles.css

如何你想将编译后的 CSS 压缩掉，那么加一个 -x 参数就可以了.