less 語法特性翻譯稿 - 特性快速預覽部分

原文地址
http://lesscss.cn/features/

概述

做爲CSS的一種擴展語法，Less不只僅向後兼容CSS，新的特性也是基於CSS現有語法。這使得學習Less變得容易，若是你有所懷疑，那能夠回到相對簡陋的CCS。

變量Variables

這裏有些一眼就能看懂的例子：

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

輸出

#header {
  color: #6c94be;
}

當心，變量其實是「常量」，他們只能被定義一次。

混入器 Mixins

混入是一種把打包好的一些屬性從一個rule-set中包含到另一個rule-set。咱們有下面一個Class

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

咱們但願這些屬性也能夠插入到其餘的rule-set中。簡單，咱們只須要把它的名字丟到咱們想要這些屬性的地方就好了。就像下面這樣。

#menu a {
  color: #111;
  .bordered;
}

.post a {
  color: red;
  .bordered;
}

輸出

#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

全部.bordered 這個類的屬性都會出現#menu a 和 .post a 中。（你也能夠用#ids當作混入器。）後面還有關於混入器更加詳盡的用法解析，這裏只是簡單介紹。

規則嵌套 Nested Rules

Less 容許你用嵌套的方式代替逗號，or in combination with cascading。咱們有下面的一些CSS。

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

在Less中你能夠這樣寫

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

這樣的代碼更加的簡潔，而且能夠暗示你的HTML代碼結構。
你也能夠綁定僞類和混入器來使用這個特性。下面是一個經典的clearfix hack，使用一個混入器來實現。（& 符號將會被當前選擇器的父選擇器名字替代，好比這裏是.classfix）

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

輸出

.clearfix {
  display: block;
  zoom: 1;
}
.clearfix:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}

嵌套指令和冒泡 Nested Directives and Bubbling

一些CSS指令像media 或者 keyframe 也能夠像選擇器同樣被摺疊。指令將被放在最頂端而其餘在同一個rule-set的元素排序方式按照以前的順序不變。這種行爲叫作冒泡。

.screen-color {
  @media screen {
    color: green;
    @media (min-width: 768px) {
      color: red;
    }
  }
  @media tv {
    color: black;
  }
}

輸出

@media screen {
  .screen-color {
    color: green;
  }
}
@media screen and (min-width: 768px) {
  .screen-color {
    color: red;
  }
}
@media tv {
  .screen-color {
    color: black;
  }
}

其餘一些沒有條件的指令，好比font-face，keyframe，也會向上冒泡。可是他們的內容不會改變。

#a {
  color: blue;
  @font-face {
    src: made-up-url;
  }
  padding: 2 2 2 2;
}

輸出：

#a {
  color: blue;
}
@font-face {
  src: made-up-url;
}
#a {
  padding: 2 2 2 2;
}

操做符號 Operations

算數操做符 +, -, *, /，能夠操做任何數字、顏色或者值。若是有可能，數學操做符能夠將單位帶入算式而且在加減或比較他們以前轉換他們。結果的單位採用算式中從左到右最明確的單位的第一個。若是轉換沒法進行或者沒有意義，單位將被忽略。沒法轉換的單位好比 px 和 cm，rad和%。

// numbers are converted into the same units
@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 2 - 3cm - 5mm; // result is 1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // result is 4px

// example with variables
@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%

乘除法不轉換數字。在多數狀況下這是沒有意義的 - 一個長度乘以另外一個長度將獲得一個面積可是CSS並不支持設定一個面積。Less會基於數字自己去操做這些方程而且給結果一個明確的單位。

@base: 2cm * 3mm; // result is 6cm

顏色將被切割成紅，綠，藍和透明四個色值。運算操做將被分別用於每一個色值中，好比用戶將2個顏色相加，綠色的色值等於兩個輸入顏色的綠色色值之和。若是用戶將一個數字乘上顏色，每一個色值都會被乘以這個數字。

注意：基於alpha的數學運算並無被定義。由於基於顏色的數學運算並無一個標準的定義。不要寄指望於未來的某個版本可能改變這個問題。

一個基於顏色的運算常常會返回一個非法的顏色。若是某個顏色的色值大於FF或者小於00，顏色值會被設置到FF或者00。一樣若是alpha值大於1或者小於0，也會被設置到1或者0。

@color: #224488 / 2; //results in #112244
background-color: #112244 + #111; // result is #223355

逃逸 Escaping

逃逸容許你使用任何的字符串做爲屬性和值。任何在~"一些字符" 或者 ~'一些字符' 這樣的結構裏面的「一些字符」將不會被原本來本的用在樣式上，除了變量。

.weird-element {
  content: ~"^//* some horrible but needed css hack";
}

輸出（一些特殊字符被完整保留，雙斜線也沒有被當作註釋）

.weird-element {
  content: ^//* some horrible but needed css hack;
}

函數 Functions

http://less.bootcss.com/functions/ 【函數文檔】
Less提供了各類各樣的函數，好比修改顏色，字符串操做或者數學運算。他們在函數相關的文檔中有詳細介紹。

他們用起來很是簡單。下面的例子使用percentage函數將0.5轉換爲50%，將base顏色的飽和度提升了5%，而後將一個明亮度提升25，旋轉8度（ spun by 8 degrees 調整色相）的顏色設置到了背景上。

命名空間和接收器 Namespaces and Accessors

（不要和CSS中的@namespace 或者 namespace selectors混淆）

有時候，你可能但願將你的混入器分組，或者組織代碼結構，或者爲了封裝。你能夠憑直覺在Less裏面作這些事情。好比你想把一些樣式作成多個集合在一個叫作#bundle的混入器中，可是使用的時候，你只想用它下面中的一個。

#bundle {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white
    }
  }
  .tab { ... }
  .citation { ... }
}

如今咱們想將.button類的樣式混入到#header a 中， 咱們能夠這樣：

#header a {
  color: orange;
  #bundle > .button;
}

Note that variables declared within a namespace will be scoped to that namespace only and will not be available outside of the scope via the same syntax that you would use to reference a mixin (#Namespace > .mixin-name). So, for example, you can't do the following: (#Namespace > @this-will-not-work).
注意：在命名空間中定義的變量只會在命名空間中有效，而在外部是不可用的。這個不會翻譯。其表達意思應該是：不用用變量來引用命名空間的調用或者mixins的調用。

做用域 Scope

Less中的做用域和其餘編程語言很類似。首先Less在本地環境查找 變量 和 混入器，若是沒找到，編譯器會前往父級查找，如此反覆。

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

註釋 Comments

Less中行註釋和塊註釋都是支持的，而css不支持行註釋

/* One hell of a block
style comment! */
@var: red;

// Get in line!
@var: white;

引入 Importing

引入能夠完美的工做。你能夠引入一個.less文件，全部變量都會生效。擴展名.less是可選的。

@import "library"; // library.less
@import "typo.css";

至此Less主要特性的概況已經介紹完畢，詳細的各個特性介紹請參考另外一篇譯文（翻譯中）