SASS - クラス

Question

私はこのような見出しのアイコン（背景画像）を与えたい

の選択見出しは：

.icon_girl { 
    background-image: url('data:image/svg+xml;charset=UTF-8, ... SVG code ...'); 
} 

は、今私はH1、H2、H3など異なるサイズを与えたいです。私は試しました：

.icon_girl { 
    background-image: url('data:image/svg+xml;charset=UTF-8, ... SVG code ...'); 

    &h1 { 
     background-size: 37px; 
     padding-left: 48px; 
    } 

    &h2 { 
     background-size: 30px; 
     padding-left: 38px; 
    } 
} 

しかし、これは確かに動作していません。しかし、多分あなたは私が何をしたいのか知っているかもしれません。これを行う方法？

Answer 1

この種類のセレクタを取得したい場合は、補間と@at-rootディレクティブを使用して、現在のセレクタをネストされているルートセレクタから抽出する必要があります。

SASS

.icon_girl { 
    background-image: url('data:image/svg+xml;charset=UTF-8, ... SVG code ...'); 

    @at-root h1#{&} { 
     background-size: 37px; 
     padding-left: 48px; 
    } 

    @at-root h2#{&} { 
     background-size: 30px; 
     padding-left: 38px; 
    } 
} 

出力

.icon_girl { 
    background-image: url("data:image/svg+xml;charset=UTF-8, ... SVG code ..."); 
} 
h1.icon_girl { 
    background-size: 37px; 
    padding-left: 48px; 
} 
h2.icon_girl { 
    background-size: 30px; 
    padding-left: 38px; 
}