less(二) less的变量和注释

上篇中,我们简单了解了less的使用环境和怎么使用less;

下面我们了解一下less 的变量和注释


less 的注释


/*这是第一种注释*/

//这是第二种注释

        上面的第一种注释麻烦一点,但是当我们的less文件编译成css文件后,css文件中注释依然存在;

         相反的第二种注释简单一点,但是编译成css 文件后,css 文件中是没有注释的;


less 的变量

在前一篇中,我们已经使用了变量,但是没有详细说明,现在重新认识一下变量:

less(二) less的变量和注释


style.less文件:

//@bg-color 的意思是定义一个变量bg-color
@bg-color:#ffccdd;

body{
//设置背景颜色为上面的变量
background-color:@bg-color;
}

//假设我们定义了div,那么可以使用上面这个变量给div设置背景颜色
div{
background-color:@bg-color;
}


从上面可以看出,定义一个变量使用 :@变量名  ,例如  


@text-color:#ffccdd;

然后在其它的地方都可以使用这个@text-color 变量


上面定义的是颜色的变量的形式,下面看看带单位的长度如何使用变量:(less文件)

//@bg-color 的意思是定义一个变量bg-color
@bg-color:#ffccdd;
@div-len:100;
@div-bg:#ff00dd;

// 变量之颜色的使用
body{
//设置背景颜色为上面的变量
background-color:@bg-color;
}

// 变量的长度单位的使用
//使用unit() 函数,第一个参数是上面我们定义的变量,第二个参数是单位
div{
width:unit(@div-len,px);
height:unit(@div-len,px);
background-color:@div-bg;
}

上面使用长度的时候,使用了 unit() 这个函数,

下面看看其它的常用的函数

  ceil( )函数,向上取整;

//@bg-color 的意思是定义一个变量bg-color
@bg-color:#ffccdd;
@div-len:100.1;
@div-bg:#ff00dd;

// 变量之颜色的使用
body{
//设置背景颜色为上面的变量
background-color:@bg-color;
}

// 变量的长度单位的使用
//使用unit() 函数,第一个参数是上面我们定义的变量,第二个参数是单位
//使用ceil() 函数,向上取整,把100.1变成101
div{
width:unit(ceil(@div-len),px);
height:unit(ceil(@div-len),px);
background-color:@div-bg;
}



  floor函数 ,向下取整 ;

//@bg-color 的意思是定义一个变量bg-color
@bg-color:#ffccdd;
@div-len:100.1;
@div-bg:#ff00dd;

// 变量之颜色的使用
body{
//设置背景颜色为上面的变量
background-color:@bg-color;
}

// 变量的长度单位的使用
//使用unit() 函数,第一个参数是上面我们定义的变量,第二个参数是单位
//使用floor() 函数,向下取整,把100.1变成100
div{
width:unit(floor(@div-len),px);
height:unit(floor(@div-len),px);
background-color:@div-bg;
}



  round( )函数,四舍五入;

//@bg-color 的意思是定义一个变量bg-color
@bg-color:#ffccdd;
@div-len:100.1;
@div-bg:#ff00dd;

// 变量之颜色的使用
body{
//设置背景颜色为上面的变量
background-color:@bg-color;
}

// 变量的长度单位的使用
//使用unit() 函数,第一个参数是上面我们定义的变量,第二个参数是单位
//使用round() 函数,四舍五入,把100.1变成100
div{
width:unit(round(@div-len),px);
height:unit(round(@div-len),px);
background-color:@div-bg;
}



  percentage()函数,百分比;

//@bg-color 的意思是定义一个变量bg-color
@bg-color:#ffccdd;
@div-len:0.5;
@div-bg:#ff00dd;

// 变量之颜色的使用
body{
//设置背景颜色为上面的变量
background-color:@bg-color;
}

// 变量的长度单位的使用
//使用unit() 函数,第一个参数是上面我们定义的变量,第二个参数是单位
//使用percentage() 函数,百分比,把0.5 变成50%
div{
width:percentage(@div-len);
height:percentage(@div-len);
background-color:@div-bg;
}



  abs( )函数,绝对值;

//@bg-color 的意思是定义一个变量bg-color
@bg-color:#ffccdd;
@div-len:-100;
@div-bg:#ff00dd;

// 变量之颜色的使用
body{
//设置背景颜色为上面的变量
background-color:@bg-color;
}

// 变量的长度单位的使用
//使用unit() 函数,第一个参数是上面我们定义的变量,第二个参数是单位
//使用abs() 函数,取绝对值,把-100变成100
div{
width:unit(abs(@div-len),px);
height:unit(abs(@div-len),px);
background-color:@div-bg;
}