淺談css的先行編譯---less語言，淺談css---less

淺談css的先行編譯---less語言，淺談css---less

正如各位所知道的一樣，css是一門標記性語言，文法相對簡單，對使用者的要求也比較低 。不過可樂不知道友友們有沒有發現，在使用css的時候需要書寫大量看似沒有邏輯的代碼，不方便維護及擴充，不利於複用，尤其對於一些缺乏css編寫經驗的猿猿來講，寫出組織良好且易於維護的 CSS 代碼是相當困難的一件事情。這個時候呢，可樂悄悄地告訴你們，咱們的程式員蜀黍是無所不能的，針對這個調皮的css，專門開發了less語言。那麼，就由可樂來細細為你們介紹這一個新朋友吧~~~

一、less簡介：

1、less語言是在css的文法基礎上，引入了變數，Mixin（混入），運算，以及函數等功能，可以讓我們用更少的代碼做更多的事情哦！

二、.less引入（兩種方式）：

1、用戶端使用.less檔案：先要從http://lesscss.org下載 less.js 檔案，然後在我們需要引入 LESS 源檔案的 HTML 中加入如下代碼：

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

注意，此處的rel屬性值是“stylesheet/less”哦。

還有一點就是：less源檔案一定要在less.js引入之前引入，才能保證less源檔案正確編譯解析:

<script src="../less.min.js"></script>

2、在伺服器端使用：主要是藉助於LESS的編譯器，將less源檔案編譯產生最終的css檔案（推薦）；

LESS 在伺服器端的使用主要是藉助於 LESS 的編譯器，將 LESS 源檔案編譯產生最終的 CSS 檔案，目前常用的方式是利用 node 的包管理器 (npm) 安裝 LESS，安裝成功後就可以在 node 環境中對 LESS 源檔案進行編譯。

在項目開發初期，我們無論採用用戶端還是伺服器端的用法，我們都需要想辦法將我們要用到的 CSS 或 LESS 檔案引入到我們的 HTML 頁面或是橋接檔案中，LESS 提供了一個我們很熟悉的功能— Importing。我們可以通過這個關鍵字引入我們需要的 .less 或 .css 檔案。 如：

@import “variables.less”;

.less 檔案也可以省略尾碼名，像這樣：

@import “variables”;

引入 CSS 同 LESS 檔案一樣，只是 .css 尾碼名不能省略。

三、.less文法簡介：1、變數：一次定義，重複使用：

@color:#505253;.bg-color{    background-color:@color;}.border-color{    border:1px solid @color;}

如上所示： @color 就是可樂剛剛定義的變數，在 .bg-color 和 .border-color 當中都可以使用它

 

2、混入--Mixins：申明一個類，然後在其它類中調用當前這個類

.roundeCorers(@radius:5px){    -moz-border-radius:@radius;    -webkit-border-radius:@radius;    border-radius:@radius;}#header{    .roundeCorers;}#footer{    .roundeCorers(10px);}

可樂注釋一下：其中 @radius 是參數，不穿參數時，預設值為 5px ，如 #header 中的用法。

3.繼承

有一個類用了一組樣式，又寫了一個類也想用這個樣式，可繼承上個類的樣式，如：

基礎css樣式：

.base-style {    font-size: 12px;    color: red;}

第一種繼承寫法：

.content{    .base-style();    background-color: white;}

第二種繼承寫法：

.content{    &:extend(.base-style);    background-color: white;}

兩寫法不同，編譯後產生的CSS樣式也不一樣

第一種：

.base-style{    font-size: 12px;    color: red;}.content {    font-size: 12px;    color: red;    background-color: white;}

第二種：

.base-style,.content{    font-size: 12px;    color: red;}.content {    background-color: white;}

4、嵌套規則：

html：

<div id="header">    <h1><a href="">www.xdpie.com</a></h1>    <p>自遊自駕</p></div>

LESS：

#header {    display: inline;    float: left;    h1 {    font-size: 26px;    font-weight: bold;    a {        text-decoration: none;        color: #f36;        &:hover {            text-decoration: underline;            color: #63f;            }        }    }    p {        font-size: 12px;    }}

5、功能和操作：

可樂給大家一個網址，供大家參考：

http://less.bootcss.com/functions/

6、邏輯控制：

LESS是用mixin通過guard的方式支援簡單圖瓦人分支控制，
比如我們要實現一個控制 ::placeholder 樣式的 mixin，當傳入顏色時只設定顏色，當傳入聲明塊時輸出對應的樣式規則，其他情況輸出一個預設的 color

.mixin(@val) when (iscolor(@val)) {    color: @val;}.mixin(@val) when (isruleset(@val)) {    @val();}.mixin(@val) when (default()) {    color: #666;}

可樂提示一下哈：default() in guards acts as else

好啦，對less的主要用法呢，可樂就講這麼多，最後再給一些友情提示，希望對各位博友們有協助哦~~~

先行編譯CSS有哪些：

Sass（Scss），Less，Stylus

Sass官網：http://sass-lang.com/   http://www.w3cplus.com/sassguide/

Less官網：http://lesscss.org/      中文：http://less.bootcss.com/

Stylus文檔：http://learnboost.github.io/stylus/

LESS和SCSS對比：https://css-tricks.com/sass-vs-less/

 

LESS和SCSS分別有哪些項目和書籍可作為參考：

1、Bootstrap 用了LESS

2、sass與compass實戰一書 主要講解了Sass用法