關於less的一些入門用法

less

變量（Variables）

@nice-blue: #5B83AD;

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

#header { color: @light-blue; }

編譯爲：

#header {

  color: #6c94be;

}

混合（Mixins）

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

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

.post a { color: red; .bordered; }

 

再舉幾個栗子：

.a, #b { color: red; }

.mixin-class { .a(); }

.mixin-id { #b(); }

注意其中的.a()和#b(),用.a和#b來是同樣的效果。兩種等效。

經典應用

又想創造一個類又不想讓他輸出，只想讓它被別的用的時候********後面加個（）

.my-mixin { color: black; }

.my-other-mixin() { //注意這裏多了個（）是關鍵，表示不單獨輸出這個，可是其餘的仍是可 //以使用這個

background: white;

}

.class { .my-mixin; .my-other-mixin; }

輸出結果：裏面並不含 .my-other-mixin 這個單獨的類

.my-mixin { color: black; }

.class { color: black; background: white; }

 

選擇器中的插入混合

.my-hover-mixin() {

  &:hover { border: 1px solid red; }

}

button { .my-hover-mixin(); }

輸出：

button:hover { border: 1px solid red; }

定義一個hover效果，在別的類中插入，就能夠得到類的hover效果。

 

命名空間

若是您想要在一個更復雜的選擇器中混合屬性，您能夠堆疊多個id或類。

#outer {

.inner { color: red; }

}

只想用.Inner

.c { #outer > .inner; }

大概意思就是你想用某個大的屬性中的某個小的屬性，就能夠經過堆疊的方式來進行，相似css中的選擇

有條件的類名

效果相似以下：

#namespace when (@mode=huge) {

.mixin() { /* */ }

}

#namespace {

.mixin() when (@mode=huge) { /* */ }

}

想要了解更多能夠查看api文檔

!important 關鍵字

用法以下：

.foo (@bg: #f5f5f5, @color: #900) {

  background: @bg;

  color: @color;

}

.unimportant {

  .foo();

}

.important {

  .foo() !important;

}

輸出:

.unimportant {

  background: #f5f5f5;

  color: #900;

}

.important {

  background: #f5f5f5 !important;

  color: #900 !important;

}

傳參的插入混合

定義一個：

.border-radius(@radius) {

-webkit-border-radius: @radius;

-moz-border-radius: @radius;

border-radius: @radius;

}

 

定義完了之後用法--->

#header {

.border-radius(4px);

}

.button {

.border-radius(6px);

}

定義的時候也能夠給定默認值

.border-radius(@radius: 5px) {

-webkit-border-radius: @radius;

-moz-border-radius:

@radius; border-radius: @radius;

}

而後能夠這麼調用

#header { .border-radius; }

多個參數的插入和混合

.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;

}

這裏有個問題： 爲何輸出到color-2 當參數是兩個的時候，從2輸出到3，三個參數的時候只輸出3.

 

多個參數也能夠提早賦值

舉個栗子：

 

.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;

}

參數數組變量@arguments

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {

 -webkit-box-shadow: @arguments;

 -moz-box-shadow: @arguments;

 box-shadow: @arguments;

}

.big-block {

 .box-shadow(2px; 5px);//直接傳入參數組

}

輸出結果

.big-block {

 -webkit-box-shadow: 2px 5px 1px #000;

 -moz-box-shadow: 2px 5px 1px #000;

 box-shadow: 2px 5px 1px #000;

}

可變參數數量的使用

.mixin(...) {        // matches 0-N arguments

.mixin() {           // matches exactly 0 arguments

.mixin(@a: 1) {      // matches 0-1 arguments

.mixin(@a: 1; ...) { // matches 0-N arguments

.mixin(@a; ...) {    // matches 1-N arguments

或者:

.mixin(@a; @rest...) {

   // @rest is bound to arguments after @a

   // @arguments is bound to all arguments

}

經過以上均可以得到一個參數可變的聲明類

根據傳遞的參數改變混合的行爲（相似函數）

.mixin(@s; @color) { ... }

.class {

.mixin(@switch; #888);

}

定義.mixin

.mixin(dark; @color) {

 color: darken(@color, 10%);

}

.mixin(light; @color) {

  color: lighten(@color, 10%);

}

.mixin(@_; @color) {

  display: block;

}

若是咱們運行

@switch: light;

.class { .mixin(@switch; #888); }

輸出的結果會是

.class {

color: #a2a2a2; display: block;

 }

中間的判斷過程大概是

第一個mixin定義不匹配，由於它指望第一個參數爲dark。

第二個mixin定義匹配，由於它指望第一個參數是light。

第三個mixin定義匹配，由於它指望第一個參數均可以。

也就是說參數匹配的才能夠執行（徹底的函數思路）

 

也能夠經過參數數量來進行匹配

.mixin(@a) { color: @a; }

.mixin(@a; @b) { color: fade(@a; @b); }

傳一個參數就匹配一個的，傳兩個參數就匹配兩個的

 

相似函數的混合

在mixin中定義的變量和mixin是可見的，能夠在調用者的範圍中使用。只有一個例外，若是調用者包含同名的變量(包含由另外一個mixin調用定義的變量)，則不會複製變量。只有在調用者本地範圍內的變量才被保護。從父做用域繼承的變量被重寫。

.mixin() {

@width: 100%;

@height: 200px;

}

.caller {

.mixin();

width: @width;

height: @height;

}

輸出結果

.caller {

width: 100%;

height: 200px;

}

調用完.mixin之後，裏面的值會做爲返回值返回，這就使得咱們能像使用函數同樣使用。

在來個栗子：

.average(@x, @y) {

 @average: ((@x + @y) / 2);

}

div {

 .average(16px, 50px); // "call" the mixin

 padding: @average; // use its "return" value

}

在調用方範圍中直接定義的變量不能被覆蓋。可是，在調用方的父範圍中定義的變量不受保護，而且將被覆蓋: 

舉個栗子：

.mixin() {

  @size: in-mixin;

  @definedOnlyInMixin: in-mixin;

}

.class {

  margin: @size @definedOnlyInMixin;

  .mixin();

}

@size: globaly-defined-value; // 全局定義的  父級的不受保護

輸出結果:  全局定義的在。Class內被局部的覆蓋了

.class {

  margin: in-mixin in-mixin;

}

 

多層嵌套的依舊會做爲返回值

.unlock(@value) { // 外部mixin

  .doSomething() { // 嵌套的mixin

    declaration: @value;

  }

}

#namespace {

  .unlock(5); // unlock doSomething mixin

  .doSomething(); //nested mixin was copied here and is usable（可用的）

}

 

輸出:

#namespace {

  declaration: 5;

}

大概流程： .unlock(5) 給doSomething的@value 傳了一個值

 .doSomething(); 又調用這個函數 並使用了返回值 declaration: @value;

 

 

嵌套（Nesting）

#header { color: black; }

#header .navigation { font-size: 12px; }

#header .logo { width: 300px; }

可寫爲

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

 

.clearfix {

display: block; zoom: 1;

&:after { content: " ";

display: block; font-size: 0;

height: 0;

clear: both;

 visibility: hidden; }

 }

 

& represents the current selector parent  &表示的是當前選擇的父級

 

運算（Operations）

 

@conversion-1: 5cm + 10mm; // result is 6cm 

@conversion-2: 2 - 3cm - 5mm; // result is -1.5cm // conversion is impossible @incompatible-units: 2 + 5px - 3cm; // result is 4px // example with variables @base: 5%; @filler: @base * 2; // result is 10% 

@other: @base + @filler; // result is 15%

 

Escaping（中文是轉義字符）

Escaping allows you to use any arbitrary string as property or variable value. Anything inside ~"anything" or ~'anything' is used as is with no changes except interpolation.

轉義容許您使用任意字符串做爲屬性或變量值。~「任何東西」或「任何東西」~的任何東西除了插值以外沒有任何變化。

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

.element {

  @media @min768 {

    font-size: 1.2rem;

  }

}

編譯爲：

@media (min-width: 768px) {

  .element {

    font-size: 1.2rem;

  }

}

 

函數（Functions）

例子將介紹如何利用 percentage 函數將 0.5 轉換爲 50%，將顏色飽和度增長 5%，以及顏色亮度下降 25% 而且色相值增長 8 等用法：

@base: #f04615;

@width: 0.5;

.class {

 width: percentage(@width); // returns `50%`

 color: saturate(@base, 5%);

 

}

Namespaces and Accessors

（做用相似於封裝）

#bundle() {

  .button {

    display: block;

    border: 1px solid black;

    background-color: grey;

    &:hover {

      background-color: white

    }

  }

  .tab { ... }

  .citation { ... }

}

可寫爲

#header a {

  color: orange;

  #bundle > .button;  // can also be written as #bundle.button

}

 

做用域（Scope）

 

@var: red;

#page {

@var: white;

#header {

color: @var; // white

 }

 }

 

@var: red;

#page {

#header {

color: @var; // white

}

 @var: white;

 }

用距離最近的做用域內的值

 

註釋（Comments）

塊註釋和行註釋均可以使用：

/* 一個塊註釋 * style comment! */ 

@var: red;

 // 這一行被註釋掉了！

 @var: white;

 

導入（Importing）

 

「導入」的工做方式和你預期的同樣。你能夠導入一個 .less 文件，此文件中的全部變量就能夠所有使用了。若是導入的文件是 .less 擴展名，則能夠將擴展名省略掉：

@import "library";

// library.less

@import "typo.css";

 

導入的順序

在less中@import出現的位置是沒有限制的，能夠在進行中的位置進行導入

.foo { background: #900; }

@import "this-is-valid.less";

 

導入的時候還能夠加一些參數進行處理

reference:使用較少的文件，但不要輸出它。

inline:在輸出中包含源文件，但不處理它。

less:不管文件擴展名如何，將文件視爲一個更少的文件。

css:不管文件擴展名是什麼，將文件做爲css文件處理。

once:只包含一次文件(這是默認行爲)

multiple:包含文件屢次。

optional:在未找到文件時繼續編譯。

舉個栗子：

@import (optional, reference) "foo.less";

具體每一個參數的詳細效果還得本身實驗，看翻譯看不出來 詳細的英文原版在這裏查找：

http://lesscss.cn/features/#import-options

 

 

 

 

安裝less

命令行安裝  （全局安裝）

npm install less -g 

爲了裝逼或者信息更詳細你能夠後面加上版本號來安裝特定版本的less

npm install less@2.7.1 -g

Node中開發安裝也能夠

npm i less --save-dev   （記住這個命令要在你所在的文件夾內的小黑框內輸入）

會安裝最新的版本並在你的 package.json的devDependencies  中增長版本和安裝信息

 

lessc -v   查看你安裝的版本

 

Less編譯成css

 

 

官方栗子：

lessc [option option=parameter ...] <source> [destination]

實例

lessc bootstrap.less bootstrap.css

 

Less中的一些常見命令

Silent

消除錯誤，再也不顯示錯誤信息

lessc -s    lessc --silent

 

Version

查看版本信息

lessc -v

lessc --version

 

Help  

查看幫助信息

lessc --help

lessc -h

瞭解更多能夠參考less options

 

瀏覽器中的使用

下載並引入兩個關於less的css和js文件

Js是給定的，css是須要用戶本身編寫的

下在地址https://github.com/less/less.js/archive/master.zip

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

引入的less文件會被解析成css文件供你的項目使用

<script src="less.js" type="text/javascript"></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>

 

在引入less以前能夠設置一些選項參數和函數，這樣初始化的時候就會統一受到這些參數的影響。

另一種方式就是：

<script> 

less = {

env: "development" 

};

</script> 

<script src="less.js" data-env="development"></script>

 

另一種方式：能夠在script和link中用一種相似於屬性的方式引入

<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">

 

Extend(延伸擴大，就是得到別的類的值的基礎上本身能夠擴展)

Extend語法

Extend用法舉例子

nav ul {

  &:extend(.inline);

background: blue;

}

.inline { color: red; }

 

編譯後：

nav ul {

 background: blue;

 }

.inline,

 nav ul {

  color: red;

 }

能夠看出nav ul 得到了inline 的值並在其基礎上進行了擴展，並且nav ul 在使用時 inline尚未出現（參考做用域和lazyload的解釋）。

Extend 兩種語法進行：

第一種：

.a:extend(.b) {

}

第二種：

.a {

&:extend(.b);

}

進階用法：

.c:extend(.d all) {

// 這種狀況下會把全部的d 包含的所有複製得到 只要是卸載d 中的一切樣式

}

.c:extend(.d) {

 // 這種狀況就只會擴展只有 d的全部的樣式

}

好比 .d{

.f{

}

}

d中含有f 當爲all的時候就會把f也獲取。

進階用法2

.e:extend(.f) {}

.e:extend(.g) {}

//上面的寫法太臃腫能夠改成下面的 只用，分開便可

.e:extend(.f, .g) {}

選擇器上的擴展

有以下的要求

必須在選擇器後面擴展:

  pre:hover:extend(div pre).

選擇器後面和extend前面是能夠有空格的

pre:hover :extend(div pre).（hover後面有一個空格）

能夠實現多個擴展

pre:hover:extend(div pre):extend(.bucket tr) 

上面的寫法和下面的是同樣的結果

 pre:hover:extend(div pre, .bucket tr)

下面是錯誤的寫法（extend必須在最後面的要求）

 pre:hover:extend(div pre).nth-child(odd

 

 

集合中的擴展

pre:hover,

.some-class {

&:extend(div pre);

}

至關於給每個都進行了擴展

pre:hover:extend(div pre),

.some-class:extend(div pre) {

}

 

 

嵌套中的擴展

栗子:

.bucket {

  tr {

    color: blue;

  }

}

.some-class:extend(.bucket tr) {}

編譯後

.bucket tr,.some-class {

  color: blue;

}

 

不明因此可是加了個&就不同了這個&應該是一種用法

栗子:

.bucket {

  tr & {

    color: blue;

  }

}

.some-class:extend(tr .bucket) {}

編譯後

tr .bucket,.some-class {

  color: blue;

}

 

 

擴展的準確性

.a.class,

 .class.a,

 .class > .a {

 color: blue;

 }

.test:extend(.class) {} // 這個不會匹配上面的任何一個

 

*.class { color: blue; }

.noStar:extend(.class) {}

輸出結果

*.class { color: blue; }

//*.class 和.class的效果是同樣的沒有區別可是會致使擴展沒法識別

順序也會影響

link:hover:visited {

  color: blue;

}

.selector:extend(link:visited:hover) {} //順序改變了extend不會識別

輸出

link:hover:visited {

  color: blue;

}

Nth的效果

雖然css中的iN+3 和N+3基本同樣，可是extend卻沒法識別

:nth-child(1n+3) {

  color: blue;

}

.child:extend(:nth-child(n+3)) {}//換成了n+3 所以下面沒法識別

輸出:

nth-child(1n+3) {

  color: blue;

}

屬性key-value值的效果

[title=identifier] {

  color: blue;

}

[title='identifier'] {

  color: blue;

}

[title="identifier"] {

  color: blue;

}

以上三種都是能夠被識別的 三個的效果是同樣的能夠互通

.noQuote:extend([title=identifier]){}

.singleQuote:extend([title='identifier']) {}

.doubleQuote:extend([title="identifier"]) {}

輸出

[title=identifier],.noQuote,.singleQuote,.doubleQuote {

  color: blue;

}

[title='identifier'],.noQuote,.singleQuote,.doubleQuote {

  color: blue;

}

[title="identifier"],.noQuote,.singleQuote,.doubleQuote {

  color: blue;

}

All 

進階用法中已經介紹

Extend 不能識別含有變量的，它會自動忽略

@variable: .bucket;

@{variable} {

// interpolated selector color: blue; }

.some-class:extend(.bucket) {} // 什麼都不會作，不會匹配

下面的額方式依然仍是不會被識別

.bucket {

 color: blue;

}

.some-class:extend(@{variable}) {} // interpolated selector matches nothing @variable: .bucket;

 

媒體查詢中的擴展

在媒體聲明中寫入的擴展應該只匹配同一媒體聲明中的選擇器:

@media print {

  .screenClass:extend(.selector) {} // 在媒體查詢中擴展

  .selector { // 同一個媒體查詢中的纔會被匹配

    color: black;

  }

}

.selector { //這個不會被匹配

  color: red;

}

@media screen {

  .selector {  //不是同一個media也不會被匹配

    color: blue;

  }

}

輸出:

@media print {

  .selector,

  .screenClass {

    color: black;

  }

}

.selector {

  color: red;

}

@media screen {

  .selector {

    color: blue;

  }

}

在媒體聲明中寫入的擴展不匹配嵌套中的選擇器。

栗子:

@media screen {

  .screenClass:extend(.selector) {} // extend inside media

  @media (min-width: 1023px) {

    .selector {  // ruleset inside nested media - extend ignores it

      color: blue;

    }

  }

}

輸出:

@media screen and (min-width: 1023px) {

  .selector { /* ruleset inside another nested media was ignored */

    color: blue;

  }

}

頂級擴展匹配全部內容，包括嵌套媒體中的選擇器:不名因此，貌似是@media screen是全局的因此extend是能夠用的

@media screen {

  .selector {  /* ruleset inside nested media - top level extend works */

    color: blue;

  }

  @media (min-width: 1023px) {

    .selector {  /* ruleset inside nested media - top level extend works */

      color: blue;

    }

  }

}

.topLevel:extend(.selector) {} /* top level extend matches everything */

輸出:

@media screen {

  .selector,

  .topLevel { /* ruleset inside media was extended */

    color: blue;

  }

}

@media screen and (min-width: 1023px) {

  .selector,

  .topLevel { /* ruleset inside nested media was extended */

    color: blue;

  }

}

Duplication Detection（重複檢測）

Currently there is no duplication detection.

栗子:

.alert-info,.widget {

  /* declarations */

}

.alert:extend(.alert-info, .widget) {}

輸出

.alert-info,.widget,.alert,.alert {

  /* declarations */ 

//貌似是多了一個alert,可是在hbulideer中測試發現例子中的寫法根本沒法編譯，直接報錯了

}

Extend的使用情景

對於一些基礎的類能夠不用增長

舉個栗子：

.animal {

 

color: white;

}

<a class="animal bear">Bear</a>

可是有這樣一個標籤不只有動物的性值還有本身特殊的性值，所以你還須要給他再來個類

而後就變成這樣

.animal {

 

color: white;

}

.bear { background-color: brown; }

這時你能夠用less來進行：

<a class="bear">Bear</a> //只須要一個bear的類名就能夠了

Less中的寫法

.animal {

 background-color: black;

color: white;

}

.bear {

&:extend(.animal);

 

}

這種方式相似js中的原型和繼承。

 

其餘

此外less中還有循環結構 父級選擇器等   循環是很厲害可是感受沒大用

http://lesscss.cn/features/#loops-feature