Less （Leaner Style Sheets 的縮寫）是一門向後相容的 CSS 擴展語言。包含了 Less 語言以及利用 JavaScript 開發的用於將 Less 樣式轉換成 CSS 樣式的 Less.js 工具。因為 Less 和 CSS 非常像，學習很容易。而且 Less 僅對 C... ...

Less是一門CSS預處理語言，它擴展了CSS語言，增加了變數，Mixin，函數等特性，使CSS更易維護和擴展。

更少可以運行在Node或瀏覽器端。

例子：

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

輸出：

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

使用方法

安裝

在伺服器上安裝Less的最簡單方法是通過npm，node.js包管理器，如下所示：

$ npm install -g less

命令行用法

安裝後，您可以從命令行調用編譯器，如下所示：

$ lessc styles.less

這將輸出編譯的CSS stdout。要將CSS結果保存到您選擇的文件，請使用：

$ lessc styles.less styles.css

要輸出縮小，您可以使用CSS clean-css插件。安裝插件後，使用--clean-css選項指定縮小的CSS輸出：

$ lessc --clean-css styles.less styles.min.css

要查看所有lessc不帶參數的命令行選項，請參閱用法。

代碼用法

您可以從節點調用編譯器，如下所示：

var less = require('less');

less.render('.class { width: (1 + 1) }', function (e, output) {
  console.log(output.css);
});

哪個會輸出

.class {
  width: 2;
}

配置

您可以將一些選項傳遞給編譯器：

var less = require('less');

less.render('.class { width: (1 + 1) }',
    {
      paths: ['.', './lib'],  // Specify search paths for @import directives
      filename: 'style.less', // Specify a filename, for better error messages
      compress: true          // Minify CSS output
    },
    function (e, output) {
       console.log(output.css);
    });

有關更多信息，請參閱用法

瀏覽器端用法

在瀏覽器中使用less.js非常適合開發，但不建議用於生產

客戶端是最簡單的入門方式，適合用Less開發，但在生產中，當性能和可靠性很重要時，我們建議使用node.js或許多第三方工具之一進行預編譯。

首先，將.less樣式表鏈接到rel設置為“ stylesheet/less” 的屬性：

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

接下來，下載less.js並將其包含在頁面元素的<script></script>標記中<head>：

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

提示

確保在腳本之前包含樣式表。
當您鏈接多個.less樣式表時，每個樣式表都是獨立編譯的。因此，您在樣式表中定義的任何變數，混合或名稱空間都無法訪問。
由於瀏覽器載入外部資源的原始策略相同，因此需要啟用CORS

選項

通過在以下位置之前在全局less對象上設置選項來定義選項：<script src="less.js"></script>

<!-- set options before less.js script -->
<script>
  less = {
    env: "development",
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    rootpath: ":/a.com/"
  };
</script>
<script src="less.js"></script>

或者為了簡潔起見，可以將它們設置為腳本和鏈接標記上的屬性（需要JSON.parse瀏覽器支持或polyfill）。

<script src="less.js" data-poll="1000" data-relative-urls="false"></script>
<link data-dump-line-numbers="all" data-global-vars='{ myvar: "#ddffee", mystr: "\"quoted\"" }' rel="stylesheet/less" type="text/css" href="less/styles.less">

下載

下載Less.js v2.5.3

下載源代碼

通過直接從GitHub下載獲取最新的Less.js源代碼。

通過GitHub克隆或分叉

分叉項目並向我們發送拉取請求！

用Bower安裝

通過在命令行中運行以下命令來安裝Less.js項目和JavaScript：

bower install less

CDN

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

less 的語法：

1嵌套語法

嵌套規則
Less使您能夠使用嵌套代替或與級聯結合使用。假設我們有以下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的結構。

您還可以使用此方法將偽選擇器與mixin捆綁在一起。這是經典的clearfix hack，重寫為mixin（&代表當前的選擇器父級）：

.clearfix {
  display: block;
  zoom: 1;

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

2 註釋語法;

使用 // 或 /* 包裹註釋*/

// 打包後將看不到，包裹註釋，打包後依然可以看到

3變數語法：

//這些都是不言自明的：

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

#header {
  color: @light-blue;
}


//輸出：

#header {
  color: #6c94be;
}

4 作用域語法：

Less中的Scope與編程語言非常相似。首先在本地查找變數和mixin，如果找不到它們，編譯器將查找父作用域，依此類推。

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}
變數和mixin在使用之前不必聲明，因此以下Less代碼與前面的示例相同：

@var: red;

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

5 混合語法

混合
Mixins是一種將一組屬性從一個規則集包含（“混入”）到另一個規則集中的方法。所以說我們有以下課程：

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
我們希望在其他規則集中使用這些屬性。好吧，我們只需要刪除我們想要屬性的類的名稱，如下所示：

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

.post a {
  color: red;
  .bordered;
}
.bordered該類的屬性現在將出現在#menu a和.post a。（請註意，您也可以#ids用作mixins。）

另外 Mixins也可以接受參數，這些參數是混合在一起時傳遞給選擇器塊的變數。

例如：

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
以下是我們如何將其混合到各種規則集中：

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}
參數mixin也可以為其參數設置預設值：

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
我們現在可以像這樣調用它：

#header {
  .border-radius;
}
它將包括5px邊界半徑。

您還可以使用不帶參數的參數化mixins。如果要從CSS輸出中隱藏規則集，但希望在其他規則集中包含其屬性，這非常有用：

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

pre { .wrap }
哪個輸出：

pre {
  text-wrap: wrap;
  white-space: -moz-pre-wrap;
  white-space: pre-wrap;
  word-wrap: break-word;
}
具有多個參數的混合
參數可以是分號或逗號分隔。建議使用分號。符號逗號具有雙重含義：它可以解釋為mixin參數分隔符或css列表分隔符。

使用逗號作為mixin分隔符使得無法將逗號分隔列表創建為參數。另一方面，如果編譯器在mixin調用或聲明中看到至少一個分號，則它假定參數由分號分隔，並且所有逗號都屬於css列表：

兩個參數，每一個包含逗號分隔的列表：.name(1, 2, 3; something, else)，
三個參數，每個包含一個數字：.name(1, 2, 3)，
使用dummy分號創建mixin調用，其中一個參數包含逗號分隔的css list : .name(1, 2, 3;),
逗號分隔的預設值：.name(@param1: red, blue;)。
定義具有相同名稱和參數數量的多個mixin是合法的。Less將使用所有可應用的屬性。如果您使用帶有一個參數的mixin .mixin(green);，那麼將使用具有一個強制參數的所有mixin的屬性：

.mixin(@color) {
  color-1: @color;
}
.mixin(@color; @padding: 2) {
  color-2: @color;
  padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}
.some .selector div {
  .mixin(#008000);
}
編譯成：

.some .selector div {
  color-1: #008000;
  color-2: #008000;
  padding-2: 2;
}
命名參數
mixin參考可以通過其名稱而不僅僅是位置來提供參數值。任何參數都可以通過其名稱引用，並且它們不必具有任何特殊順序：

.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
  .mixin(#efca44; @padding: 40px);
}
編譯成：

.class1 {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}
.class2 {
  color: #efca44;
  margin: 10px;
  padding: 40px;
}

5 混合作為函數引入

Mixins作為函數
從mixin返回變數或mixins

mixin中定義的變數和mixin是可見的，可以在調用者的範圍內使用。只有一個例外，如果調用者包含一個具有相同名稱的變數（包括由另一個mixin調用定義的變數），則不會複製變數。只有受調用者本地範圍中存在的變數才受到保護。從父作用域繼承的變數將被重寫。

例：

.mixin() {
  @width:  100%;
  @height: 200px;
}

.caller {
  .mixin();
  width:  @width;
  height: @height;
}
結果是：

.caller {
  width:  100%;
  height: 200px;
}
因此，mixin中定義的變數可以作為其返回值。這允許我們創建一個幾乎可以像函數一樣使用的mixin。

例：

.average(@x, @y) {
  @average: ((@x + @y) / 2);
}

div {
  .average(16px, 50px); // "call" the mixin
  padding: @average;    // use its "return" value
}
結果是：

div {
  padding: 33px;
}
直接在調用者範圍中定義的變數不能被覆蓋。但是，調用者父作用域中定義的變數不受保護，將被覆蓋：

.mixin() {
  @size: in-mixin;
  @definedOnlyInMixin: in-mixin;
}

.class {
  margin: @size @definedOnlyInMixin;
  .mixin();
}

@size: globaly-defined-value; // callers parent scope - no protection
結果是：

.class {
  margin: in-mixin in-mixin;
}
最後，mixin中定義的mixin也作為返回值：

.unlock(@value) { // outer mixin
  .doSomething() { // nested mixin
    declaration: @value;
  }
}

#namespace {
  .unlock(5); // unlock doSomething mixin
  .doSomething(); //nested mixin was copied here and is usable
}
結果是：

#namespace {
  declaration: 5;
}

導入（Importing）

“導入”的工作方式和你預期的一樣。你可以導入一個 .less 文件，此文件中的所有變數就可以全部使用了。如果導入的文件是 .less 擴展名，則可以將擴展名省略掉：

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

除此之外，還可以學習其他的樣式語音 :sass、scss

LessCSS