變量

適用于定義主題，我們可以將背景顏色、字體顏色、邊框?qū)傩缘瘸Ｒ?guī)樣式進(jìn)行統(tǒng)一定義，這樣不同的主題只需要定義不同的變量文件就可以了。當(dāng)然該特性也同樣適用于 CSS RESET（重置樣式表），在 Web 開發(fā)中，我們往往需要屏蔽瀏覽器默認(rèn)的樣式行為而需要重新定義樣式表來覆蓋瀏覽器的默認(rèn)行為，這里可以使用 LESS 的變量特性，這樣就可以在不同的項(xiàng)目間重用樣式表，我們僅需要在不同的項(xiàng)目樣式表中，根據(jù)需求重新給變量賦值即可。

 @border-color : #b5bcc7; 

 .mythemes tableBorder{ 
   border : 1px solid @border-color; 
 }

 .mythemes tableBorder { 
  border: 1px solid #b5bcc7; 
 }

生命周期

局部變量還是全局變量
查找變量的順序是先在局部定義中找，如果找不到，則查找上級(jí)定義，直至全局

 @width : 20px; 
 #homeDiv { 
   @width : 30px; 
   #centerDiv{ 
       width : @width;// 此處應(yīng)該取最近定義的變量 width 的值 30px 
              } 
 } 
 #leftDiv { 
     width : @width; // 此處應(yīng)該取最上面定義的變量 width 的值 20px 

 }

 #homeDiv #centerDiv { 
  width: 30px; 
 } 
 #leftDiv { 
  width: 20px; 
 }

列表類型

@colors: #FFF, #0F0, #F0F;
.skin{
color: extract(@colors,0);
height: 12px*length(@colors);
}

.skin{
color: #FFF;
height: 36px;
}

mixins

在 LESS 中，混入是指在一個(gè) CLASS 中引入另外一個(gè)已經(jīng)定義的 CLASS，就像在當(dāng)前 CLASS 中增加一個(gè)屬性一樣

  定義一個(gè)樣式選擇器
 .roundedCorners(@radius:5px) { 
   -moz-border-radius: @radius; 
   -webkit-border-radius: @radius; 
   border-radius: @radius; 
 } 

 在另外的樣式選擇器中使用
 #header { 
   .roundedCorners; 
 } 
 #footer { 
   .roundedCorners(10px); 
 }

 #header { 
 -moz-border-radius:5px; 
 -webkit-border-radius:5px; 
 border-radius:5px; 
 } 
 #footer { 
 -moz-border-radius:10px; 
 -webkit-border-radius:10px; 
 border-radius:10px; 
 }

Mixins 其實(shí)是一種嵌套，它允許將一個(gè)類嵌入到另外一個(gè)類中使用，被嵌入的類也可以稱作變量，簡(jiǎn)單的講，Mixins 其實(shí)是規(guī)則級(jí)別的復(fù)用。

Mixins 還有一種形式叫做 Parametric Mixins（混入?yún)?shù)），LESS 也支持這一特性

// 定義一個(gè)樣式選擇器
 .borderRadius(@radius){ 
 -moz-border-radius: @radius; 
 -webkit-border-radius: @radius; 
 border-radius: @radius; 
 } 
 // 使用已定義的樣式選擇器
 #header { 
 .borderRadius(10px); // 把 10px 作為參數(shù)傳遞給樣式選擇器
 } 
 .btn { 
 .borderRadius(3px);// // 把 3px 作為參數(shù)傳遞給樣式選擇器

 }

 #header { 
 -moz-border-radius: 10px; 
 -webkit-border-radius: 10px; 
 border-radius: 10px; 
 } 
 .btn { 
 -moz-border-radius: 3px; 
 -webkit-border-radius: 3px; 
 border-radius: 3px; 
 }

像 JavaScript 中 arguments一樣，Mixins 也有這樣一個(gè)變量：@arguments。@arguments 在 Mixins 中具是一個(gè)很特別的參數(shù)，當(dāng) Mixins 引用這個(gè)參數(shù)時(shí)，該參數(shù)表示所有的變量，很多情況下，這個(gè)參數(shù)可以省去你很多代碼。

 .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ 
 -moz-box-shadow: @arguments; 
 -webkit-box-shadow: @arguments; 
 box-shadow: @arguments; 
 } 
 #header { 
 .boxShadow(2px,2px,3px,#f36); 
 }

 #header { 
 -moz-box-shadow: 2px 2px 3px #FF36; 
 -webkit-box-shadow: 2px 2px 3px #FF36; 
 box-shadow: 2px 2px 3px #FF36; 
 }

當(dāng)我們擁有了大量選擇器的時(shí)候，特別是團(tuán)隊(duì)協(xié)同開發(fā)時(shí)，如何保證選擇器之間重名問題？

采用了命名空間的方法來避免重名問題

 #mynamespace { 
 .home {...} 
 .user {...} 
 }

這樣我們就定義了一個(gè)名為 mynamespace 的命名空間，如果我們要復(fù)用 user 這個(gè)選擇器的時(shí)候，我們只需要在需要混入這個(gè)選擇器的地方這樣使用就可以了。#mynamespace > .user。

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

引入.button

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

嵌套的規(guī)則

 <div id="home"> 
    <div id="top">top</div> 
    <div id="center"> 
        <div id="left">left</div> 
        <div id="right">right</div> 
    </div> 
 </div>

#home{ 
   color : blue; 
   width : 600px; 
   height : 500px; 
   border:outset; 
   #top{ 
        border:outset; 
        width : 90%; 
   } 
   #center{ 
        border:outset; 
        height : 300px; 
        width : 90%; 
        #left{ 
          border:outset; 
          float : left; 
          width : 40%; 
        } 
        #right{ 
          border:outset; 
          float : left; 
          width : 40%; 
        } 
    } 
 }

 #home { 
  color: blue; 
  width: 600px; 
  height: 500px; 
  border: outset; 
 } 
 #home #top { 
  border: outset; 
  width: 90%; 
 } 
 #home #center { 
  border: outset; 
  height: 300px; 
  width: 90%; 
 } 
 #home #center #left { 
  border: outset; 
  float: left; 
  width: 40%; 
 } 
 #home #center #right { 
  border: outset; 
  float: left; 
  width: 40%; 
 }

對(duì)偽元素

a { 
 color: red; 
 text-decoration: none; 
 &:hover {// 有 & 時(shí)解析的是同一個(gè)元素或此元素的偽類，沒有 & 解析是后代元素
  color: black; 
  text-decoration: underline; 
 } 
 }

 a { 
 color: red; 
 text-decoration: none; 
 } 
 a:hover { 
 color: black; 
 text-decoration: underline; 
 }

運(yùn)算及函數(shù)

在我們的 CSS 中充斥著大量的數(shù)值型的 value，比如 color、padding、margin 等，這些數(shù)值之間在某些情況下是有著一定關(guān)系的，那么我們?cè)鯓永?LESS 來組織我們這些數(shù)值之間的關(guān)系呢？

對(duì)數(shù)值型的 value（數(shù)字、顏色、變量等）進(jìn)行加減乘除四則運(yùn)算

 @init: #111111; 
 @transition: @init*2; 
 .switchColor { 
 color: @transition; 
 }

 .switchColor { 
  color: #222222; 
 }

專門針對(duì) color 的操作
這些函數(shù)的主要作用是提供顏色變換的功能，先把顏色轉(zhuǎn)換成 HSL 色，然后在此基礎(chǔ)上進(jìn)行操作

 lighten(@color, 10%); // return a color which is 10% *lighter* than @color 
 darken(@color, 10%); // return a color which is 10% *darker* than @color 
 saturate(@color, 10%); // return a color 10% *more* saturated than @color 
 desaturate(@color, 10%);// return a color 10% *less* saturated than @color 
 fadein(@color, 10%); // return a color 10% *less* transparent than @color 
 fadeout(@color, 10%); // return a color 10% *more* transparent than @color 
 spin(@color, 10); // return a color with a 10 degree larger in hue than @color 
 spin(@color, -10); // return a color with a 10 degree smaller hue than @color

init: #f04615; 
 #body { 
  background-color: fadein(@init, 10%); 
 }

 #body { 
  background-color: #f04615; 
 }

Comments

LESS 中單行注釋 (// 單行注釋 ) 是不能顯示在編譯后的 CSS 中，所以如果你的注釋是針對(duì)樣式說明的請(qǐng)使用多行注釋。

字符串插值

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

避免編譯

.class {
  filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

父選擇器引用(ParentSelector)

采用&引用完整的父選擇器
可通過追加和預(yù)追加的方式加工&，從而生成新的選擇器
通過&::after等方式添加偽元素、偽類樣式規(guī)則集合
同一個(gè)選擇器可使用多個(gè)&
通過在選擇器后添加 "空格&"的方式，可將當(dāng)前選擇器排列到最前面
&指向組選擇器時(shí)，會(huì)生成新的組選擇器

@bg: #aaa;
#ps1 .btn{
background-color: @bg;
border-radius: 5px;
&:hover{
background-color: lighten(@bg, 30%);
cursor: pointer;
}
&-msg, &-eof{
color: blue;
}
.no-borderradius &{
background-image: url('img/btn-bg.png');
}
}
/*
* &指向組選擇器時(shí)，會(huì)生成新的組選擇器
*/
#dummy1, .dummy1{
&:hover{
color: red;
}
& + &{
font-size: 12px;
}
}

#ps1 .btn {
  background-color: #aaaaaa;
  border-radius: 5px;
}
#ps1 .btn:hover {
  background-color: #f6f6f6;
  cursor: pointer;
}
#ps1 .btn-msg,
#ps1 .btn-eof {
  color: blue;
}
.no-borderradius #ps1 .btn {
  background-image: url('img/btn-bg.png');
}
/*
 * &指向組選擇器時(shí)，會(huì)生成新的組選擇器
 */
#dummy1:hover,
.dummy1:hover {
  color: red;
}
#dummy1 + #dummy1,
#dummy1 + .dummy1,
.dummy1 + #dummy1,
.dummy1 + .dummy1 {
  font-size: 12px;
}

import

less樣式文件可通過 @import '文件路徑'; 引入外部的less文件。
不帶擴(kuò)展名或帶非.less的擴(kuò)展名均被視為less文件;
@import可出現(xiàn)在任何位置，而不像css的@import那樣只能放在文件第一行。

另外@import還提供了6個(gè)可選配置項(xiàng)(分別為reference,inline,less,css,once,multiple)，用來改變引入文件的特性。語法為： @import (reference) '文件路徑'; 。
下面為各配置項(xiàng)的具體說明：

@import (reference) "文件路徑";
　　將引入的文件作為樣式庫使用，因此文件中樣式不會(huì)被直接編譯為css樣式規(guī)則。當(dāng)前樣式文件通過extend和mixins的方式引用樣式庫的內(nèi)容。
@import (inline) "文件路徑";
　　用于引入與less不兼容的css文件，通過inline配置告知編譯器不對(duì)引入的文件進(jìn)行編譯處理，直接輸出到最終輸出。注意：引入的文件和當(dāng)前文件會(huì)被編譯為一個(gè)樣式樣式
@import (less) "文件路徑";
　　默認(rèn)使用該配置項(xiàng)，表示引入的文件為less文件。
@import (css) "文件路徑";
　　表示當(dāng)前操作為CSS中的@import操作。當(dāng)前文件會(huì)輸出一個(gè)樣式文件，而被引入的文件自身為一個(gè)獨(dú)立的樣式文件
@import (once) "文件路徑";
　　默認(rèn)使用該配置項(xiàng)，表示對(duì)同一個(gè)資源僅引入一次。
@import (multiple) "文件路徑";
　　表示對(duì)同一資源可引入多次。

繼承(Extend)

兩種語法：

.animal{
　　color: #fff;
}
/* 語法1：<selector>:extend(<parentSelector>){} */
.bear:extend(.animal){
　　width: 100px;
　　height: 100px;
}
/* 語法2：<selector>{ &:extend(<parentSelector>); } */
.deer{
　　&:extend(.animal);
　　width: 50px;
　　height: 50px;
}

.animal,
.bear,
.deer {
  color: #fff;
}
/* 語法1：<selector>:extend(<parentSelector>){} */
.bear {
  width: 100px;
  height: 100px;
}
/* 語法2：<selector>{ &:extend(<parentSelector>); } */
.deer {
  width: 50px;
  height: 50px;
}

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Less基礎(chǔ)

Less基礎(chǔ)

變量

mixins

運(yùn)算及函數(shù)

Comments

字符串插值

避免編譯

父選擇器引用(ParentSelector)

import

繼承(Extend)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Less基礎(chǔ)

變量

mixins

運(yùn)算及函數(shù)

Comments

字符串插值

避免編譯

父選擇器引用(ParentSelector)

import

繼承(Extend)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av