如何讓Sass mixin在基本級別聲明非嵌套選擇器？

對不起，在這個問題上的怪異語言，但我不知道如何更好地描述它。我希望這個例子清楚我想要什麼：如何讓Sass mixin在基本級別聲明非嵌套選擇器？

SCSS語法

.my-smug-selector { 
    @include my-smug-mixin(30px); 
}

所需的CSS-輸出

.my-smug-selector{ 
    // some styles 
} 

.another-smug-selector-on-base-lvl{ 
    // some other styles 
} 

.smug-non-nested-selector{ 
    // some other styles 
}

我一般興趣在此，而是解釋爲什麼在這個世界上我想這樣做：我想定義一個關鍵幀動畫，它被指定的選擇器使用，例如：

SCSS語法

.my-smug-selector { 
    @include my-smug-mixin($vars); 
}

所需的CSS-輸出

.my-smug-selector{ 
    animation: most-smugish-animation 5s; 
} 

@keyframes most-smugish-animation { 
    from {background:red;} 
    to {background:yellow;} 
}

來源

2014-01-21 hugo der hungrige

是否有試圖在這裏創建一個mixin的目的？在我看來，這個代碼的可重用性實際上是沒有用的。 – cimmanon

@cimmanon有。如果動畫不同並且取決於元素的特定屬性（如它的尺寸或背景位置），那麼對於每個元素的名稱，創建和運行動畫都很煩人。人們可以用變量來做到這一點，但這仍然可以是很多樣板代碼。 –

隨着薩斯3.3（目前仍在開發中），你可以寫這樣的：

@mixin smugmation() { 
    animation: most-smugish-animation 5s; 

    @at-root { 
     @keyframes most-smugish-animation { 
      from {background:red;} 
      to {background:yellow;} 
     } 
    } 
} 

.my-smug-selector { 
    @include smugmation; 
}

否則，您必須傳遞選擇器的名稱作爲mixin的一個參數：

@mixin smugmation($sel) { 
    #{$sel} { 
     animation: most-smugish-animation 5s; 
    } 

    @keyframes most-smugish-animation { 
     from {background:red;} 
     to {background:yellow;} 
    } 
} 

@include smugmation('.my-smug-selector');

來源

2014-01-22 14:35:58 cimmanon

如何讓Sass mixin在基本級別聲明非嵌套選擇器？

回答

相關問題