Użyj nazwy selektora jako wartości dla zmiennej w SASS

Question

Chciałbym wziąć ID elementu div, dla którego stosuję stylizację i ustawić zmienną, aby ten identyfikator był jego wartością. Czy coś takiego może zrobić Sass? Tak więc selektor #eleven ustawi wartość zmiennej na "jedenaście".

Oto aktualny kod. Najpierw mixin że używam:

@mixin left-icon ($bgcolor, $bgurl, $iconmargin) { 
    background: $bgcolor url(images/#{$bgurl}.png) no-repeat left 5px center; 
    & h2, & p {margin-left: $iconmargin;} 
} 

i to jest kiedy wezwać mixin:

#eleven { 
    @include left-icon(#de4c3f,eleven,$defaulticonmargin); 
} 

Więc kiedy użyłem że mixin istnieje kolor tła, część nazwy pliku, a wartość dla marginesów (które są dodawane do niektórych selektorów potomnych), które są ustawione. Jak widać zmienna $bgurl pasuje do nazwy selektora. Zasadniczo chcę zautomatyzować to, aby $bgurl został ustawiony na ciąg tekstowy z identyfikatora (z usuniętym symbolem skrótu).

Powodem tego jest fakt, że zamierzam mieć tuziny pudełek z tym samym podstawowym wzorem, ale unikalnym obrazem tła i wydaje mi się, że najprościej byłoby w mojej głowie zapisać każdy plik PNG przy użyciu nazwy identyfikatora jako nazwę pliku, a następnie pozwól Sassowi je dopasować. Mógłbym zrobić tak, jak tu zrobiłem i umieścić wartość w longhandzie, ale wydaje mi się, że coś takiego może zrobić Sass, wolałbym spędzić czas, starając się to dobrze i dowiedzieć się więcej o Sassie niż o pół pracy.

Mam nadzieję, że ma sens i nie jest śmiesznie głupie pytanie - przyznaję (i nie będziesz zaskoczony, gdy usłyszysz), że jestem bardzo surowym rekrutem Sassa, ale sądzę, że mogę uczyć się na tym pytaniu.

Answer 1

Spróbuj czegoś takiego:

@mixin left-icon ($bgcolor, $bgurl, $iconmargin) { 
    ##{$bgurl} { 
    background: $bgcolor url(images/#{$bgurl}.png) no-repeat left 5px center; 
& h2, & p {margin-left: $iconmargin;} 
    } 
} 

@include left-icon(#de4c3f,eleven,10px); 

Zasadniczo, można dodać zmienne dowolnego miejsca za pomocą Sass interpolation syntax

Answer 2

Co można zrobić, zamiast zrobić to prościej jest identyfikatory mechanicznych lub klas zwane b11 (lub bg11, litery są dowolne)

$colorArray = [ #de4c3f, ... ]; 
@for $i from $min through $max { 
    .b#{$i} { 
     @include left-icon(colorArray[$i], $i, $defaulticonmargin); 
    } 
} 

, a następnie zmienić nazwy tła, aby pasowały do ​​nowego formatu, jak w images/#11.pnglub można użyć this process przekonwertować ciąg do int

W ten sposób można określić wszystkich elementów rekurencyjnie!