less的基礎入門學習筆記，less基礎教程

編譯工具

koala：http://koala-app.com/index-zh.html

1、註釋

@charset utf-8;

/*====註釋=====*/
//不被編譯的註釋
/*會被編譯的註釋*/

2、變量

/*====變量=====*/

在編譯時候變量不會顯示出來，引用時纔會顯示，變量也有局部變量和全局變量，在規格內定義的變量，其他規則不能訪問

less code：

1. @width100:100px;
2. @height100:100px;
3. .box{width:@width100;height:@height100;}

編譯後的css code

1. .box{width:100px;height:100px;}

3、混合

混合分基本混合，和帶參數的混合
/*====混合=====*/

less code

1. @border1px:1px solid;
2. .red{color:red;}
3. a{
4. border:@border1px;
5. border-color:#ddd;
6. .red;
7. }

編譯後css code

1. a{
2. border:1px solid;
3. border-color:#ddd;
4. color:red
5. }

//混合可帶參數,無默認值的在引用時一定要傳參不然編譯報錯

less code

1. .bdr(@num){
2. -webkit-border-radius:@num;
3. -moz-border-radius:@num;
4. border-radius:@num;
5. }
6. .box{.bdr(5px);}

編譯後css code

1. .box{
2. -webkit-border-radius:5px;
3. -moz-border-radius:5px;
4. border-radius:5px;
5. }

//混合-參數帶默認值,多個參數逗號隔開

less code

1. .box1(@width:100px,@height:201px){
2. width:@width;
3. height:@height;
4. border:1px solid #999;
5. }
6. .box2{.box1();}

編譯後css code

1. .box2{
2. width:100px;
3. height:201px;
4. border:1px solid #999;
5. }

4.匹配模式

/*====匹配模式=====*/

//匹配模式- 定位案例
//@_這個是固定格式，如果規則中有@_那麼@_所在規則裏的內容不管是否匹配唱功都會默認被編譯輸出，但是必須注意如果匹配規則中有其他的參數，在@_所在規則中也必須加上其他相應的參數，如下面案例中參數寫全爲(@_,@width:200px)

less code

1. .pos(relative,@width:200px){
2. position:relative;
3. width:@width;
4. }
5. .pos(abslute,@width:200px){
6. position:abslute;
7. width:@width;
8. }
9. .pos(fixed,@width:200px){
10. position:fixed;
11. width:@width;
12. }
13. .pos(@_,@width:200px){
14. height:200px;
15. } .box{.pos(relative)}

編譯後css code

1. .box{
2. position:relative;
3. width:200px;
4. height:200px;
5. }

5、運算

/*====運算=====*/

可以進行加減乘除運算

less code

1. @width300px:300px;
2. .box2{width:@width300px*2-20;}

編譯後css code

1. .box2 {
2. width: 580px;
3. }

6、嵌套規則

/*====嵌套規則=====*/

//注意：嵌套規則&代表上一層

less code

1. li{
2. background:#333;
3. a{
4. color:#999;
5. &:hover{
6. color:#000;
7. }
8. }
9. &.lf{float:left}
10. }

編譯後css code

1. li {
2. background: #333;
3. }
4. li a {
5. color: #999;
6. }
7. li a:hover {
8. color: #000;
9. }
10. li.lf {
11. float: left;
12. }
13. li {
14. background: #333;
15. }
16. li a {
17. color: #999;
18. }

7、arguments

/*====arguments=====*/

//說明 arguments代表所有的參數，不用挨個一一書寫

less code

1. .boxShaDow(@x:2px,@y:2px,@spread:5px,@color:#999){
2. box-shadow:@arguments;
3. }
4. .box5{
5. .boxShaDow();
6. }

編譯後css code

1. .box5 {
2. box-shadow: 2px 2px 5px #999999;
3. }

8、避免編譯

/*====避免編譯=====*/

// ~’ ‘  在一下案例中，如果沒有用~’ ‘包裹起來，會被編譯成width:calc(270px) ;，如果不用~和引號包裹起來，編譯可能會出錯

less code

1. .box6{
2. width:~'calc(300px-30px)' !important;
3. top: ~"expression(eval(document.documentElement.scrollTop+10));"
4. }

編譯後css code

1. .box6{
2. width:calc(300px-30px) !important;
3. top: expression(eval(document.documentElement.scrollTop+10));
4. }

常用函數

Color 函數

LESS 提供了一系列的顏色運算函數. 顏色會先被轉化成 HSL 色彩空間, 然後在通道級別操作:
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
fade(@color, 50%);        // return @color with 50% transparency
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
mix(@color1, @color2);    // return a mix of @color1 and @color2

使用起來相當簡單:
@base: #f04615;
.class {
  color: saturate(@base, 5%);
  background-color: lighten(spin(@base, 8), 25%);
}

你還可以提取顏色信息:
hue(@color);        // returns the `hue` channel of @color
saturation(@color); // returns the `saturation` channel of @color
lightness(@color);  // returns the ‘lightness’ channel of @color

如果你想在一種顏色的通道上創建另一種顏色，這些函數就顯得那麼的好用，例如:
@new: hsl(hue(@old), 45%, 90%);
@new 將會保持 @old的 色調, 但是具有不同的飽和度和亮度.

Math 函數

LESS提供了一組方便的數學函數，你可以使用它們處理一些數字類型的值:
round(1.67); // returns `2`
ceil(2.4);   // returns `3`
floor(2.6);  // returns `2`

如果你想將一個值轉化爲百分比，你可以使用percentage 函數:
percentage(0.5); // returns `50%`

更多其他函數

地址：http://less.bootcss.com/functions/

其他參考資料：

http://www.w3cplus.com/css/less

http://www.bootcss.com/p/lesscss/