sassのクラスセレクタとして空の文字列を設定することはできますか？

Question

私はデフォルト値として空の文字列を持ち、スキン名に基づいて動的に変更できる変数を持っています。だから私はこのような私のセレクタを書くようにしました。

default.scss：

$skin: ''; 

green.scss：

$skin: 'green'; 

main.scss：

@import 'default.scss'; 
.#{$skin} .header{ 
    color: black; 
} 

は、だから私は期待生成されたCSSからの出力を以下に示します。

.header{ 
    color: black; 
} 

と

.green .header{ 
    color: black; 
} 

しかし後 無効なCSSをコンパイル中にエラー下に投げる " "：期待されるクラス名は、あなたが関数を使用することができ、" .header"

Answer 1

ましたこれは：

$skin: 'green'; 
@function skin(){ 
    @if $skin != '' { @return '.' + $skin + ' '; } 
    @else { @return ''; } 
} 

今あなたはこのようにそれを使用することができます。

#{skin()} .header { ... } 

出力されますどの：

.green .header { display: block; } 

はより良いグローバル変数名を使用する方がよいかもしれません（皮膚が迅速に再利用されるかもしれない何かのように思える - 私はお勧めします$global-skin-nameまたは何かのようなものだが、それはちょうど意味論である）。