如何在莫代爾筆芯中替代波本威士忌？

Question

我正在使用Bourbon modal reset。它的關閉按鈕具有以下樣式：

.modal-close { 
    @include position(absolute, ($modal-padding /2) ($modal-padding /2) null null); 
    @include size(1.5em); 
    background: $modal-background; 
    cursor: pointer; 

    &:after, 
    &:before { 
     @include position(absolute, 3px 3px 0 50%); 
     @include transform(rotate(45deg)); 
     @include size(0.15em 1.5em); 
     background: $modal-close-color; 
     content: ''; 
     display: block; 
     margin: -3px 0 0 -1px; 
    } 

    &:hover:after, 
    &:hover:before { 
     background: darken($modal-close-color, 10%); 
    } 

    &:before { 
     @include transform(rotate(-45deg)); 
    } 
    } 

這使它看起來像一個灰色×在模態的右上角。但是，我想將其更改爲看起來像「保存並關閉」按鈕。我想知道覆蓋這些風格的最好方法是什麼。在像margin這樣的屬性上，我可以簡單地將其設置爲任何我想要的。但在@include position(....);，我不知道如何將其重置爲none，initial或unset。做這樣的事情最好的方法是什麼？我不想簡單地刪除原始替換文件中的屬性;我想保留一個單獨的_modalOverride.scss，所以我可以將它包括在我想要的位置，但要保持原文的完整。我如何覆蓋這些「自定義」@include屬性？

Answer 1

筆芯被設計成被覆蓋，所以我只是做以下的HTML：

... 
<div class="modal-close" for="modal-1">Close and Save</div> 
... 

，爲SCSS：

... 
.modal-close { 
    @include position(absolute, ($modal-padding /2) ($modal-padding /2) null null); 
    @include size(8em 1.5em); 
    background: tomato; 
    cursor: pointer; 
} 
... 

但是，如果你想要做一個覆蓋文件它可能有點棘手。你可以在modal.scss之後的文件中做這樣的事情：

.modal-close { 
    position: inherit; 

    &:after, 
    &:before { 
    background: transparent; 
    } 

    &:hover:after, 
    &:hover:before { 
    background: transparent; 
    } 
}