less 的父选择符&
在less里面父选择符***主要代表当前选择的元素本身***。主要是给伪类写样式的时候更加方便。
less代码是这样:
a{
color : skyblue;
& :hover{
color: lightgoldenrodyellow;
}
}
转换后的CSS代码是这样:
a {
color: skyblue;
}
a :hover {
color: lightgoldenrodyellow;
}
less 代码 和CSS代码在结构上稍微有些变化,可能刚入门时比较习惯CSS的写法,但是less结构明晰,代码的复用性比较高,尽管这个简单的例子体现不出less的优点,但也能看出less与css的不同。回到我们的问题当中,&(父选择符)在转换成CSS就是我们熟悉的父选择器的的用法了。
嵌套
我们从上面的例子从还可以看到less的一个特性。就是样式的代码是可以嵌套来写的。
这也可能是在开发中使用得最多的一种写法了
这个写法容易理解,也方便编写。
我们还是通过实例在了解less嵌套的用法:
html结构,这个结构就是嵌套
<ul>
<li>
<a href="#">链接1</a>
</li>
<li>