Question

我有以下的SCSS混合体,我大概会写出太多的多余:

@mixin radius($topleft, $topright: $topleft, $bottomright: $topleft, $bottomleft: $topleft) {

    -moz-border-radius-topleft:     $topleft;
    -moz-border-radius-topright:    $topright;
    -moz-border-radius-bottomright: $bottomright;
    -moz-border-radius-bottomleft:  $bottomleft;
    -webkit-border-radius:          $topleft $topright $bottomright $bottomleft;
    border-radius:                  $topleft $topright $bottomright $bottomleft;

}

指出这些论点可以具有单一价值,适用于所有方面,或所有4个用于定制。

Answer 1

您可将前四行合并为:

-moz-border-radius: $topleft $topright $bottomright $bottomleft;

除此之外,如果你想要保留能够确定不同优势的单独价值观并保持你的法典相互兼容的选项,那么,你再也无法减少法典。

<代码>moz-borer-radius

-moz-border-radius: { { length | percentage }  1 to 4 values | inherit } ;

Answer 2

我同意你使用

@import "compass/css3";
@include border-radius(3px);

Answer 3

你可以明确地通过这样的价值观:

@mixin radius($radius) {

-webkit-border-radius: $radius;
border-radius: $radius;
}

类似的论点

.selector {
    @include radius(0 0 5px 5px);
}

Cheers!

Answer 4

如果你利用一名任务执行人(如贪 gr)把你的as子档案转换成 c子,你可以使用汽车设计师添加所有供应商的具体标签。

https://github.com/nDmitry/grunt-autoprefixer”rel=“nofollow”>https://github.com/nDmitry/grunt-autoprefixer

这样,你就能够摆脱混合,只写你想要的边境线。

border-radius: 3px 6px 6px 3px

而这种微薄的东西会把它改换给你,而你最终将产出与你的组合相同。

友情链接