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/