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/