前端利器之less入門

less 是什麼？

Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增長了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。
less，是方便咱們快速編寫CSS的工具，它加強了CSS代碼的擴展性和複用性。
Less 能夠運行在 Node 或瀏覽器端。

less能爲咱們作什麼？

下邊讓咱們來看一段咱們常常寫的代碼

/**
咱們常常寫瀏覽器的兼容，假設咱們寫icon
**/
nav a.home.active i {
    background: url('images/nav-home-on.png') no-repeat center;
    background-size: contain;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
}
nav a.home i {
    background: url('images/nav-home-off.png') no-repeat center;
    background-size: contain;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
}
nav a.topics.active i {
    background: url('images/nav-circle-on.png') no-repeat center;
    background-size: contain;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
}
nav a.topics i {
    background: url('images/nav-circle-off.png') no-repeat center;
    background-size: contain;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
}

• 一遍一遍寫一大段一大段同樣的代碼，有木有很乏味，若是要換一個contain爲cover呢？

改瘋了有木有

讓咱們看看less會怎麼作

//至關於新建一個函數 Mixins（混入）
.border-radius(@radius:10px){
border-radius:@radius;
 -webkit-border-radius:@radius;
 -moz-border-radius:@radius;
  -o-border-radius:@radius;
}
.background-size(@type){
  background-size: @type;
  -webkit-background-size: @type;
  -moz-background-size: @type;
  -o-background-size: @type;
}

//用法
.orderList{
    background-color:#E36264;
    width:100px;
    height:200px;
    .border-radius(15px);//利用函數能夠省去不少的重複兼容代碼
  .border-radius;//利用函數能夠省去不少的重複兼容代碼
  .background-size(contain);
}


//這麼寫整個世界都美好了
nav a.topics i {
    background: url('images/nav-circle-off.png') no-repeat center;
    .background-size(contain);
}

• 說明 像 JavaScript 中 arguments同樣，Mixins 也有這樣一個變量：@arguments。

@arguments 在 Mixins 中具是一個很特別的參數，當 Mixins 引用這個參數時，
該參數表示全部的變量，不少狀況下，這個參數能夠省去你不少代碼。

.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
 -moz-box-shadow: @arguments;
 -webkit-box-shadow: @arguments;
 box-shadow: @arguments;
 }
 #header {
 .boxShadow(2px,2px,3px,#f36);
 }

變量寫法

less代碼

/**
  你們都遇到過這樣的問題
  咱們作換膚功能的時候都有一個主色調，
  咱們寫完了代碼設計師說我想更換個主色調，
  這時候你就會發現，我有100個地方用了主色調，
  而後只能苦逼的改100次
  太難受了！！有木有？？有一個變量直接提出來多好？

**/
//定義一個變量
@colorFff:#fff;

//用法
footer{
  background-color: @colorFff
}
nav{
  color: @colorFff;
}
header{
  border-right:1px solid  @colorFff;
}

最終生成的代碼

footer {
  background-color: #ffffff;
}
nav {
  color: #ffffff;
}
header {
  border-right: 1px solid #ffffff;
}

代碼片斷寫法

less代碼

//又是重複代碼，less告訴你能夠這麼寫 有沒有以爲本身很會過日子，原來能夠這麼省

//定義一個公共樣式
.icon20{
  width: 20px;
  height: 20px;
  display: inline-block;
}

//用起來
.icon-my{
  .icon20;
  background: url('images/nav-my-off.png') no-repeat center;
  .background-size(contain);
}
.icon-car{
  .icon20;
  background: url('images/nav-car-off.png') no-repeat center;
  .background-size(contain);
}

對應生成的css
又是重複代碼，less告訴你能夠這麼寫 有沒有以爲本身很會過日子，原來能夠這麼省

.icon-my{
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url('images/nav-my-off.png') no-repeat center;
}

.icon-car{
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url('images/nav-car-off.png') no-repeat center;
}

有時候咱們須要引用一段less文件

寫法

/* LESS Document */
//引入一個公共的less文件
@import "base.less";

嵌套寫法

//這樣的css代碼你該不陌生
.shopcar-item {
    font-size: 1.5rem;
    background-color: #ffffff;
    position: relative;
    padding: 10px 10px 10px 70px;
    border-bottom: 1px solid #ededed;
}
.shopcar-item img {
    width: 100%;
}
//我要選img必須加上前邊的那個，好吧 這樣還能夠接受，那麼這樣呢？
.shopcar-item .item-con .add-btn,
.shopcar-item .item-con .mul-btn {
    display: inline-block;
    padding: 5px 10px;
    background-color: #ff4354;
    color: #ffffff;
    border-radius: 5px;
    margin: 0 5px;
}

咱們來看看less怎麼寫

//看看 嵌套關係清晰明瞭  告別冗長的選擇器
.shopcar-item {
    font-size: 1.5rem;
    background-color: #ffffff;
    position: relative;
    padding: 10px 10px 10px 70px;
    border-bottom: 1px solid #ededed;

    img {
        width: 100%;
    }

    .item-con{
      position: relative;

      .add-btn,.mul-btn{
          display: inline-block;
          padding: 5px 10px;
          background-color: #ff4354;
          color: #ffffff;
          border-radius: 5px;
          margin: 0 5px;
      }
    }
}

而且寫法

用less以前咱們這麼寫

.nav {
  background-color: #ededed;
}
.nav.focus {
  background-color: #cccccc;
}
.nav:after {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
}

less告訴你，咱們能夠這麼寫，一個元素的各類狀態一目瞭然

.nav{
  background-color: #ededed;

  &.focus{
    background-color: #cccccc;
  }

  &:after{
    content: "";
    display: block;
    width: 100px;
    height: 100px;
  }

}

運算及函數

//運算及函數
@init: #111111;
@transition: @init*2;
.switchColor {
 color: @transition;
}

最終生成的樣式

.switchColor {
  color: #222222;
}

• 上面的例子中使用 LESS 的 operation 是 特性，

其實簡單的講，就是對數值型的 value（數字、顏色、變量等）
進行加減乘除四則運算

咱們作響應式佈局適配的時候常常要計算rem，

用less告別手動計算

.px2rem(@name, @px){
    @{name}: @px / 75 * 1rem;
}

.orderList{
  .px2rem(font-size,32);
    background-color:#E36264;
    width:100px;
    height:200px;
}


//最終生成的css
.orderList {
  font-size: 0.42666667rem;
  background-color: #E36264;
  width: 100px;
  height: 200px;
}

less這麼好用怎麼用？？

• 在瀏覽器端用

<link rel="stylesheet/less" type="text/css" href="index.less" />
<script type="text/javascript" src="js/less.2.5.3.js"></script>
//注：
一、順序不能錯
二、設置屬性 rel="stylesheet/less" 
三、代碼須要服務器環境運行

• 編譯以後引用css文件

我推薦使用Koala.exe 下載地址
多語言支持 支持Less、Sass、CoffeeScript 和 Compass Framework。
實時編譯 監聽文件，當文件改變時自動執行編譯，這一切都在後臺運行，無需人工操做。
編譯選項 能夠設置各個語言的編譯選項。
項目配置 支持爲項目建立一個全局配置，爲文件設置統一編譯選項。
錯誤提示 在編譯時若是遇到語法的錯誤，koala將在右下角彈出錯誤信息，方便開發者定位代碼錯誤位置。
跨平臺 Windows、Linux、Mac都能完美運行。

• 設置語言

• 添加項目

• 編譯less文件

手動運行 【執行編譯】或者點擊文件勾選自動編譯，它會自動檢測文件更改並從新編譯

其餘用法參見 LESS官網