Seite wählen

NETWAYS Blog

SASS – so macht CSS wieder Spaß

von | Jan 24, 2011 |

Keiner weiß, wie viele Entwickler schon aus dem Fenster gesprungen sind, weil sie „mal eben schnell“ alle Vorkommnisse eines Grautons und dessen Abstufungen leicht ins bläuliche Färben sollten. CSS wird zwar um viele Features erweitert, doch die Auzeichnungssprache an sich hat sich seit 1998 kaum geändert. Features wie Variablen sucht man vergebens, was einem bleibt ist viel doppelte Arbeit.
Doch bevor nun alle Entwicklungsabteilungen ins Erdgeschoß verlegt werden, möchte ich den Ausweg aus der misere Vorstellen: SASS.
*.sass Dateien sind spezielle Stylesheets, die über einen Compiler einfach in CSS umwandelt werden. Man kann so Variablen, verschachtelte Definitionen, Funktionen und vieles mehr in sein Stylesheet einbauen – der Compiler erstellt daraus dann eine valide CSS-Datei.
Und das beste: Wer CSS kann, muss kaum Neues lernen. Eigentlich kann man damit sofort produktiv loslegen.
Nehmen wir mal ein einfaches Stylesheet:

div.header {
   background-color: #ababab; /*dunkelgrauer Rand*/
   border: 1px solid #dedede; /*grauer Rand*/
}

Mit SASS würde dies wie folgt aussehen:

$theme_color1: rgb(222,222,222) /*Variable mit Farbwert*/
div.header
   background-color: darken($theme_color1, 20%) /*Rand, dank Funktion 20% dunkler als $theme_color*/
   border: $theme_color1 /*grauer Rand*/

Der Vorteil ist sofort ersichtlich: Muss man bei einem neuen Grauton das CSS  an zwei Stellen ändern und sogar den neuen Farbwert des Randes per Hand ausrechen, reicht bei der .sass Datei lediglich eine Änderung in der Variable $theme_color – den Rest erledigt SASS.
Das CSS erstellt man einfach via

sass --watch %sass-quelle%:%ziel-datei% 

Durch den –watch Parameter erkennt SASS, wenn sich Änderungen an der *.sass Datei ergeben haben und aktualisiert das CSS. So kann man direkt am SASS Entwurf arbeiten und sieht das Ergebnis sofort.
Natürlich ist das nur ein kleiner Einblick in die Möglichkeiten. Am besten einfach mal auf die Homepage gehen, ausprobieren und begeistert sein.

Animationen für alle: CSS3 Transitions

von | Sep 16, 2010 |

In diesem Blogpost möchte ich mal ein wenig auf CSS3 eingehen. Das meiste, dass durch CSS3 ermöglicht wird, ging auch schon vorher – allerdings nicht selten mit hunderten Zeilen zusätzlichen Javascript-Code.
Wenn CSS3 erstmal in allen Browsern hinreichend unterstützt wird, ist vieles von diesem Code hinfällig.
Ein nettes Beispiel dafür bieten CSS Transisitons (die von den meisten WebKit Browsern wie Safari, Chrome, etc. bereits unterstützt werden):
Mit ihnen kann man CSS3 Transformationen auf ein HTML Element animieren.
Einfaches Beispiel: Eine Box soll sich um 30° drehen und dabei die Farbe und Größe ändern wenn man mit der Maus darüber geht.
Klingt aufwändig, ist aber ganz einfach, man definiert einfach ein Element mit der CSS Eigenschaft ‚transition-duration‘, z.B.

#Element {
transition-duration: 1s linear;
-webkit-transition-duration: 1s linear;
-moz-transition-duration: 1s linear;
width: 200px;
height: 200px;
...
}

Will man das Objekt jetzt beim Mouseover animieren, benötigt man nur noch eine ‚transform‘ Eigenschaft im CSS File:

#Element:hover {
transform: rotate(350deg) rotate(-30deg);
-webkit-transform: rotate(350deg) rotate(-30deg);
-moz-transform: rotate(350deg) rotate(-30deg);
}

Dieses Beispiel habe ich an einem Blogpost von Mozilla angelehnt (deren Firefox das auch bald unterstützt) und etwas abgespeckt, live im Browser kann man sich das hier anschauen (Safari, Chrome oder Opera vorrausgesetzt).
Das ganze sollte mit allen HTML Tags, die im Browser gezeichnet werden funktionieren – also kann man damit auch z.B. Videoflächen animieren.
Dezent eingesetzt lassen sich damit Schaltflächen schnell, einfach und ohne Programmierkenntnisse betonen.

Trainings

Web Services

Events