使用 COMPASS / SASS 重置特定值

Question

假设我有以下 class

.hello {
  border: 1px solid black;
  border-radius: 50%;
}

是否有可能在SASS/COMPASS中实现以下目标？

.hello.world {
  @include <some-reset-mixin-whatever>(border-bottom-left-radius, border-bottom-right-radius, border-bottom);
}

而不是

.hello.world {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}

?

我知道我可以自己编写这个 mixin，但我希望它尽可能通用，如果 COMPASS 已经有它就更好了。

Answer 1

Compass 似乎不提供开箱即用的重置功能，但这里有一个非常简单的重置混合插件，它只是从列表中选择 default css values。

// usage:
.some-element {
    @include reset(margin, border, transform, width, visibility);
}



@mixin reset($properties...) {
    @each $property in $properties {
        #{$property}: map-get($defaults, $property);
    }
}

$defaults: (
    animation : none,
    animation-delay : 0,
    animation-direction : normal,
    animation-duration : 0,
    animation-fill-mode : none,
    animation-iteration-count : 1,
    animation-name : none,
    animation-play-state : running,
    animation-timing-function : ease,
    backface-visibility : visible,
    background : 0,
    background-attachment : scroll,
    background-clip : border-box,
    background-color : transparent,
    background-image : none,
    background-origin : padding-box,
    background-position : 0 0,
    background-position-x : 0,
    background-position-y : 0,
    background-repeat : repeat,
    background-size : auto auto,
    border : 0,
    border-style : none,
    border-width : medium,
    border-color : inherit,
    border-bottom : 0,
    border-bottom-color : inherit,
    border-bottom-left-radius : 0,
    border-bottom-right-radius : 0,
    border-bottom-style : none,
    border-bottom-width : medium,
    border-collapse : separate,
    border-image : none,
    border-left : 0,
    border-left-color : inherit,
    border-left-style : none,
    border-left-width : medium,
    border-radius : 0,
    border-right : 0,
    border-right-color : inherit,
    border-right-style : none,
    border-right-width : medium,
    border-spacing : 0,
    border-top : 0,
    border-top-color : inherit,
    border-top-left-radius : 0,
    border-top-right-radius : 0,
    border-top-style : none,
    border-top-width : medium,
    bottom : auto,
    box-shadow : none,
    box-sizing : content-box,
    caption-side : top,
    clear : none,
    clip : auto,
    color : inherit,
    columns : auto,
    column-count : auto,
    column-fill : balance,
    column-gap : normal,
    column-rule : medium none currentColor,
    column-rule-color : currentColor,
    column-rule-style : none,
    column-rule-width : none,
    column-span : 1,
    column-width : auto,
    content : normal,
    counter-increment : none,
    counter-reset : none,
    cursor : auto,
    direction : ltr,
    display : inline,
    empty-cells : show,
    float : none,
    font : normal,
    font-family : inherit,
    font-size : medium,
    font-style : normal,
    font-variant : normal,
    font-weight : normal,
    height : auto,
    hyphens : none,
    left : auto,
    letter-spacing : normal,
    line-height : normal,
    list-style : none,
    list-style-image : none,
    list-style-position : outside,
    list-style-type : disc,
    margin : 0,
    margin-bottom : 0,
    margin-left : 0,
    margin-right : 0,
    margin-top : 0,
    max-height : none,
    max-width : none,
    min-height : 0,
    min-width : 0,
    opacity : 1,
    orphans : 0,
    outline : 0,
    outline-color : invert,
    outline-style : none,
    outline-width : medium,
    overflow : visible,
    overflow-x : visible,
    overflow-y : visible,
    padding : 0,
    padding-bottom : 0,
    padding-left : 0,
    padding-right : 0,
    padding-top : 0,
    page-break-after : auto,
    page-break-before : auto,
    page-break-inside : auto,
    perspective : none,
    perspective-origin : 50% 50%,
    position : static,
    quotes : '1C' '1D' '18' '19',
    right : auto,
    tab-size : 8,
    table-layout : auto,
    text-align : inherit,
    text-align-last : auto,
    text-decoration : none,
    text-decoration-color : inherit,
    text-decoration-line : none,
    text-decoration-style : solid,
    text-indent : 0,
    text-shadow : none,
    text-transform : none,
    top : auto,
    transform : none,
    transform-style : flat,
    transition : none,
    transition-delay : 0s,
    transition-duration : 0s,
    transition-property : none,
    transition-timing-function : ease,
    unicode-bidi : normal,
    vertical-align : baseline,
    visibility : visible,
    white-space : normal,
    widows : 0,
    width : auto,
    word-spacing : normal,
    z-index : auto
);

使用 COMPASS / SASS 重置特定值

reset particular values with COMPASS / SASS

sass

compass-sass

compass