link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
注意你的less样式文件一定要在引入less.js前先引入
$ npm install less
变量:
@color: #4D926F;
#header { color: @color;}
h2 { color: @color;}
嵌套规则:
#header {
h1 { font-size: 26px; font-weight: bold; }
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
/* 生成的 CSS */
#header h1 { font-size: 26px; font-weight: bold;}
#header p { font-size: 12px;}
#header p a { text-decoration: none;}
#header p a:hover { border-width: 1px;}
&符号代替父级元素
注意 & 符号的使用—如果你想写串联选择器,而不是写后代选择器,就可以用到&了. 这点对伪类尤其有用如 :hover 和 :focus
.bordered {
&.float { float: left; }
.top { margin: 5px; }
}
输出:
.bordered.float { float: left; }
.bordered .top { margin: 5px;}