SCSS - Abkürzungen

1. Die elende Tipperei!

Wenn man zum Beispiel einem Element unterschiedliche Rahmen zuweisen möchte, so kann das schon mal ziemlich ausarten.

.borderele [
  border-left: 1px solid #000;
  border-right: 2px dotted #f00;
  border-bottom: none;
  border-top: 1px solid #f00;
}

Oder man ist sich nicht mehr sicher bei Anweisungen wie zum Beispiel font oder background und nimmt dezidierte Anweisungen wie zum Beispiel background-position. Dafür gibt es hier eine einfache und elegante Lösung.

2. Die Sache mit dem Doppelpunkt

Man setzt einfach einen Doppelpunkt vor die "Überanweisung" (hier border) und der Rest wird vererbt. Das Ergebnis sieht dann genau so aus wie oben.

.borderele {
  border: {
    left: 1px solid #000;
    right: 2px dotted #f00;
    bottom: none;
    top: 1px solid #f00;
  }
}

Man kann das sogar bis auf die unterste "Ebene" verschachteln.

.borderele {
  border: {
    left: {
      width: 1px;
      style: solid;
      color: #000;    
    }    
  }
}
/* wird zu */
.borderele {
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #000;
}

3. Obacht!

Bei dieser Sache könnt ihr euch nicht auf den Präprozessor verlassen, wenn ihr Bockmist baut. Der nimmt einfach alle eure Anweisungen als gottgegeben hin und arbeitet sie ab. So wird dann aus einem

.borderele {
  border: {
    left: 1px solid #000;
    font-family: Arial;      
  }
}

das hier:

.borderele {
  border-left: 1px solid #000;
  border-font-family: Arial;
}

OK, die meisten Browser ignorieren falsche Anweisungen, sch***ße ist es trotzdem und hinterlässt keinen guten Eindruck.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt