LESS的一点自己的理解(1)

时间:2023-02-04 05:58:29

  写前端的时间也不短了,Less也用过几次,都是现学现用,没有仔细的梳理过,今天就有条理的梳理下。参考文章是一篇不错的哦。下面会附上链接的,废话不多说,开始正题。

  首先应该说下什么是Less,Less是一种动态的样式表达式,为CSS加入程序式语言的特性。简单来说就是让CSS像JS一样等其他编程语言一样,有变量作用域,使CSS更能符合程序猿的思想。先看一个最简单的例子。

LESS:

@color: #008CEE; 

 #nav {
color: @color;
}
p {
color: @color;
} 编译完成后就是
 #nav {
color:#008CEE
; }
p {
color: #008CEE
}

这里就是简单的定义了一个变量,这个变量就代表了#008CEE这个颜色,从中我们可以看出来,LESS定义变量是用“@”这个符号,就和js中的var差不多。

这里可能就有人问了,定义了一个变量,也没看出来有多简单,反而代码量增加了,为什么要这么做呢,如果你有这样的疑问,那说明你在前端的时间还不是很长啊,如果定义的是我们的主题色,那在接下来的CSS代码中可定是不会只用一两次的,当你们的UI或者产品想换一种颜色的时候,呵呵哒。你可以用编辑器全部替换,但是定义一个颜色不是更好吗?

  2.既然LESS有了变量的定义,那就不能不提到作用域的问题请看一下代码

@color: red;
#homeDiv {
@color : #008CEE;
#centerDiv {
color: @color; // 此处应该取最近定义的变量 color 的值 #008CEE
}
} #leftDiv {
color: @color; // 此处应该取最上面定义的变量 color 的值 red
}

在这里就非常明白的看出来了作用域的概念了,就是最简单的懒查找,先找自己这一层级,没有就找上一层级,如果还没有继续往上找。

  3.LESS中不仅能简单的定义一个变量,也可以把写好的CSS封装成一个整体,然后在其他的地方调用。

 .rounded-corners (@radius: 5px) {//这里用“.”定义这个整体的,在 LESS 中,混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS,就像在当前 CLASS 中增加一个属性一样。
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}

()中间可以认为是形参,如果不传值那就默认的是原来的数值。编译完成后的CSS文件是:

 #header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

这种方法的使用也有人称为Mixins(混入),就跟咱们自己定义的函数一样,在哪里调用都可以。后面还有一些内容,等下次再发