less基本知識

Less語法糖

less是Leaner Style Sheets 的縮寫，擴展CSS一些特性。使我們在樣式加入可以加，減，乘，除等更加靈活。

一、變量（Variables）

@width: 10px;聲明變量

@height: @width + 10px;

.className {

width: @width;

height: @height;

}

通過less編譯之後為

width: 10px;

height: 20px;

二 、混合（Mixins）

混合（Mixin）是一種将一組屬性從一個規則集包含（或混入）到另一個規則集的方法。假設我們定義了一個類（class）如下：

.bordered {

border-top: dotted 1px black;

border-bottom: solid 2px black;

#menu a {

color: #111;

.bordered();//導入

.post a {

color: red;

三、嵌套（Nesting）

Less 提供了使用嵌套（nesting）代替層疊或與層疊結合使用的能力。假設我們有以下 CSS 代碼：

#footer {

color: black;

#footer .navigation {

font-size: 12px;

#footer .logo {

width: 300px;

用 Less 語言我們可以這樣書寫代碼：

.navigation {

.logo {

用 Less 書寫的代碼更加簡潔，并且模仿了 HTML 的組織結構。可以使用此方法将僞選擇器（pseudo-selectors）與混合（mixins）一同使用。下面是一個經典的 clearfix 技巧，重寫為一個混合（mixin） (& 表示目前選擇器的父級）：

.clearfix {

display: block;

zoom: 1;

&:after {

content: " ";

font-size: 0;

height: 0;

clear: both;

visibility: hidden;

四、@規則嵌套和冒泡

@ 規則（例如 @media 或 @supports）可以與選擇器以相同的方式進行嵌套。

@ 規則會被放在前面，同一規則集中的其它元素的相對順序保持不變。這叫做冒泡（bubbling）很像js中事件流的冒泡。

.component {

@media (min-width: 768px) {

width: 600px;

@media (min-resolution: 192dpi) {

background-image: url(/img/retina2x.png);

@media (min-width: 1280px) {

width: 800px;

運行編譯之後為：

@media (min-width: 768px) and (min-resolution: 192dpi) {

五、運算（Operations）

算術運算符 +、-、*、/ 可以對任何數字、顔色或變量進行運算。如果可能的話，算術運算符在加、

減或比較之前會進行機關換算。計算的結果以最左側操作數的機關類型為準。如果機關換算無效或失去意義，

則忽略機關。無效的機關換算例如：px 到 cm 或 rad 到 % 的轉換。

// 所有操作數被轉換成相同的機關

@conversion-1: 5cm + 10mm; // 結果是 6cm

@conversion-2: 2 - 3cm - 5mm; // 結果是 -1.5cm

// conversion is impossible

@incompatible-units: 2 + 5px - 3cm; // 結果是 4px

// example with variables

@base: 5%;

@filler: @base 2; // 結果是 10%

@other: @base + @filler; // 結果是 15%

乘法和除法不作轉換。因為這兩種運算在大多數情況下都沒有意義，一個長度乘以一個長度就得到一個區域，而 CSS 是不支援指定區域的。Less 将按數字的原樣進行操作，并将為計算結果指定明确的機關類型。

@base: 2cm 3mm; // 結果是 6cm

你還可以對顔色進行算術運算：

@color: #224488 / 2; //結果是 #112244

background-color: #112244 + #111; // 結果是 #223355

不過，Less 提供的 色彩函數 更有使用價值。

calc() 特例

Released v3.0.0

為了與 CSS 保持相容，calc() 并不對數學表達式進行計算，但是在嵌套函數中會計算變量和數學公式的值。

@var: 50vh/2;

width: calc(50% + (@var - 20px)); // 結果是 calc(50% + (25vh - 20px))

六、轉義（Escaping）

轉義（Escaping）允許你使用任意字元串作為屬性或變量值。

任何 ~"anything" 或 ~'anything' 形式的内容都将按原樣輸出，除非 interpolation。

@min768: ~"(min-width: 768px)";

.element {

@media @min768 {

font-size: 1.2rem;

編譯為：

注意，從 Less 3.5 開始，可以簡寫為：

@min768: (min-width: 768px);

七、函數（Functions）

Less 内置了多種函數用于轉換顔色、處理字元串、算術運算等。這些函數在Less 函數手冊中有詳細介紹。

函數的用法非常簡單。下面這個例子将介紹如何利用 percentage 函數将 0.5 轉換為 50%，将顔色飽和度增加 5%，以及顔色亮度降低 25% 并且色相值增加 8 等用法：

如果想要深入了解函數有哪些可以參考使用手冊

@base: #f04615;

@width: 0.5;

.class {

width: percentage(@width); // returns <code>50%</code>

color: saturate(@base, 5%);

background-color: spin(lighten(@base, 25%), 8);

八、命名空間和通路符

有時，出于組織結構或僅僅是為了提供一些封裝的目的，你希望對混合（mixins）進行分組。你可以用 Less 更直覺地實作這一需求。假設你希望将一些混合（mixins）和變量置于 #bundle 之下，為了以後友善重用或分發,注意不要和 CSS @namespace 或 namespace selectors 混淆了：

#bundle() {

.button {

border: 1px solid black;

background-color: grey;

&amp;:hover {

background-color: white;

.tab { ... }

.citation { ... }

現在，如果我們希望把 .button 類混合到 #header a 中，我們可以這樣做：

#footer a {

color: orange;

#bundle.button(); // 還可以書寫為 #bundle &gt; .button 形式

九、映射（Maps）

從 Less 3.5 版本開始，你還可以将混合（mixins）和規則集（rulesets）作為一組值的映射（map）使用。

#colors() {

primary: blue;

secondary: green;

color: #colors[primary];

color:#colors[secondary]

border: 1px solid #colors[secondary];

輸出符合預期：

color: blue;

border: 1px solid green;

十、作用域（Scope）

Less 中的作用域與 CSS 中的作用域非常類似。首先在本地查找變量和混合（mixins），如果找不到，則從“父”級作用域繼承。

@var: red;

#page {

@var: white;

#header {

color: @var; // white

與 CSS 自定義屬性一樣，混合（mixin）和變量的定義不必在引用之前事先定義。

是以，下面的 Less 代碼示例和上面的代碼示例是相同的：

十一、注釋（Comments）

塊注釋和行注釋都可以使用：

/* 一個塊注釋

style comment! */

// 這一行被注釋掉了！

十二、導入（Importing）

“導入”的工作方式和你預期的一樣。你可以導入一個 .less 檔案，

此檔案中的所有變量就可以全部使用了。如果導入的檔案是 .less 擴充名，則可以将擴充名省略掉：

@import "library"; // library.less

@import "typo.css";