less 基本介紹

在前一篇 install-less 安裝好Less後，接下來就來基本介紹Less的功能用法吧。

1. Variables

Variables的意思是變數，我們可以使用一個變數去設定為某個值後，在需要的地方指定改變數，則Less會把該變數的值代入。
Less

@color: #4D926F;
 
.box{
	background: @color;
}

Compiled css

^?View Code CSS

1
2
3

.box{
	background: #4D926F;
}

Mixins的意思是funciton，我們可以先定義好function後，在需要的地方直接寫上該function後，Less則會把該function裡面的css代入。
Less

.width(@width:100%){
	width: @width;
}
 
.box{
	.width(50%);
}

Compiled css

^?View Code CSS

1
2
3

.box{
	width:50%;
}

Mixins的意思是巢狀規則，以往在css寫父類裡面的子類或更子類的class話，則必須寫好長一排css，而且也不直覺不容易瞭解，現在使用Less的巢狀規則後，在寫的時候就很清楚目前寫到哪了，而且也很容易瞭解。
Less

.box{
	p{
		font-size: 12px;
		a{
			text-decoration: none;
		}
	}
}

Compiled css

^?View Code CSS

.box p{
	font-size: 12px;
}
.box p a{
	text-decoration: none;
}

Operations的意思是運算，在Less裡指定的一個變數值後，如果想在使用時再對這變數改變值的話，可以在該變數後面加上運算進去，Less則會運算後將結果代入。
Less

@border: 1px;
@color: #111;
 
.box{
	border-color:@color + #222;
	border-width:@border * 3;
	border-style:solid;
}

Compiled css

^?View Code CSS

.box{
	border-color:#333;
	border-width:3px;
	border-style:solid;
}

以上就是Less基本的介紹，Less這類套件真的是改變寫css方式，尤其是Nested Rules更是，讓在寫css的開發者可以很清楚的知道現在在寫哪一層，而且也容易可以從寫的less知道目前在寫的html結構，真的很推薦使用這類的套件。