SASS-Mixin für Clearfix, oder: Wie halte ich mein Markup sauber

Heute war es mal wieder soweit. Ein neues Projekt wurde ins Leben gerufen. Diesmal auf der Basis von Rails 3 und HAML / SASS.

Einer der ersten Schritte ist bei SASS das Erstellen von Mixins, um sich einiges an Schreibarbeit zu Ersparen. Stichwort DRY.

Ein überaus nützliches Mixin um sein Markup möglichst frei von unsemantischen Klassen wie „.clearfix“ zu halten, ist die Verwendung eines Clearfix-Mixins via SASS:

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
  }
  html[xmlns] .clearfix {
    display: block;
  }
  * html .clearfix {
    height: 1%;
  }
}

Immer wenn man nun einen Container „clearfixen“ möchte, schreibt man nicht ins Markup, sondern kann das ganz bequem und sauber via Styleangabe / clearfix-mixin (@include clearfix) erledigen. Das Markup bleibt sauber!

Und so clearfixt man dann via mixin:

#container {
  @include clearfix;
}

Den obigen Clearfix-Code als normale CSS-Deklaration findet man auf dieser Seite.

3 Comments on “SASS-Mixin für Clearfix, oder: Wie halte ich mein Markup sauber

  1. Hi Alex,

    so funktioniert doch dann theoretisch der Hack für IE6 (* html …) nicht mehr?

    Es würde ja „#container * html .clearfix { height: 1%; }“ im fertigen CSS stehen – html ist aber kein Element von #container.

    Außerdem rufst du mit dem CSS Hack die Klasse .clearfix auf, die es nicht gibt, da das Mixin ja den Kram jeweils in die Elemente, Klassen und IDs schreibt – wo es halt inkludiert wurde.

    Mein Clearfix von jQuery UI nutzt sogar den Commented Backslash Hack für IE5 unter Mac, sieht beispielshaft so aus: http://pastebin.com/xwmzrUB1 – auch wenn dort steht, dass es für Opera benutzt wird, denn im Opera sieht alles fein aus.

    Der funktioniert dann aber auch nicht, da im fertigen CSS die Kommentare rausgelöscht werden. Aber gut, ist halt ein Browser von 2003… 😉

    Schönen Gruß
    Benjamin

Hinterlasse eine Antwort

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

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>