Using CleverCSS in Django

written by Armin Ronacher, on Monday, September 17, 2007 7:02.

A few minutes ago I pushed CleverCSS to the cheeseshop. So far there is no framework support, once again you have to hack up the bridge yourself, but in this post I'll show a simple way to get CleverCSS running in django and simplify your CSS files.

The preferred way to use CleverCSS is compiling the clevercss files into css, and not doing that dynamically. But because during development this can be annoying, if you have to recompile your files by hand all the time, I suggest using a view that serves those files dynamically during development. In production usage you just overlay the view URL with an apache directive etc. that points to the folder with the static css files in.

Here the view function, you can store it directly in your urls.py because it's that small. Otherwise move it into a application responsible for static stuff:

import clevercss
from os import path
from django.http import HttpResponse, Http404

def serve_ccss_file(request, filename):
    fn = path.join(path.dirname(__file__), path.pardir, 'styles', filename + '.dcss')
    if not path.exists(fn):
        raise Http404()
    f = file(fn):
    try:
        css = clevercss.convert(f.read().decode('utf-8'))
        return HttpResponse(css, mimetype='text/css')
    finally:
        f.close()

Now you only have to create an URL rule for that:

from django.conf.urls.defaults import *

urlpatterns = patterns('',
    (r'style/([a-zA-Z_]+)\.css', serve_ccss_file)
)

All you clevercss files now should go to yourproject/styles, as filename.ccss. If you enter production mode you just open your shell, go to that directory and execute clevercss.py *. (That requires that you have symlinked the clevercss.py file into your PATH.)

To test that, just drop a test.ccss file with the following contents in your styles folder and open http://localhost:8080/styles/test.css:

link_color = red

body:
  background-color: white.darken(10)
  font-family: 'Lucida Sans', Verdana, sans-serif;

a:
  color: $link_color
  &amp;:hover:
    color: $link_color.brighten(10)
  &amp;:visited:
    color: $link_color.darken(20)

Comments

<strong>Lucumr Cogitations » Blog Archive » Using CleverCSS in Django...</strong>
Lucumr Cogitations » Blog Archive » Using CleverCSS in Django...

— roScripts - Webmaster resources and websites on Monday, September 17, 2007 17:01 #
[...] Lucumr Cogitations » Blog Archive » Using CleverCSS in Django [...]

— pinged jake elliott @ dai5ychain» Blog Archive » Lucumr Cogitations » Blog Archive » Using CleverCSS in Django on Tuesday, September 18, 2007 15:47 #
[...] Lucumr Cogitations » Blog Archive » Using CleverCSS in Django once again you have to hack up the bridge yourself, but in this post I’ll show a simple way to get CleverCSS running in django and simplify your CSS files. (tags: css django python clevercss) [...]

— pinged links for 2007-09-18 « PaxoBlog on Tuesday, September 18, 2007 23:20 #
nice idea, but actually I would really prefer to stick to the CSS syntax and hide the additional functionality (like variables) inside comments. Why? Simply because the syntax you are suggesting here doesnt work with any syntax highlighter, so finding errors is too hard, anbd you need to learn a new syntax (also if it is not too hard). And sticking to the current style would not be so hard.
my 2 cents
Wolfram

— Wolfram Kriesing on Friday, November 23, 2007 9:50 #
That's what I heard from quite a few people. Converting the indention based parser into a parser that uses braces to group sections wouldn't be that hard.
Regards,
Armin

— Armin Ronacher on Friday, November 23, 2007 23:46 #
Well, now we have a framework that does support CleverCSS... I just created a project that allows Django projects to utilize CleverCSS with ease. You can find out more at code.google.com/p/django-clevercss/

— wheaties.box on Wednesday, August 6, 2008 13:17 #
Hi, I'm working on an extended version of clever css that mixes with mako templates to make a programmable clever css.. This might seem totally over the top but for code maintenance this has been amaziningly useful so far..
e.g. I have a graphical menu at the top of the page that gets rearranged during development. It needs to use absolute positioning so I wrote a 'navitem' function that spits out the calculated positions based on image size of the menu items (driven by a simple list of menu items ids). It also then applies a 'sliding doors' css to each one..
I have no repeated code in my css and I can rebuild the css just by swapping a menu background image or reordering a list of ids.. little things like this make refactoring css like refactoring python..
The stuff I've been playing with is at
github.com/timparkin/clevercss
summary of ccss changes are..
---
adding multiple ids
e.g.
#one:
#two:
this: thatvalue
as an alias for #one, #two
--- allowing functions such as brighten to be called on the colour class directly. --- implementing __sub__, __add__ so objects can be used outside of clevercss. --- adding very verbose logging to see what the parser is doing --
As part of the mako work I also wrote a mako filter than ensures any called objects keep the same level of indentation e.g. ${capture(navitems())|ai}
If you're interested in the mako stuff, let me know. .

— Tim Parkin on Thursday, January 15, 2009 12:58 #
Hey, I'm really quite impressed by CleverCSS. I stumbled upon SASS the other day and was wondering if something similar were available as a Python library. I also searched around for how to easily integrate it into Django, however none of the solutions were to my liking as they all use a custom view or tags.
I whipped up a quick Django module to easily integrate with CleverCSS that doesn't require custom views, caching, tables, or tags. I thought others might find it useful so I put it up on github:
github.com/danielgtaylor/django-ccss
Enjoy, and thanks for the awesome CSS generator! :-)

— Daniel on Wednesday, October 28, 2009 16:46 #

Armin Ronacher

Using CleverCSS in Django

Comments

Leave a Reply