CleverCSS

[mitsuhiko]

Also mein Lieblingsfeature von Python ist definitiv die einrückungsbasierte Syntax. Sehr tolles Konzept, solle man so anders auch verwenden. Zum Beispiel in CSS. Dazu gebracht hat es mich, weil ich eingentlich nur einen kleinen Preprozessor für CSS Dateien haben wollte der Konstanten kennt. Damit kann man dann dann ein einem Abwasch die Farben mal anpassen ohne durch die ganzen CSS Dateien gehen zu müssen.

Außerdem kann man damit im begrenzten Rahmen Rechnen, also "padding: $base_width + 4px" oder sowas.

Aussehen tut das so:

Code: Alles auswählen

base_padding = 2px
background_color = #eee
text_color = #111
link_color = #ff0000

body:
    font-family: serif, sans-serif, 'Verdana', 'Times New Roman'
    color: $text_color
    padding->
        top: $base_padding + 2
        right: $base_padding + 3
        left: $base_padding + 3
        bottom: $base_padding + 2
    background-color: $background_color

a:
    color: $link_color

a:hover:
    color: $link_color - 10

div.navigation:
    height: 1.2em
    padding: 0.2em
    ul:
        margin: 0
        padding: 0
        list-style: none
        li:
            float: left
            height: 1.2em
            a:
                display: block
                height: 1em
                padding: 0.1em

Eingerückt wird nach Python regeln, "pass" gibts aber keines. Ein Tab sind 8 Leerzeichen.

Das was rauskommt sieht dann so aus:

Code: Alles auswählen

body {
  font-family: serif, sans-serif, Verdana, 'Times New Roman';
  color: #111111;
  padding-top: 4px;
  padding-right: 5px;
  padding-left: 5px;
  padding-bottom: 4px;
  background-color: #eeeeee;
}

a {
  color: #fff000;
}

a:hover {
  color: #f5e600;
}

div.navigation {
  height: 1.2em;
  padding: 0.2em;
}

div.navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

div.navigation ul li {
  float: left;
  height: 1.2em;
}

div.navigation ul li a {
  display: block;
  height: 1em;
  padding: 0.1em;
}

Kleiner semantischer Hinweis: Nebeneinander stehende Instruktionen, die nicht durch Operatore getrennt sind, werden mit einem Leerzeichen verbunden. Das heißt "1 + 1 2 + 2" wird dann zu "2 4". Unterstütze Operatoren sind bis jetzt +, -, * und /. Rechnen kann man momentan nur mit Zahlen, gleichen Einheiten (px + px), Farben (im Hexadezimalcode). Wenn ein Rechenschritt nicht möglich ist, wird das Objekt als Zeichenkette behandelt und verbunden. "'foo' + 'bar'" ergibt also "'foobar'".

Wie sinnvoll sowas ist muss sich noch zeigen, aber ein wenig Arbeit spart es schon

Den Quellcode findet man hier zum ansehen: http://dev.pocoo.org/hg/sandbox/file/-1/clevercss.py und hier zum runterladen: http://dev.pocoo.org/hg/sandbox/raw-fil ... evercss.py

[jens]

Das ist sehr interessant. Tatsächlich finde ich es gut, wenn es in CSS selber die Möglichkeit gäbe, Variablen/Konstanten zu definieren. Ich wunder mich eigentlich schon recht lange, warum niemand darauf gekommen ist.
Ich denke die CSS Jungs möchten immer, das man das selbe durch vererben erreicht. Aber ich finde das irgendwie schwierig.

Für PyLucid hab ich mir auch schon mal überlegt, man könnte Farben aus allen CSS rausfischen und zum leichteren editieren in ein HTML Formular packen. So kann man gleiche Farben, die an mehreren Stellen in verschiedenen CSS Dateien vorkommen, auf einen schlag verändern. Man könnte das auch noch mit ein wenig JS kombinieren und Farben direkt im Formular anzeigen lassen...

[mitsuhiko]

Habs jetzt noch ein wenig angepasst. Jetzt kann man damit auch Farben etwas logischer bearbeiten. Die Änderung ist jetzt, dass CSS Objekte Methoden haben:

Code: Alles auswählen

body:
    background-color: #fff.darken(20)

h1.header:
    width: "Hello World".length() * 40px

Damit lassen sich jetzt lustigere Dinge anstellen. Die verfügbaren Methoden stehen im Docstring.

[mitsuhiko]

So. CleverCSS 0.1 kann man sich jetzt im Käseshop runterladen. Die Dokumentation gibts jetzt auch im Sandkasten. Kritik erwünscht.