Verwenden Sie den Namen des Selektors als Wert für eine Variable in SASS

Ich möchte die ID eines div, das ich anwenden Styling nehmen und setzen Sie eine Variable mit dieser ID als Wert. Ist das etwas, was Sass tun kann? Der Selektor #eleven würde also den Wert einer Variablen auf "elf" setzen.Verwenden Sie den Namen des Selektors als Wert für eine Variable in SASS

Hier ist der aktuelle Code. Zunächst wird ein mixin, die ich verwende:

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

Und das ist, wenn ich die mixin nennen:

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

Also, wenn ich, dass mixin verwendet es eine Hintergrundfarbe, Teil eines Dateinamens, und ein Wert für Ränder (die zu einigen untergeordneten Selektoren hinzugefügt werden), die festgelegt sind. Wie Sie sehen können, entspricht die $bgurl Variable dem Namen des Wählers. Grundsätzlich möchte ich das automatisieren, so dass die $bgurl auf die Textzeichenfolge von der ID (mit dem Hash-Symbol abgestreift) gesetzt wird.

Der Grund dafür ist, dass ich Dutzende von Boxen mit dem gleichen Grundmuster aber einzigartigen Hintergrundbild haben werde und es scheint, in meinem Kopf wäre die einfachste Sache zu jedem PNG mit dem ID-Namen zu speichern den Dateinamen und lassen Sie Sass sie dann zusammenbringen. Ich könnte einfach so tun, wie ich es hier getan habe und den Wert in Longhand setzen, aber es scheint, als würde etwas Sass tun, also würde ich lieber Zeit damit verbringen, es richtig zu machen und mehr über Sass zu lernen, als einen halben Job zu machen.

Hoffe das macht Sinn und ist keine lächerlich dumme Frage - ich werde zugeben (und Sie werden nicht überrascht sein zu hören), dass ich ein sehr rohes Sass-Rekrut bin, aber ich denke, dass ich von dieser Frage lernen kann.

Quelle

2014-06-07 user3717789

Irgendwelche Bewertungen für uns? –

Ja, kam gerade erst zurück. Pezholios Lösung macht genau das, was ich brauche. Ich werde einen Blick darauf werfen, wie er auch Ihren implementiert, aber es ist mir nicht ganz klar, wie er das Problem löst - das ist eine Einschränkung meines Wissens und hoffentlich werde ich mehr über SASS erfahren, indem ich Ihre Version – user3717789

so etwas wie dieses Versuchen:

@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);

Grundsätzlich können Sie Variablen überall hinzufügen, mit Sass interpolation syntax

Quelle

2014-06-07 14:40:56 Pezholio

ausprobieren. Das ist sehr cool, danke für Ihre Antwort . Für jeden neuen SASS, der versucht, dies bis zum Ende zu verfolgen, ist es wichtig zu verdeutlichen, dass dies ein bisschen eine Änderung der Logik über die Art erfordert, wie ich das Problem skizzierte: In meinem Szenario habe ich versucht, den Selektornamen an die Variable im @ include, in der Lösung nennen wir den Selektor, wenn wir das Mischen mit dem Include aufrufen - es erreicht den Effekt, aber die Logik in meiner Frage war von vorne nach hinten: O) – user3717789

Was man stattdessen tun könnte, um es b11 (oder bg11 genannt Verwendung IDs oder Klassen einfacher zu machen, die Buchstaben sind frei wählbar)

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

und dann den Hintergrund Namen ändern das neue Format passen, wie in images/#11.pngoder können Sie this process verwenden, um die Zeichenfolge in einen int

Auf diese Weise konvertieren Sie rekursiv alle Ihre Elemente definieren können!

Quelle

2014-06-07 14:54:21

Verwenden Sie den Namen des Selektors als Wert für eine Variable in SASS

Antwort

Verwandte Themen