<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/less">
/*
less的混合使用
情景一:直接使用在一个选择器中引用另一个选择器(class和id),从而把样式引用过去。
*/
.myh2{
color: blue;
}
#block1{
.myh2
}
#block2{
.myh2
}
/*
情景二:我们可以把被引入的选择器(class 和 id)作为规则使用,只要在选择器名后加入括号。
*/
#myblock(){
position: absolute;
background-color: yellow;
}
#block1{
#myblock
}
#block2{
left: 300px;
#myblock
}
/*
情景三:带参数使用混合选择器。
*/
//默认为100
#myblock2(@size:100px){
width:@size
}
#block1{
#myblock2
}
#block2{
#myblock2(200px)
}
</style>
</head>
<body>
<h2 class="myh2">h2</h2>
<div id="block1">
block1
</div>
<div id="block2">
block2
</div>
<script type="text/javascript" src="js/es5-shim.js"></script>
<script type="text/javascript" src="js/less.min.js"></script>
<script type="text/javascript">
less.watch();
</script>
</body>
</html>
转载于:https://blog.51cto.com/quietnight/1754389