less的嵌套
less支持嵌套,而且习惯上使用嵌套时使用缩进。但是嵌套的语法还是使用{}
,而不是缩进。所以下面的写法是错误的。
.classA {
display: block;
}
.classB {
display: none;
}
//生成的css如下
.classA {
display: block;
}
.classB {
display: none;
}
正确的写法是
.classA {
display: block;
.classB {
display: none;
}
}
//生成的css如下
.classA {
display: block;
}
.classA .classB {
display: none;
}
串联选择器
默认情况下less嵌套生成的是后代选择器。如果要生成串联选择器,一定记得要在前面加上&
符号。这对伪类尤其有用如 :hover
和 :focus
。这点我搞错了好几次。例如:
.button{
background-color: #aaa;
:hover{ //实际上是对所有的页面元素的hover进行了设置
background-color: #ccc;
}
}
//生成的css如下:
.button {
background-color: #aaa;
}
.button :hover {
background-color: #ccc;
}
正确的写法是:
.button{
background-color: #aaa;
&:hover{
background-color: #ccc;
}
}
//生成的css如下:
.button {
background-color: #aaa;
}
.button:hover {
background-color: #ccc;
}
可以使用less直接计算像素
开始我以为要使用变量,计算好数值以后,再拼上px
来生成像素属性。折腾了半天,语法还不太对。其实less是可以方便的直接计算像素属性的。例如:
@w : 100px;
.classA {
width: @w;
height: @w/2;
margin-left: -@w/10;
}
//生成的css如下
.classA {
width: 100px;
height: 50px;
margin-left: -10px;
}
less还把这个特性进一步深入,支持一些HSL的颜色操作函数。如:lighten/darken/saturate/desaturate/fadein/fadeout/spin
less样式文件一定要在引入less.js前先引入
如果你现在在浏览器里生成css,除了引入.less文件的时候要设置rel属性设置为stylesheet/less
,记住紧接着要加载less.js
。
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>