vue2.0中使用less

第一部分：Less语言

与上一篇《vue2.0中使用sass》介绍的Sass语言一样，Less语言也是一种CSS的扩展语言，增加了变量、混合（minin）、函数等功能，让CSS更易维护、方便制作主题。

Less既可以在客户端（IE6+、Webkit、Firefox），也可以借助Node.js或Rhino在服务器端运行，其样式扩展名为.less。

Less完全兼容CSS语法，连新增的特性也是使用CSS语法。

在Less中，你可以这样写CSS：

@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%) }

}

在引入less.js前先要把你的样式文件引入：

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

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

注意：

1、注意：引入时rel 属性值为 “stylesheet/less”

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

另外，你也可以在Vue中使用Less，下面就来进行示范：

第二部分、VUE2.0中集成Less

Step1：在项目中安装Less

 $ npm install less less-loader --save
 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1. (node_modules\fsevents):

 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

 + less-loader@4.0.

 + less@2.7.

 added  packages, removed  package and updated  packages in .996s

Step2：配置Less解析器

在webpack.base.conf.js中，modules结节下的rules节点中添加Less的解析器，如下所示：

 module: {

     rules: [

        {

         test: /\.scss$/,

         loaders: ["style", "css", "sass","style-loader!css-loader!less-loader"]

       },

Step3：尝试使用Less语法

以下是使用传统的CSS样式的页面：

vue2.0中使用less

样式如下：

<style>

  .body {

    color:red;

    padding-top:30px;

  }

</style>

我们修改样式为：

<style lang="less">

  @body-color: blue;

  .pad{

    padding-top:30px;

  }

  .body {

    color:@body-color;

    .pad;

  }

</style>

样式依然生效。

说明：这里只是最简单的Less导入，深入的如果有机会，再给大家分享。

参考文档

http://lesscss.cn/

http://less.bootcss.com/#

http://www.bootcss.com/p/lesscss/

https://www.cnblogs.com/lin-dong/p/6711224.html

https://www.zhihu.com/question/50135522

秒客网

vue2.0中使用less

相关文章