Skip to main content

python inspired sass-like css preprocessor

Project description


CleverCSS is a small markup language for CSS inspired by Python that can be used
to build a style sheet in a clean and structured way. In many ways it's cleaner
and more powerful than CSS2 is.

The most obvious difference to CSS is the syntax: it is indentation based and
not flat. While this is obviously against the Python Zen, it's nonetheless a
good idea for structural styles.

New Syntax Additions

`(commit) <>`_

This works like normal css @imports, but expects a ccss file, which is then
parsed, allowing cross-sheet variables

Backstrings (literal CSS)
`(commit) <>`_

Sometimes CleverCSS is a bit too clever for its own good and you just
want to pass something directly to CSS. For instance, functions that
aren't rgb() or url() need to be escaped. Added is a simple new
backtick-surrounded string format that will be passed verbatim without
further processing. Example::

background: `-moz-linear-gradient(...)`

`(commit) <>`_

Commonly in CSS, you'll have an image of all your UI elements, and then use
background positioning to extract a part of that image. CleverCSS helps you
with this, via the `spritemap(fn)` call. For example::

ui = spritemap('ui.sprites')
some_button = $ui.sprite('some_button.png')
other_button = $ui.sprite('other_button.png')

background: $some_button

background: $other_button
width: $other_button.width()
height: $other_button.height()


There is currently only partial mixin support -- arguments are not yet
implemented. But they will be...sometime soon. Anyway, the syntax for a macro
is [currently] pretty pythonic::

def macro:
color: red
border-width: 5px - 1px


This syntax may change, though, b/c conceivably "def macro:blah" could refer
to the CSS "def macro { blah }", so there is some inconsistent magic going in.


To get an idea of how CleverCSS works you can see a small example below. Note
the indentation based syntax and how you can nest rules::

ul#comments, ol#comments:
margin: 0
padding: 0

padding: 0.4em
margin: 0.8em 0 0.8em

font-size: 1.2em
padding: 0.3em
text-align: right
color: #ddd

Of course you can do the very same in CSS, but because of its flat nature the
code would look more verbose. The following piece of code is the CleverCSS
output of the above file::

ol#comments {
margin: 0;
padding: 0;

ul#comments li,
ol#comments li {
padding: 0.4em;
margin: 0.8em 0 0.8em;

ul#comments li h3,
ol#comments li h3 {
font-size: 1.2em;

ul#comments li p,
ol#comments li p {
padding: 0.3em;

ul#comments li p.meta,
ol#comments li p.meta {
text-align: right;
color: #dddddd;

But that's only a small example of what you can do with CleverCSS. Have a look
at the following documentation of CleverCSS for more details.

Project details

Release history Release notifications | RSS feed

This version


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

CleverCSS2-0.5.tar.gz (16.0 kB view hashes)

Uploaded source

Supported by

AWS AWS Cloud computing Datadog Datadog Monitoring Facebook / Instagram Facebook / Instagram PSF Sponsor Fastly Fastly CDN Google Google Object Storage and Download Analytics Huawei Huawei PSF Sponsor Microsoft Microsoft PSF Sponsor NVIDIA NVIDIA PSF Sponsor Pingdom Pingdom Monitoring Salesforce Salesforce PSF Sponsor Sentry Sentry Error logging StatusPage StatusPage Status page