前言：使用less預(yù)編譯器來(lái)處理css語(yǔ)法。
Github：https://github.com/Ewall1106/mall

什么是less？

• less是什么自然不用多言，乃一個(gè)css預(yù)編譯器，可以擴(kuò)展css語(yǔ)言，添加功能如如允許變量(variables)、混合(mixins)、函數(shù)(functions) 和許多其他的技術(shù)，讓你的css更具維護(hù)性，主題性，擴(kuò)展性。
• less官網(wǎng)：http://lesscss.org/usage/

項(xiàng)目中使用less

1. less的安裝

• 打開(kāi)命名行，安裝less和less-loader就可以了：

$ cnpm install less less-loader --save-dev

install less

2. 使用less

• 怎么使用，大概就這樣，不需要引入什么的，直接用，定義下lang屬性就行：

<style lang="less" scoped>
</style>

• 我們新建一個(gè)home.vue頁(yè)面：
  
  home.vue

less與公共變量

一般在我們項(xiàng)目中，需要把所有統(tǒng)一的色調(diào)、樣式提出出來(lái)作為公共變量使用，比如這里，假設(shè)紅色是我們項(xiàng)目的基調(diào)色，很多頁(yè)面都要用到，所以我們定義一下這個(gè)背景色。

• 我們?cè)?code>styles下面新建一個(gè)variables.less文件，用于存放less公共變量，然后定義一下全局背景色

variables

• 項(xiàng)目中引入，這里需要踩的坑我都注釋了，看注釋就行。

項(xiàng)目中引入

• ok，我們?nèi)g覽器中看看效果，那么，以后再項(xiàng)目中就可以把所有的頁(yè)面公共的變量抽離出來(lái)使用了。

瀏覽器