上篇中,我们简单了解了less的使用环境和怎么使用less;
下面我们了解一下less 的变量和注释
less 的注释
//这是第二种注释
上面的第一种注释麻烦一点,但是当我们的less文件编译成css文件后,css文件中注释依然存在;
相反的第二种注释简单一点,但是编译成css 文件后,css 文件中是没有注释的;
less 的变量
在前一篇中,我们已经使用了变量,但是没有详细说明,现在重新认识一下变量:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIwczLcVmds92czlGZvwVP9EUTDZ0aRJkSwk0LcxGbpZ2LcBDM08CXlpXazRnbvZ2LcRlMMVDT2EWNvwFdu9mZvwVeWd0Yy4kMMBjVtJWd0ckW65UbM5WOHJWa5kHT20ESjBjUIF2LcRHelR3LcJzLctmch1mclRXY39TO4UzM1MDM3EDMyQDM4EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
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; }