Skip to content
1StepEngineer edited this page Aug 20, 2018 · 19 revisions
<div id="main">
  <div id="left"></div>
  <div id="right"></div>
</div>

嵌套

#main{background:red;
 #left{background:yellow;
   &:hover{background:gray;} /*** &的使用 ***/
   &.active{font-weight:700} /*** 只有在active前加上&才能实现 #left.active的效果 ***/
 }
 #right{background:green;}
}

变量

通过变量定义一系列通用样式,然后再其他地方调用该样式。作用:做全局样式。

@width:12;
@height:100px;
.border{
  width:@width*1px;
  height:@height;
}

@width:2px;
@style:'solid';
@color:'red';
.box{
 border:@width @style @color;
}

Clone this wiki locally