Bootstrap筆記《二》less

less

less是一種動态的樣式表語言，less擴充了css，使得我們可以像寫程式一樣，寫css，提高css的擴充性、重用性，可以運作在用戶端，也可以運作在服務端nodejs。

less提供了變量定義，mixins，函數等等常見的程式元素。

mixins是一種組合的方式，提高重用，極大提高css編寫效率。

sass

less的使用

首先我們寫一段less，儲存為style.less檔案。

@base: #f938ab; 

body{ 

    color: @base; 

} 

代碼很簡單，就是定義一個變量@base，然後在body的color中使用這個變量。

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

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

在浏覽器中檢視這個頁面，就會發現，效果出來了，和我們寫css是一個效果。

也就是在用戶端用js将less檔案動态解釋為css。如果對性能有較高要求，就用node或者是一些第三方工具先将less編譯為css，然後引用編譯好的css就可以了，這樣就不用下載下傳less.js檔案，也不用在用戶端動态解釋了。

$ npm install -g less 

$ lessc styles.less 

$ lessc styles.less > styles.css 

#-x，壓縮檔案 

$ lessc -x styles.less > styles.css 

變量variables

從前面這個簡單的變量就可以看出來less的好處了，一個顔色的值被重用。在原來，我們要使用一個顔色，會在多個地方寫這個顔色的值，需要改，就批量的替換，需要替換一部分，噩夢就來了。

現在好多了，定義一個變量，然後在需要的地方引用這個變量，部分替換，就定義兩個變量。這不就重用了嗎！

組合Mixins

mixins就是一種組合的方式，有點像寫個工具類，靜态方法，對于字元串進行某種處理，比如格式化函數，格式化日期之類的。

我們經常在css中對邊框進行設定solid 1px這類設定，然後把這些資訊寫到很多地方，div，table，總之不少。

利用mixins的方式，我們隻定義一個class，然後在其他class中引用它。

其實也有點像元件程式設計，把大元件差分成小元件，然後在需要的地方組合起來，給後期的維護也帶來好處。

.border{ 

    border-top: dotted 1px black; 

    border-bottom: solid 2px black; 

table{

.border;

}

.container{ 

    .border; 

上面的less産生的css是下面的樣子。

.border { 

    border-bottom: 2px solid black; 

    border-top: 1px dotted black; 

table { 

.container { 

很不錯吧。

嵌套Nested Rules

我們的html可能是div裡面有div，然後有ul，ul裡面有a，a裡面有span，如果我們對這幾個分别設定樣式，就會在css中寫div一個，div ul一個，div ul a一個，div ul span一個。

在css中，空格代表下一級别。

這樣寫又繁瑣，又不直覺。

less的寫法很奇特，樣子很直覺，一眼看上去就知道怎麼回事了，很有層次感。

//less 

#header { 

  h1 { 

    font-size: 26px; 

    font-weight: bold; 

  } 

  p { font-size: 12px; 

    a { text-decoration: none; 

      &:hover { border-width: 1px } 

    } 

生成的css，也就是我們普通的寫法就是下面的樣子。

#header h1 { 

  font-size: 26px; 

  font-weight: bold; 

#header p { 

  font-size: 12px; 

#header p a { 

  text-decoration: none; 

#header p a:hover { 

  border-width: 1px; 

函數Functions & Operations

我們先看一段less代碼，然後在說說這個用法的場景。

@the-border: 1px; 

@base-color: #111; 

@red:        #842210; 

  color: (@base-color * 3); 

  border-left: @the-border; 

  border-right: (@the-border * 2); 

#footer { 

  color: (@base-color + #003300); 

  border-color: desaturate(@red, 10%); 

下面是生成的css内容。

  color: #333; 

  border-left: 1px; 

  border-right: 2px; 

  color: #114411; 

  border-color: #7d2717; 

我覺得上面的這種用法的場景就是，我們先定義一些基線，然後其他的是相對于基線進行調整。可以有一種漸進的感覺，相對的概念。

本文轉自 virusswb 51CTO部落格，原文連結：http://blog.51cto.com/virusswb/1037632，如需轉載請自行聯系原作者