less（二） less的变量和注释

短命女 2022-05-25 23:10 429阅读 0赞

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

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

less 的注释

/\*这是第一种注释\*/

//这是第二种注释

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

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

less 的变量

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

![70][]

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;

[70]: /images/20220526/105371257db74340be719d4fa94d4b82.png

less（二） less的变量和注释

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Less预处理——变量和嵌套

相关 oracle中的less和more,less命令

相关 vue lang=“less“ less

相关 less笔记-变量

相关 LESS详解之变量(@)

相关 less-变量

相关 less-高级参数和@reset变量

相关 less（二） less的变量和注释

相关 less （一） less 的环境

相关 less中的注释、less中的公共变量怎么写、变量延迟加载