上篇中，我们简单了解了less的使用环境和怎么使用less;
下面我们了解一下less 的变量和注释
less 的注释
/*这是第一种注释*/
//这是第二种注释
上面的第一种注释麻烦一点，但是当我们的less文件编译成css文件后，css文件中注释依然存在；
相反的第二种注释简单一点，但是编译成css 文件后，css 文件中是没有注释的；
less 的变量
在前一篇中，我们已经使用了变量，但是没有详细说明，现在重新认识一下变量：
style.less文件：
//@bg-color 的意思是定义一个变量bg-color
#ffccdd;
body{
//设置背景颜色为上面的变量
background-color:@bg-color;
}
//假设我们定义了div，那么可以使用上面这个变量给div设置背景颜色
div{
background-color:@bg-color;
}
从上面可以看出，定义一个变量使用 ：@变量名 ，例如
#ffccdd;
然后在其它的地方都可以使用这个@text-color 变量
上面定义的是颜色的变量的形式，下面看看带单位的长度如何使用变量：（less文件）
//@bg-color 的意思是定义一个变量bg-color
#ffccdd;
100;
#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
#ffccdd;
100.1;
#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
#ffccdd;
100.1;
#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
#ffccdd;
100.1;
#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
#ffccdd;
0.5;
#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
#ffccdd;
-100;
#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;
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
