сбросить определенные значения с помощью COMPASS/SASS

Предположим, у меня есть следующий класс

.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;
}

?

Я знаю, что могу написать этот миксин самостоятельно, но я хочу, чтобы он был как можно более общим, и было бы хорошо, если бы он уже был в COMPASS.


sass compass compass-sass
person smnbbrv    schedule 06.08.2015    source источник
comment
Вы можете написать это, но поскольку значения сброса различаются в зависимости от атрибута, это немного громоздко.   -  person somethinghere    schedule 06.08.2015
comment
@somethinghere это точно мое последнее предложение :)   -  person smnbbrv    schedule 06.08.2015
comment
разве в sass нет некоторых под названием !default..? Я не уверен, но я думаю, что они могут помочь вам решить эту проблему.   -  person somethinghere    schedule 06.08.2015
comment
Возможные дубликаты: stackoverflow.com/questions/18320847 / или stackoverflow.com/questions/12505378/   -  person cimmanon    schedule 06.08.2015

Ответы (1)


arrow_upward
2
arrow_downward

Кажется, что компас не предлагает сброс из коробки, но вот один очень простой миксин сброса, который просто выбирает значения css по умолчанию из список.

// 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 : '\201C' '\201D' '\2018' '\2019',
    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
);
person ronkot    schedule 12.08.2015