CleverCSS

Stellt hier eure Projekte vor.
Internetseiten, Skripte, und alles andere bzgl. Python.
Antworten
mitsuhiko
User
Beiträge: 1790
Registriert: Donnerstag 28. Oktober 2004, 16:33
Wohnort: Graz, Steiermark - Österreich
Kontaktdaten:

Freitag 14. September 2007, 16:10

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
Zuletzt geändert von mitsuhiko am Freitag 14. September 2007, 18:13, insgesamt 2-mal geändert.
TUFKAB – the user formerly known as blackbird
Benutzeravatar
jens
Moderator
Beiträge: 8483
Registriert: Dienstag 10. August 2004, 09:40
Wohnort: duisburg
Kontaktdaten:

Freitag 14. September 2007, 16:48

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...

CMS in Python: http://www.pylucid.org
GitHub | Open HUB | Xing | Linked in
Bitcoins to: 1JEgSQepxGjdprNedC9tXQWLpS424AL8cd
mitsuhiko
User
Beiträge: 1790
Registriert: Donnerstag 28. Oktober 2004, 16:33
Wohnort: Graz, Steiermark - Österreich
Kontaktdaten:

Freitag 14. September 2007, 21:14

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.
TUFKAB – the user formerly known as blackbird
mitsuhiko
User
Beiträge: 1790
Registriert: Donnerstag 28. Oktober 2004, 16:33
Wohnort: Graz, Steiermark - Österreich
Kontaktdaten:

Montag 17. September 2007, 08:05

So. CleverCSS 0.1 kann man sich jetzt im Käseshop runterladen. Die Dokumentation gibts jetzt auch im Sandkasten. Kritik erwünscht. :-)
TUFKAB – the user formerly known as blackbird
Antworten