Gelegentlich besteht die Notwendigkeit, bestimmte Zeichen(folgen) in Css zu maskieren, um zu verhindern dass sie gemäß ihres ursprünglichen Einsatzzweckes ausgeführt werden. Beispielsweise, wenn größere Codeblöcke mit dazugehörigen Kommentaren auskommentiert werden sollen:

/* Auskommentierung
.extended_subnav {
    width: 211px;
    position: absolute;
    z-index: 10;
    right: 0; /* Analog zum padding-right von .mod_subnav */
    top: 30px;
    display: none;
    opacity: 0;
    @include single-transition(opacity, 3s, ease-in-out);
}
Auskommentierung Ende */

Die Auskommentierung hört nach dem inneliegenden Kommentar auf und kann so ihren Zweck nicht erfüllen. Um das zu verhindern, kann entweder dieser Kommentar gelöscht werden (nicht sinnvoll) oder aber die Kommentaranfang und -ende signalisierenden Slashes werden mit einem Maskierungszeichen (escape character) maskiert (sinnvoll).

Maskierungszeichen

Wie das Maskieren genau funktioniert, hat Mathias Bynens in seinem Artikel CSS character escape sequences detailliert erklärt und weist auf die eleganteste und einfachste Lösung hin:

The second option is far more elegant though: just escape the character using a backslash (\), e.g. + would escape into \+.

Angewendet beim obigen Code-Schnippsel sieht das so aus:

/* Auskommentierung
.extended_subnav {
    width: 211px;
    position: absolute;
    z-index: 10;
    right: 0; \/* Analog zum padding-right von .mod_subnav *\/
    top: 30px;
    display: none;
    opacity: 0;
    @include single-transition(opacity, 3s, ease-in-out);
}
Auskommentierung Ende */