Zugriff auf HTML-Attribut-Wert in SASS

Ist es möglich, den Zugriff auf ein HTML-Attribut mit dem Wert in SASS?
Ich habe eine Codezeile, die sagt

<ul id="my_id" data-count="3">

wo die 3 ist das Ergebnis von einigen jQuery-Kram. Ich brauche die 3 zu berechnen einige CSS. Wie kann ich sparen Sie als einer SASS-variable?

Alternativ, gibt es eine Möglichkeit, das zählen der Anzahl der Kind-Elemente von einem bestimmten übergeordneten element? Sagen, ich habe diesen code:

<ul id="my_id" data-count="3">
    <li>First list item</li>
    <li>Second list item</li>
    <li>Third list item</li>
</ul>

(Wie Sie vielleicht erraten haben, wird der Wert von data-count entspricht der Anzahl der Elemente der Liste.) Kann SASS zählen die Elemente der Liste und speichern Sie die Zahl als variable?

Irgendwelche Ideen würde sehr geschätzt werden.

  • caniuse.com/#feat=css-counters
  • Interessant, ich wusste nicht über ... Leider scheint es nur für die Arbeit mit content:, aber ich muss die ganze Zahl zu berechnen, Zeug. Wie auch immer, ich habe heute etwas gelernt, danke.
InformationsquelleAutor joschaf | 2012-11-21
  1. 10

    Sass ist nur ein CSS-generator. Es ist nicht wirklich die Interaktion mit den HTML-Code, so dass Sie nicht verwenden können HTML-Attribute wie Sass Variablen.

    Jedoch, CSS auswählen kann, basierend auf den Attributen. So wird es sein, mehr langatmig als, die Sie mögen, aber Sie können etwas tun, wie

    ul[data-count="3"]:after
  content: "There were three items in that list!"

    Und ich denke wenn Sie bereit sind, beschränken Sie sich nur auf eine Teilmenge der sehr aktuellen Browsern†), können Sie die CSS - calc() Funktion zusammen mit attr() verwenden Sie das Attribut in CSS-basierte Berechnungen. Aber das ist ziemlich bleeding edge.

    † um ehrlich Zu sein, ich habe keine Ahnung, welche Versionen von welchen Browsern vollständig umgesetzt. Ich bin mir ziemlich sicher, Firefox hat es, allerdings habe ich nicht verwendet, und ich habe keine Ahnung von anderen Browsern. Es ist sicherlich nicht gut unterstützt, auf jeden Fall.

    • caniuse.com/#feat=calc
    • Es ist speziell das zusammenspiel von calc() und attr() dass ich nicht glaube, dass Sie gut unterstützt wird. calc() selbst ist ziemlich neu, aber es ist bei weitem nicht so exotisch wie die Unterstützung für über ein Attribut in die Berechnung ein.
    • Vielen Dank, Chuck, calc() und attr() sind mir neu, und Sie könnten nützlich sein, für einige andere Probleme ich habe. Da Sie aber nur zu funktionieren scheinen, mit content: kann ich Sie nicht benutzen für die Aufgabe zur hand, da muss ich die Ganzzahl zu berechnen. Aber trotzdem danke.
    InformationsquelleAutor Chuck
  2. 4

    Es scheint, wie Sie versuchen, die Anzahl der Elemente in Ihrem ungeordneten Liste in CSS (vielleicht ändern Sie Ihre Größe nach der Anzahl der Geschwister?).

    In der Tat, können Sie ein data-Attribut als Sass-variable. Allerdings es ist eine Reine CSS-Möglichkeit, bedingte Stile, welche die Anzahl der Elemente in der übergeordneten. Plus, es ist sehr einfach geschrieben, im Sass.

    Nehmen wir an, Ihre maximale Anzahl von Elementen in der Liste ist 10 und Sie möchten berechnen Sie die Größe des li-tags basierend auf der Anzahl der li-tags gibt es in Ihrer Liste.

    @for $i from 1 through 10 {
    li:first-child:nth-last-child(#{$i}),
    li:first-child:nth-last-child(#{$i}) ~ li {
        width: (100%/$i);
    }
}

    Dieser Ausgabe wird das folgende CSS:

    li:first-child:nth-last-child(1),
li:first-child:nth-last-child(1) ~ li {
    width: 100%;
}
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
    width: 50%;
}
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
  width: 33.33333%;
}
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
    width: 25%;
}
li:first-child:nth-last-child(5),
li:first-child:nth-last-child(5) ~ li {
    width: 20%;
}
li:first-child:nth-last-child(6),
li:first-child:nth-last-child(6) ~ li {
    width: 16.66667%;
}
li:first-child:nth-last-child(7),
li:first-child:nth-last-child(7) ~ li {
    width: 14.28571%;
}
li:first-child:nth-last-child(8),
li:first-child:nth-last-child(8) ~ li {
    width: 12.5%;
}
li:first-child:nth-last-child(9),
li:first-child:nth-last-child(9) ~ li {
    width: 11.11111%;
}
li:first-child:nth-last-child(10),
li:first-child:nth-last-child(10) ~ li {
    width: 10%;
}

    Grundsätzlich, das gibt der li-tags mit einer Breite von:

    • 100.0% wenn es nur ein li-tag
    • 50.00% wenn es 2 li-tags
    • 33.33% wenn es 3 li-tags
    • 25.00% wenn es 4 li-tags
    • 20.00% wenn es 5 li-tags
    • 16.66% wenn es 6 li-tags
    • 14.28% wenn es 7 li-tags
    • 12.50% wenn es 8 li-tags
    • 11.11% wenn es 9 li-tags
    • 10.00% wenn es 10 li-tags

    Für ein live-Beispiel, bitte diese demo habe ich mit dem gleichen trick. Ich hoffe, es hilft.

    • Wie funktioniert die Verkettung erste Kind mit nth-last-child arbeiten genau? Probleme beim wickeln meinem Kopf herum.
    • Nevermind, ich found it
    InformationsquelleAutor Hugo Giraudel
Schreibe einen Kommentar