CSS

SASS und Compass Teil 2: Compass aufsetzen

Erstellt von Thomas Moseler - 15. März 2012 - 10:52

Warum eigentlich Compass und nicht SASS, und was ist überhaupt der Unterschied?

SASS ist ein Preprocessor für CSS, und die dazu passende Skriptsprache, um aus den .sass bzw .scss (wir verwenden in den ganzen Beispielen .scss) Dateien "normale" CSS-Dateien zu erzeugen.

Compass ist ein Framework bzw. Komponenten-Bibliothek zu SASS. Es enthält jede Menge vorgefertigte Bausteine (Mixins usw), die man dann nicht mehr selber bauen muß. Da diese Bausteine sehr einfach zu erstellen und zu verwenden sind, kann man es vielleicht mit den Bundles für Textmate vergleichen. Da Compass auf SASS aufbaut, installiert es SASS gleich mit. Also brauchen wir nur Compass zu installieren und haben beides.

CSS
Design
drupal planet deutsch

SASS und Compass Teil 1: SASS macht das Leben leichter

Erstellt von Thomas Moseler - 15. März 2012 - 10:51

Mein Kollege Johannes stieß mich drauf, und ein paar Wochen später las ich überall davon. SASS und LESS sind CSS Preprocessors und der letzte Schrei des fortschrittsbewußten Frontend-Programmierers. Heißt nichts anderes, als daß man seine CSS Dateien nicht mehr direkt schreibt, sondern aus Basisdateien kompiliert.

Wie man SASS aufsetzt und das Kompilieren durchführt, erfahrt ihr in Teil 2 dieses Blogposts. Wer gleich loslegen und die unten beschriebenen Beispiele ausprobieren will, sollte die technische Seite vorweg klären.

CSS
Design
drupal planet deutsch

Drupal and Media Queries: more control of your styles

Erstellt von Stefan Borchert - 1. August 2010 - 9:32

With CSS3 the W3C has introduced a new goodie for design on the web: Media Queries.
Until then stylesheets could only be called conditionally by using media types like "print" or "screen". Media Queries extends this to being able to use certain properties as a controlling mechanism if to load a style or not.
You could specify that a stylesheet is only loaded if the browser window has a maximum width of 800px.
To do so, you simply extend the value of the media-attribute by the desired attribute and value when inserting the stylesheet. To get our example to work we need to use the following HTML-Code:

<link type="text/css" rel="stylesheet" media="screen and (max-width: 800px)" href="mystyle.css" />

As an alternative you could also write it into the stylesheet directly:

@media screen and (max-width: 800px) {
  ...
}

If you're working with Drupal (which you should), you can use the regular .info file of the theme you're using:

stylesheets[screen and (max-width: 800px)][] = style.css
Drupal
CSS
drupal planet english

Drupal und Media Queries: Stil nach Plan

Erstellt von Stefan Borchert - 31. Juli 2010 - 11:48

Mit CSS3 hat das W3C ein neues Schmankerl für Design im Web eingeführt: Media Queries.

Bisher kannte man nur die Möglichkeit, Stylesheets anhand von Medientypen (zum Beispiel "screen" oder "print") zu verwenden. Media Queries erweitern diese Möglichkeit nun um die Verwendung bestimmter Eigenschaften.

Drupal
CSS
CSS abonnieren