混合 (mixin) 变量
- .border{
- border: 5px solid pink;
- }
- .box{
- width: 300px;height:300px;
- .border;
- }
- =>
- .border {
- border: 5px solid pink;
- }
- .box {
- width: 300px;
- height: 300px;
- border: 5px solid pink;
- }
这个就叫做混合, 在 box 里面有一段跟 border 的样式, 把 border 直接拿过来就可以
比如一个场景, 两个 div 很像, 只有唯一一行的样式的不一样的情况
- .box{
- width: 300px;
- height:300px;
- border:1px solid #abcdef;
- }
- .box2{
- .box;
- margin-left: 100px;
- }
- =>
- .box {
- width: 300px;
- height: 300px;
- border: 1px solid #abcdef;
- }
- .box2 {
- width: 300px;
- height: 300px;
- border: 1px solid #abcdef;
- margin-left: 100px;
- }
像这种重用的样式, 直接拿过来
可带参数带混合
- .border(@border_width){
- border:@border_width solid pink;
- }
- .test_2{
- .border(30px)
- }
- =>
- .test_2 {
- border: 30px solid #ffc0cb;
- }
可带参数时的默认值
- .border(@border_width:10px){
- border:@border_width solid pink;
- }
- .test{
- .border()
- }
- .test2{
- .border(20px)
- }
- =>
- .test {
- border: 10px solid #ffc0cb;
- }
- .test2 {
- border: 20px solid #ffc0cb;
- }
没默认值是不带值会报错
这个有什么好处, 比如做一些兼容的时候
- .border_radius(@rds:5px){
- -webkit-border-radius:@rds;
- -moz-border-radius:@rds;
- border-radius: @rds;
- }
- .radius_test{
- width: 100px;
- height: 40px;
- background-color:pink;
- .border_radius();
- }
- =>
- .radius_test {
- width: 100px;
- height: 40px;
- -color: pink;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- border-radius: 5px;
- }
来源: http://www.bubuko.com/infodetail-2685802.html