Less CSS Framwork – Leaner CSS

Wer möchte nicht bei der Webentwicklung Zeit sparen, denn Time-to-market ist auch bei Webapplikationen mittlerweile ein entscheidender Erfolgsfaktor. In einer Google Group bin ich auf LESS CSS Plugin for Coda aufmerksam geworden und habe es sofort ausprobiert. Mit LessCSS gibt es endlich ein Möglichkeit in CSS Variablen, Mixins, Operationen und nested Rules zuverwenden.

Variables

@brand_color: #4D926F;

#header {
  color: @brand_color;
}

h2 {
  color: @brand_color;
}

Mixins

.rounded_corners (@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners(10px);
}

Nested Rules

#header {
  color: red;
  a {
    font-weight: bold;
    text-decoration: none;
  }
}

Operations

@the-border: 1px;
@base-color: #111;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}

#footer { 
  color: (@base-color + #111) * 1.5;
}

LessCSS ist jedoch kein Standard und wird auch von keinem Browser sauber interpretiert. LessCSS muss von einem Compiler in Standard CSS umgewandelt werden. Der Compiler basiert auf Ruby on Rails, welcher ‘.less’ in ‘.css’ Dateien umwandelt. Eine genaue Installationsanweisung des Compilers befindet sich unter Homepage von LessCSS.

Auch existieren bereits eine Reihe von Plugins für Editoren, welche on-the-fly LessCSS Code in eine Standard CSS speichern.

Coda

http://incident57.com/coda

TextMate

http://github.com/appden/less.tmbundle

Wer CSS in LessCSS umwandeln möchte, wird hier fündig:

http://sickill.net/blog/2009/07/25/lesscss-goodies.html

Tags: coda, css, css2less, less2css, lesscss, ruby, textmate

Dieser Eintrag wurde am Samstag, 05. Dezember 2009 um 15:22 erstellt und ist abgelegt unter Entwicklung. Mit dem RSS 2.0 Feed kannst du den Antworten zu diesem Artikel folgen. Du kannst eine Antwort hinterlassen, oder einen Trackback von deiner eigenen Seite senden.