SASS List Mixin

Juchuu, ein Sass Mixin für Listen. Wäre es nicht schön HTML Listen in ein paar Mixin Anweisungen ausgeben zu lassen? Wäre nicht – IST! Hier das Ergebnis…

Anfangs hatte ich mir Gedanken über verschiedene Listen Darstellungsmöglichkeiten gemacht und sie dann mal gleich in CSS runtergeschrieben. Nächstes Ziel war die Aufteilung des CSS in modulare SASS Mixins.

Online Demo

(Zum GitHub Verzeichnis geht es am Ende dieser Seite …)

List Mixin Dokumentation

Das CSS greift auf das root Element „list“ der Liste zu.
Hier eine Beispiel Liste

<ul class="list list--timeline">
	<li title="2001">Hier etwas Text</li>
	<ul>
		<li><a href="">Verlinkter Text</a></li>
	</ul>
</ul>

In Sass definieren wir alle Eigenschaften in der „list“.
(Die Klassen-Namen können umbenannt werden.)

Darin dann die Theme(s):

.list {
	// Default Parameter
 
	&--timeline {
		// Theme Parameter 1
	}
	&--block {
		// Theme Parameter 2
	}
}

Als Default Wert ist zuerst der Größen-Wertwichtig.
Ich habe 16px als Standard gewählt.

Danach wähle ich die Art der Aufzählungszeichen.
zB. „default“ (wie gehabt),
„decimal-leading-zero“ (01, 02, 03 …),
„upper-roman“ (römische Zahlen), usw.
Weitere Zeichen – unter: „List-style-type“ suchen.

Man kann alternativ jedem „li“ Tag im „title“ auch einen eigenen Wert geben.
Der könnte dann auch dynamisch gefüllt werden.
Man könnte eine Jahreszahl einfügen.

Je nach Inhalt der Zeichen muss ich eine Breite vergeben.
„2001“ ist eben breiter wie ein „.“ – das ist klar.

Hier nun die Schreibweise:

.list {
  @include list-size(16px); 
  // Schriftgröße
 
  @include list-counter(default); 
  // Standard - mixin kann auch einfach weggelassen werden.
  // es sei denn man muss überschreiben
 
  // oder:
  @include list-style(decimal-leading-zero, 20px); 
  // 01, 20px Breite
 
  // oder:
  @include list-counter(title, 80px, reset); 
  // 2005, 80px Breite
  // mit RESTET fliegt eine Verschachtelung raus
  // Alle Punkte sind untereinander!
}

Jetzt haben wir erstmal die Aufzählung definiert, aber nicht das Aussehen.
Wenn wir nur eine Liste haben, können wir die Optik auch dort definieren.
oder wir nehmen eine neue Klasse her – zb: „.list–timeline“.

.list {
	@include list-size(16px);
	@include list-counter(title, 80px, reset); 
	&--date {
	    @include list-style-theme(block, $farbwert1, $farbwert2);
	    // "themename", "farbwert1", "farbwert2"
	    // 3 Theme existieren
	    // Im Mixin können beliebige ergänzt werden
 
	    @include list-item-hover($farbwert);
	    // Hover Effekt (wer möchte)
 
	    @include list-item-divider($farbwert);
	    // die Listen Items (li) können mit einer Linie (1px fix) getrennt werden
	}
}

Das war es schon.

Der Code liegt auf dem Github Server bereit.
Unter: github.com/gnitsche/list

Eine Version mir REM Werten (anstatt Pixel) wird in mein One-Page Projekt einfließen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

*