Less是一種動(dòng)態(tài)樣式語(yǔ)言
特性
LESS 將 CSS 賦予了動(dòng)態(tài)語(yǔ)言的特性罕偎，如 變量， 繼承， 運(yùn)算臭觉， 函數(shù).
LESS 既可以在 客戶端 上運(yùn)行 (支持IE 6+, Webkit, Firefox)蝠筑，也可以借助Node.js或者Rhino在服務(wù)端運(yùn)行臣镣。
（1）客戶端運(yùn)行
在HTML頁(yè)面中加載.less加載less.js,得到css,瀏覽器才可以顯示状原，效率低
（2）服務(wù)器運(yùn)行
借助第三方工具 koala
構(gòu)建工具 gulp webpack
node.js 來(lái)執(zhí)行
變量
less通過@來(lái)定義變量聋呢；如：@color:#ccc;
不僅可以用變量來(lái)管理屬性值，也可以用在選擇器名稱颠区，屬性名削锰，URL以及@import語(yǔ)句中；
1.選擇器變量
less:
//定義了一個(gè)選擇器變量
@mySelector:myName;
.@{mySelector}{
width: 100px;
height:100px;
color:red;
}
編譯后的css:
.myName {
width: 100px;
height: 100px;
color: red;
}
2.URL變量
less:
@img:'image';
應(yīng)用:
.myimg{
width:100px;
height: 100px;
background: url('@{img}/1.jpg') no-repeat;
}
編譯后的css:
.myimg {
width: 100px;
height: 100px;
background: url('image/1.jpg') no-repeat;
}
3.屬性變量
less:
@property:color;
.mydiv{
width: 100px;
height:100px;
@{property}:#eee ;
}
編譯后的css:
.mydiv {
width: 100px;
height: 100px;
color: #eee ;
}
混合(mixins)
類似于函數(shù)毕莱∑鞣罚混合可以將一個(gè)定義好的class A輕松的引入到另一個(gè)class B中测暗，從而簡(jiǎn)單實(shí)現(xiàn)class B繼承 class A中的所有屬性。
我們還可以帶參數(shù)地調(diào)用磨澡，就像 使用函數(shù)一樣碗啄。
(1)無(wú)參
less:
//定義一個(gè)color類
.color{
color:#eee;
background-color:#f00;
}
應(yīng)用:
.myBox{
width:100px;
height:100px;
.color;
}
編譯后的css:
.color {
color: #eee;
background-color: #f00;
}
.myBox {
width: 100px;
height: 100px;
color: #eee;
background-color: #f00;
}
(2) 有參
less:
//定義一個(gè)color類
.color (@color:#eee){
color:@color;
background-color:#f00;
}
應(yīng)用:
.myBox1{
width:100px;
height:100px;
.color();//不傳參時(shí)，即用默認(rèn)的參數(shù)稳摄；
.color(#0f0);//傳入?yún)?shù)的情況
}
編譯后的css:
.myBox1 {
width: 100px;
height: 100px;
color: #eee;
color: #0f0;
background-color: #f00;
}
有時(shí)候我們會(huì)看到如下的用法
.color () {
color:#eee;
}
當(dāng)你希望.color()不出現(xiàn)在css里稚字，且有不能引用其它類的時(shí)候，就可以這樣子寫厦酬。
(3)在媒體查詢里的嵌套寫法稍有區(qū)別
less:
//媒體查詢
.screencolor{
@media screen {
color:blue;
@media (min-width: 768px) {
color: red;
}
}
@media tv {
color: black;
}
}
編譯后的css:
@media screen {
.screencolor {
color: blue;
}
}
@media screen and (min-width: 768px) {
.screencolor {
color: red;
}
}
@media tv {
.screencolor {
color: black;
}
}
匹配模式
匹配模式的寫法類似于混合胆描。它的作用類似于if語(yǔ)句。
less:
.mixin(dark,@color) {
color: darken(@color, 15%);
}
.mixin(light,@color) {
color: lighten(@color, 15%);
}
//下面代碼的作用是仗阅，不管匹配上面哪種模式昌讲，下面樣式都會(huì)加進(jìn)去。注意：第一個(gè)參數(shù)一定是@_减噪，后面的每個(gè)參數(shù)都要加上
.mixin(@_,@color) {
width:100px;
height:100px;
}
.line {
.mixin(dark,#FF0000);
}
編譯后的css:
.line {
color: #b30000;
width: 100px;
height: 100px;
}
嵌套
在一個(gè)選擇器中嵌套另一個(gè)選擇器來(lái)實(shí)現(xiàn)繼承短绸；（&表示當(dāng)前選擇器的父選擇器）
媒體查詢和嵌套媒體查詢
less:
ul{
width: 100px;
li{
background:green;
a{
color: red;
&:hover{
color: blue;
}
}
}
}
編譯后的css:
ul {
width: 100px;
}
ul li {
background: green;
}
ul li a {
color: red;
}
ul li a:hover {
color: blue;
}
運(yùn)算
任何數(shù)值，顏色和變量都可以進(jìn)行運(yùn)算筹裕；less可以進(jìn)行加醋闭、減、乘朝卒、除的運(yùn)算证逻；
less：
@base: 5%;
@base-color:#eee;
@filler: @base * 2;
@other: @base + @filler;
.myBox3{
color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;
}
編譯后的css:
.myBox3 {
color: #222222;
background-color: #ffffff;
height: 60%;
}
函數(shù)
less提供了內(nèi)置的函數(shù)，詳情請(qǐng)參考 http://lesscss.cn/functions/#functions-overview
命名空間和訪問器
有時(shí)候抗斤，出于組織的目的囚企，或者為了提供一些封裝，你會(huì)希望將你的混合模塊(mixins) 組合在一起瑞眼。以便稍候復(fù)用或者分發(fā)龙宏。命名空間相當(dāng)于一個(gè)混合的集合；可以在需要的地方引用單獨(dú)的樣式负拟。
#bundle {
.button () {
display: block;
border: 1px solid black;
background-color: grey;
&:hover { background-color: white }
}
.tab { ... }
.citation { ... }
}
你只需要在 #header a中像這樣引入 .button
# header a {
color: orange;
#bundle > .button;
}
需要注意的是命名空間內(nèi)聲明的變量將只作用于該命名空間烦衣，你會(huì)用它來(lái)引用一個(gè)mixin (#Namespace > .mixin-name)歹河。
但你不能這么做： (#Namespace > @this-will-not-work)掩浙。
作用域
less 中的作用域跟其他編程語(yǔ)言非常類似，首先會(huì)從本地查找變量或者混合模塊秸歧，如果沒找到的話會(huì)去父級(jí)作用域中查找厨姚，直到找到為止.
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
#footer {
color: @var; // red
}
arguments變量
arguments變量包含了全部的傳進(jìn)來(lái)的參數(shù)。如果不想一個(gè)參數(shù)一個(gè)參數(shù)的寫键菱，那么可以用arguments參數(shù)谬墙。
less:
.border(@w:10px,@c:red,@xx:solid) {
border:@arguments;
}
div{
.border(20px);
}
編譯后的css:
div {
border: 20px red solid;
}
避免編譯
有時(shí)候我們需要輸出一些不正確的CSS語(yǔ)法或者使用一些 LESS不認(rèn)識(shí)的專有語(yǔ)法.
要輸出這樣的值我們可以在字符串前加上一個(gè) ~, 例如:
less:
.class {
filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}
編譯后的css:
.class {
filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}
今布！important關(guān)鍵字
類似于css ！important關(guān)鍵字拭抬。(優(yōu)先選擇)
擴(kuò)展
extend是一個(gè)less偽類部默，它會(huì)合并它所在的選擇其和它所匹配的引用。
less:
nav ul{
&:extend(.inline);
background:blue;
}
.inline{
color:red;
}
編譯后的css:
nav ul {
background: blue;
}
.inline,nav ul {
color: red;
}
注釋
/*會(huì)編譯為css注釋*/
//編譯成css的時(shí)候自動(dòng)過濾掉
文件引入
你可以在main文件中通過下面的形勢(shì)引入 .less 文件, .less 后綴可帶可不帶
@import "lib.less";
或
@import "lib";
如果你想導(dǎo)入一個(gè)css文件而且不想less對(duì)它進(jìn)行處理造虎，只需要使用.css后綴就可以:
@import "lib.css";
這樣LESS就會(huì)跳過它不去處理它傅蹂。
