lesscss 初学注意事项

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>

参考文档