less的基础入门学习笔记，less基础教程

编译工具

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

1、注释

@charset utf-8;

/*====注释=====*/
//不被编译的注释
/*会被编译的注释*/

2、变量

/*====变量=====*/

在编译时候变量不会显示出来，引用时才会显示，变量也有局部变量和全局变量，在规格内定义的变量，其他规则不能访问

less code：

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

编译后的css code

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

3、混合

混合分基本混合，和带参数的混合
/*====混合=====*/

less code

@border1px:1px solid;
.red{color:red;}
a{
    border:@border1px;
    border-color:#ddd;
    .red;
}

编译后css code

a{
    border:1px solid;
    border-color:#ddd;
    color:red
}

//混合可带参数,无默认值的在引用时一定要传参不然编译报错

less code

.bdr(@num){
    -webkit-border-radius:@num;
    -moz-border-radius:@num;
    border-radius:@num;
}
.box{.bdr(5px);}

编译后css code

.box{
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}

//混合-参数带默认值,多个参数逗号隔开

less code

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

编译后css code

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

4.匹配模式

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

//匹配模式- 定位案例
//@_这个是固定格式，如果规则中有@_那么@_所在规则里的内容不管是否匹配唱功都会默认被编译输出，但是必须注意如果匹配规则中有其他的参数，在@_所在规则中也必须加上其他相应的参数，如下面案例中参数写全为(@_,@width:200px)

less code

.pos(relative,@width:200px){
    position:relative;
    width:@width;
}
.pos(abslute,@width:200px){
    position:abslute;
    width:@width;
}
.pos(fixed,@width:200px){
    position:fixed;
    width:@width;
}
.pos(@_,@width:200px){
    height:200px;
} .box{.pos(relative)}

编译后css code

.box{
    position:relative;
    width:200px;
    height:200px;
}

5、运算

/*====运算=====*/

可以进行加减乘除运算

less code

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

编译后css code

.box2 {
  width: 580px;
}

6、嵌套规则

/*====嵌套规则=====*/

//注意：嵌套规则&代表上一层

less code

li{
    background:#333;
    a{
        color:#999;
        &:hover{
            color:#000;
        }
    }
    &.lf{float:left}
}

编译后css code

li {
  background: #333;
}
li a {
  color: #999;
}
li a:hover {
  color: #000;
}
li.lf {
  float: left;
}
li {
  background: #333;
}
li a {
  color: #999;
}

7、arguments

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

//说明 arguments代表所有的参数，不用挨个一一书写

less code

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

编译后css code

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

8、避免编译

/*====避免编译=====*/

// ~’ ‘  在一下案例中，如果没有用~’ ‘包裹起来，会被编译成width:calc(270px) ;，如果不用~和引号包裹起来，编译可能会出错

less code

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

编译后css code

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

常用函数

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/