标签:relative osi 编译 otto style 一个 模式 Fix idt
相当于JS中的if(不完全是),满足条件后才能匹配
.margin(top, @width: 5px) { margin: @width 0 0 0; } .margin(right, @width: 5px) { margin: 0 @width 0 0; } .margin(bottom, @width: 5px) { margin: 0 0 @width 0; } .margin(left, @width: 5px) { margin: 0 0 0 @width; } .box { width: 200px; height: 200px; .margin(left);// 括号里面写left就会执行上面left的代码 border: 1px solid red; }
编译成css
.box { width: 200px; height: 200px; margin: 0 0 0 5px; border: 1px solid red }
在来一个例子:
.pos(r) { position: relative } .pos(a) { position: absolute; } .pos(f) { position: fixed; } .box { width: 200px; height: 200px; border: 1px solid red; .pos(r); }
编译成css
.box { width: 200px; height: 200px; border: 1px solid red; position: relative; }
@_ 代表不管选择的是谁都带上这个样式
.margin(top, @width: 5px) { margin: @width 0 0 0; } .margin(right, @width: 5px) { margin: 0 @width 0 0; } .margin(bottom, @width: 5px) { margin: 0 0 @width 0; } .margin(left, @width: 5px) { margin: 0 0 0 @width; } .margin(@_,@width: 5px) { width: 200px; height: 200px; border: 1px solid red; } .box { .margin(left, 10px); }
编译成css
.box { margin: 0 0 0 10px; width: 200px; height: 200px; border: 1px solid red; }
标签:relative osi 编译 otto style 一个 模式 Fix idt
原文地址:https://www.cnblogs.com/qjuly/p/9136458.html