CSS和LESS

1、CSS

　　層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現 HTML（ 標准通用標記語言的一個應用）或 XML（標准通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。  

 

　　CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。

 

　　

.form-control-static {
  min-height: 34px;
  padding-top: 7px;
  padding-bottom: 7px;
  margin-bottom: 0;
}
.form-control-static.input-lg,
.form-control-static.input-sm {
  padding-right: 0;
  padding-left: 0;
}
.input-sm {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

 

　　

 　　 愛思考的小伙伴肯定會發現css樣式總是一大推一大堆的出現，無法合理的實現復用、運算。下面less成功的解決這個問題。

　　　　　　　　　　　　　　　　　　　　　　

 

2、LESS

　　2.1 less概述

 

　　

　　LESS 將 CSS 賦予了動態語言的特性，如 變量， 繼承， 運算， 函數. LESS 既可以在 客戶端 上運行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服務端運行。bootstrap默認使用LESS。

 

　　2.2 LESS 語法

 

　　LESS 做為 CSS 的一種形式的擴展，它並沒有閹割 CSS 的功能，而是在現有的 CSS 語法上，添加了很多額外的功能，所以學習 LESS 是一件輕而易舉的事情，果斷學習之！　

　變量

　　很容易理解:

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

　　#header { color: @light-blue; }

　　輸出:

　　#header { color: #6c94be; }

 

　　甚至可以用變量名定義為變量:

　　@fnord: "I am fnord."; 　　@var: 'fnord'; 　　content: @@var; 

　　解析后:

　content: "I am fnord.";

　

　混合

　　在 LESS 中我們可以定義一些通用的屬性集為一個class，然后在另一個class中去調用這些屬性. 下面有這樣一個class，那如果我們現在需要在其他class中引入那些通用的屬性集，那么我們只需要在任何class中像下面這樣調用就可以了:

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


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

.bordered class里面的屬性樣式都會在 #menu a 和 .post a中體現出來:

#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; } 

　　任何 CSS class, id 或者 元素 屬性集都可以以同樣的方式引入.

 

　帶參數混合

　　在 LESS 中，你還可以像函數一樣定義一個帶參數的屬性集合:

.border-radius (@radius) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } 

　　然后在其他class中像這樣調用它:

#header { .border-radius(4px); } .button { .border-radius(6px); } 

　　我們還可以像這樣給參數設置默認值:

.border-radius (@radius: 5px) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } 

　　所以現在如果我們像這樣調用它的話:

#header { .border-radius; } 

　　radius的值就會是5px.

　　你也可以定義不帶參數屬性集合,如果你想隱藏這個屬性集合，不讓它暴露到CSS中去，但是你還想在其他的屬性集合中引用，你會發現這個方法非常的好用:

.wrap () { text-wrap: wrap; white-space: pre-wrap; white-space: -moz-pre-wrap; word-wrap: break-word; } pre { .wrap } 

　輸出:

pre { text-wrap: wrap; white-space: pre-wrap; white-space: -moz-pre-wrap; word-wrap: break-word; }

　　

 

　　嵌套規則

LESS 可以讓我們以嵌套的方式編寫層疊樣式. 讓我們先看下下面這段 CSS:

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

在 LESS 中, 我們就可以這樣寫:

#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; &:hover { text-decoration: none } } } 

或者這樣寫:

#header { color: black; .navigation { font-size: 12px } .logo { width: 300px; &:hover { text-decoration: none } } }

 

代碼更簡潔了，而且感覺跟DOM結構格式有點像.

 

注意 & 符號的使用—如果你想寫串聯選擇器，而不是寫后代選擇器，就可以用到&了. 這點對偽類尤其有用如 :hover 和 :focus.

 

例如:

 

.bordered { &.float { float: left; } .top { margin: 5px; } } 

 

會輸出

 

.bordered.float { float: left; } .bordered .top { margin: 5px; }

 

 

 

 

　　Math 函數

 

LESS提供了一組方便的數學函數，你可以使用它們處理一些數字類型的值:

 

round(1.67); // returns `2` ceil(2.4); // returns `3` floor(2.6); // returns `2` 

 

如果你想將一個值轉化為百分比，你可以使用percentage 函數:

 

percentage(0.5); // returns `50%` 

 

　　

　　命名空間

 

有時候，你可能為了更好組織CSS或者單純是為了更好的封裝，將一些變量或者混合模塊打包起來, 你可以像下面這樣在#bundle中定義一些屬性集之后可以重復使用:

 

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

 

你只需要在 #header a中像這樣引入 .button:

 

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

 

　　作用域

 

LESS 中的作用域跟其他編程語言非常類似，首先會從本地查找變量或者混合模塊，如果沒找到的話會去父級作用域中查找，直到找到為止.

 

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

 揮一揮衣袖，不帶走一片雲彩

 

 

---

 

我是飛奔的企鵝

        　　一只有夢想、有故事的企鵝，歡迎說出你的故事