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」

      二、你的less樣式文件必定要在引入less.js前先引入。           

      另外，你也能夠在Vue中使用Less，下面就來進行示範：

      

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

      Step1：在項目中安裝Less      

1 $ npm install less less-loader --save 2 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents): 3 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) 4 
5 + less-loader@4.0.5
6 + less@2.7.3
7 added 115 packages, removed 1 package and updated 2 packages in 46.996s

 

      Step2：配置Less解析器

      在webpack.base.conf.js中，modules結節下的rules節點中添加Less的解析器，以下所示：       

1 module: { 2  rules: [ 3  { 4         test: /\.scss$/, 5         loaders: ["style", "css", "sass","style-loader!css-loader!less-loader"] 6       },

      Step3：嘗試使用Less語法

      如下是使用傳統的CSS樣式的頁面：

      

 

      樣式以下：      

<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