我可以使用sass爲關鍵幀中的元素指定ID以減少CSS嗎？

我敢肯定，這是一個新手問題，但我最近剛剛開始在我的項目中實現sass，我想知道是否有更容易/更有效的方法來使此代碼使用sass發生 - 謝謝你的幫助：）。我可以使用sass爲關鍵幀中的元素指定ID以減少CSS嗎？

我想分組，這樣我就可以通過ID來標識100％關鍵幀的寬度，而不是重寫動畫線和每個關鍵幀的關鍵幀。

span.underline { 
    display:block; 
    width:calc(100% - 130px); 
    height:2px; 
    background-color:transparent; 
    position:absolute; 
    left:41px; 
} 

#topNav .dropdown-menu>li>a:hover > span.underline#acctInfo { 
    animation: acctInfo 0.3s ease-out forwards; 
    background: #FFF; 
} 

@keyframes acctInfo { 
    0% { 
    width:0; 
    } 
    100% { 
    width:calc(100% - 130px); 
    } 
} 

#topNav .dropdown-menu>li>a:hover > span.underline#replenish { 
    animation: replenish 0.3s ease-out forwards; 
    background: #FFF; 
} 

@keyframes replenish { 
    0% { 
    width:0; 
    } 
    100% { 
    width:calc(100% - 60px); 
    } 
} 

#topNav .navbar-nav>li>a:hover > span.underline#more { 
    animation: more 0.3s ease-out forwards; 
    background: #FFF; 
} 

@keyframes more { 
    0% { 
    width:0; 
    } 
    100% { 
    width:calc(100% - 65px); 
    } 
}

來源

2016-07-28 Kevin

這並不容易，我發現沒有辦法提取id選擇器。我已經實現的最多是一個mixin，我通過了id這個名字作爲參數。我也嘗試從$name變量id變量添加到mixin中，並且不需要在選擇器中寫入，但是我得到選擇器兩次（有和沒有id）。

SASS

@mixin animation($name) { 
    animation: $name 0.3s ease-out forwards; 
    @keyframes #{$name} { 
    0% { 
     width: 0; 
    } 
    100% { 
     @if $name=="replenish" { 
     width: calc(100% - 60px); 
     } 
     @else if $name=="more" { 
     width: calc(100% - 65px); 
     } 
    } 
    } 
} 

#topNav .dropdown-menu>li>a:hover > span.underline#replenish { 
    @include animation(replenish); 
    background: #FFF; 
} 

#topNav .dropdown-menu>li>a:hover > span.underline#more { 
    @include animation(more); 
    background: red; 
}

輸出

#topNav .dropdown-menu > li > a:hover > span.underline#replenish { 
    animation: replenish 0.3s ease-out forwards; 
    background: #FFF; 
} 
@keyframes replenish { 
    0% { 
    width: 0; 
    } 
    100% { 
    width: calc(100% - 60px); 
    } 
} 
#topNav .dropdown-menu > li > a:hover > span.underline#more { 
    animation: more 0.3s ease-out forwards; 
    background: red; 
} 
@keyframes more { 
    0% { 
    width: 0; 
    } 
    100% { 
    width: calc(100% - 65px); 
    } 
}

來源

2016-07-29 11:10:36 blonfu

大廈blonfu建議什麼，就個人而言，我會添加第二個參數的寬度值，這樣就可以重複使用的mixin而不必創建更多的if/else情況：

@mixin animation($name, $width) { 
    animation: $name 0.3s ease-out forwards; 

    @keyframes #{$name} { 
    0% { 
     width: 0; 
    } 
    100% { 
     width: calc(100% - $width); 
    } 
    } 

}

來源

2016-08-01 07:09:52 dommmm

我可以使用sass爲關鍵幀中的元素指定ID以減少CSS嗎？

回答

相關問題