less
less是一種動態樣式語言，屬於css預處理器的範疇，它擴展了 CSS 語言，
增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴展
LESS 既可以在 客戶端 上運行 ，也可以藉助Node.js在服務端運行。
less的中文官網：
bootstrap中less教程：
http://www.bootcss.com/p/lesscss/
Less編譯工具
koala 官網:
www.koala-app.com
Less編譯
- 用koala手動編譯
- 藉助less轉css文件手動編譯
- 利用打包工具編譯
less中的註釋
以//開頭的註釋，不會被編譯到css文件中
以/**/包裹的註釋會被編譯到css文件中
less中的變量
LESS 中的變量爲完全的 ‘常量’ ，所以只能定義一次.
使用@來申明一個變量：@pink：pink;
- 作爲普通屬性值只來使用：直接使用@pink
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }
=>
#header { color: #6c94be; }
- 作爲選擇器和屬性名：@{selector的值}的形式
<div id="wrap"></div>
// less
@selector:#wrap;
@w:width;
@{selector}{
@{w}:100px;
height: 300px;
border: 1px solid;
}
// 編譯爲css後
#wrap{
width:100px;
height:300px;
border:1px solid;
}
- 作爲URL：@{url}
// less
@url:"../img/zdy.jpg";
#wrap{
width: 100px;
height: 100px;
background: url("@{url}");
// 也可以將url作爲變量，寫成下面形式
// background: url(@url);
}
// 編譯爲css後
#wrap{
width:100px;
height:100px;
background:url("../img/zdy.jpg")
}
- 變量的延遲加載
// less
@var: 0;
.class {
@var: 1;
.brass {
@var: 2;
three: @var; //3
@var: 3;
}
one: @var; //1
}
// 編譯爲css後
.class {
one: 1;
}
.class .brass {
three: 3;
}
less作用域
首先會從本地查找變量或者混合模塊，如果沒找到的話會去父級作用域中查找，直到找到爲止.
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
#footer {
color: @var; // red
}
less中的嵌套規則
- 基本嵌套規則
// html頁面：
<ul id="list">
<li>
<a href="javascript:;">a1</a>
<span>b1</span>
</li>
</ul>
// less嵌套寫法：
#list{
list-style: none;
line-height: 30px;
width: 300px;
background: pink;
margin: 0 auto;
li{height: 30px;}
a{
float: left;
/*&代表父級*/
&:hover{color: red;}
}
span{float: right;}
}
- &的使用（&代表父級）
如果想寫串聯選擇器，而不是寫後代選擇器，就可以用到&了.
這點對僞類尤其有用如 :hover 和 :focus.
less中的混合
混合就是將一系列屬性從一個規則集引入到另一個規則集的方式
任何 CSS class, id 或者 元素 屬性集都可以以同樣的方式引入.
以下測試，html模板均爲
// html
<div id="box1">box1</div>
- 普通混合(會將混合內容輸出到css文件中)
// less
.juzhong{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
#box1{
width: 100px;
height: 100px;
background: pink;
.juzhong;
}
// 編譯爲css後
.juzhong { // 會將混合內容輸出到css文件中
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
#box1 {
width: 100px;
height: 100px;
background: pink;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
- 不帶輸出的混合
加（）後就不會在css中輸出混合內容了
// less
.juzhong(){
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
#box1{
width: 100px;
height: 100px;
background: pink;
.juzhong;
}
// 編譯爲css後
#box1 {
width: 100px;
height: 100px;
background: pink;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
- 帶參數的混合
// less
.juzhong(@w,@h,@c){
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
width: @w;
height: @h;
background: @c;
}
#box1{
.juzhong(100px,100px,pink);
z-index: 1;
}
// 編譯爲css後
#box1 {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
width: 100px;
height: 100px;
background: #ffc0cb;
z-index: 1;
}
- 帶參數並且有默認值的混合
// less
.juzhong(@w:100px,@h:100px,@c:pink){
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
width: @w;
height: @h;
background: @c;
}
#box1{
.juzhong;
z-index: 1;
}
// 編譯爲css後
#box1 {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
width: 100px;
height: 100px;
background: #ffc0cb;
z-index: 1;
}
- 帶多個參數的混合
- 命名參數（傳實參時可以指定值給的是哪個參數）
命名參數就是引用mixin時可以通過參數名稱而不是參數的位置來爲mixin提供參數值。
任何參數都已通過它的名稱來引用，這樣就不必按照任意特定的順序來使
// less
.juzhong(@w:100px,@h:100px,@c:pink){
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
width: @w;
height: @h;
background: @c;
}
#box1{
// 引入混合時可以改變參數位置
.juzhong(@h:200px;@c:deeppink;);
}
// 編譯爲css後
#box1 {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
width: 100px;
height: 200px;
background: #ff1493;
}
- 匹配模式
根據傳入的參數來改變混合的默認呈現。
// less
/*向上的三角*/
.triangle(top,@w:10px,@c:pink){
border-width:@w;
border-color: transparent transparent @c transparent ;
border-style:dashed dashed solid dashed ;
}
/*向下的三角*/
.triangle(bottom,@w:10px,@c:pink){
border-width:@w;
border-color: @c transparent transparent transparent ;
border-style:solid dashed dashed dashed ;
}
/*向左的三角*/
.triangle(left,@w:10px,@c:pink){
border-width:@w;
border-color: transparent @c transparent transparent ;
border-style: dashed solid dashed dashed ;
}
/*向右的三角*/
.triangle(right,@w:10px,@c:pink){
border-width:@w;
border-color: transparent transparent transparent @c;
border-style: dashed dashed dashed solid;
}
.triangle(@_,@w:10px,@c:pink){
width: 0;
height: 0;
overflow: hidden;
}
#box1{
// 向上三角圖案
.triangle(top,50px,deeppink);
}
// 編譯爲css後
#box1 {
border-width: 50px;
border-color: transparent transparent #ff1493 transparent;
border-style: dashed dashed solid dashed ;
width: 0;
height: 0;
overflow: hidden;
}
導引表達式:
當我們想根據表達式進行匹配，而非根據值和參數匹配時，導引就顯得非常有用。如果你對函數式編程非常熟悉，那麼你很可能已經使用過導引。
爲了儘可能地保留CSS的可聲明性，LESS通過導引混合而非if/else語句來實現條件判斷，因爲前者已在@media query特性中被定義。
以此例做爲開始：
.mixin (@a) when (lightness(@a) >= 50%) {
background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
background-color: white;
}
.mixin (@a) {
color: @a;
}
when關鍵字用以定義一個導引序列(此例只有一個導引)。接下來我們運行下列代碼：
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
就會得到：
.class1 {
background-color: black;
color: #ddd;
}
.class2 {
background-color: white;
color: #555;
}
導引中可用的全部比較運算有： > >= = =< <。此外，關鍵字true只表示布爾真值，下面兩個混合是相同的：
.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }
除去關鍵字true以外的值都被視示布爾假：
.class {
.truth(40); // Will not match any of the above definitions.
}
導引序列使用逗號‘,’—分割，當且僅當所有條件都符合時，纔會被視爲匹配成功。
.mixin (@a) when (@a > 10), (@a < -10) { ... }
導引可以無參數，也可以對參數進行比較運算：
@media: mobile;
.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }
.max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }
最後，如果想基於值的類型進行匹配，我們就可以使用is*函式：
.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
.mixin (@a, @b: black) when (iscolor(@b)) { ... }
下面就是常見的檢測函式：
iscolor
isnumber
isstring
iskeyword
isurl
如果你想判斷一個值是純數字，還是某個單位量，可以使用下列函式：
ispixel
ispercentage
isem
最後再補充一點，在導引序列中可以使用and關鍵字實現與條件：
.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
使用not關鍵字實現或條件
.mixin (@b) when not (@b > 0) { ... }
- arguments變量
@arguments包含了所有傳遞進來的參數. 如果你不想單獨處理每一個參數的話就可以像這樣寫:
.border(@w:10px,@style:solid,@c:deeppink){
border: @arguments;
}
less運算
任何數字、顏色或者變量都可以參與運算
在less中可以進行加減乘除的運算
括號也同樣允許使用
Color 函數 //有對應的API
Math 函數:
round(1.67); //四捨五入 returns `2`
ceil(2.4); // returns `3`
floor(2.6); // returns `2`
percentage(0.5); // returns `50%`
less避免編譯 css中cacl()用來計算
有時候我們需要輸出一些不正確的CSS語法或者使用一些 LESS不認識的專有語法.
要輸出這樣的值我們可以在字符串前加上一個 ~, 例如:
.class {
filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}
我們可以將要避免編譯的值用 “”包含起來，輸出結果爲:
.class {
filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}
less繼承
性能比混合高
靈活度比混合低
extend(繼承的類 all)
// less
.common:hover{
background: pink;
}
.common{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.juzhong(@w:100px,@h:100px,@c:pink){
&:extend(.common all);
width: @w;
height: @h;
background: @c;
}
#box1{
.juzhong();
z-index: 1;
}
// 編譯爲css後
.common:hover{
background: pink;
}
.common{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.juzhong(@w:100px,@h:100px,@c:pink){
&:extend(.common all);
width: @w;
height: @h;
background: @c;
}
#box1{
.juzhong();
z-index: 1;
}
命名空間
有時候，你可能爲了更好組織CSS或者單純是爲了更好的封裝，將一些變量或者混合模塊打包起來,
你可以像下面這樣在#bundle中定義一些屬性集之後可以重複使用:
#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;
}
混合與繼承區別
混合:
定義：就是將一系列屬性從一個規則集引入到另一個規則集的方式，
任何 CSS class, id 或者 元素 屬性集都可以以同樣的方式引入。
參數：參數可帶可不帶。
編譯後：編譯後相當於ctrl c +ctrl v
繼承不能帶參數，性能比混合高，靈活度比混合低。
編譯後再css中會將選擇器組合在一起，代碼減少。
JavaScript 表達式
慎用，測試報錯
JavaScript 表達式也可以在.less 文件中使用. 可以通過反引號的方式使用:
@var: `"hello".toUpperCase() + '!'`;
輸出:
@var: "HELLO!";
注意你也可以同時使用字符串插值和避免編譯:
@str: "hello";
@var: ~`"@{str}".toUpperCase() + '!'`;
輸出:
@var: HELLO!;
它也可以訪問JavaScript環境:
@height: `document.body.clientHeight`;
如果你想將一個JavaScript字符串解析成16進制的顏色值, 你可以使用 color 函數:
@color: color(`window.colors.baseColor`);
@darkcolor: darken(@color, 10%);