Skip to main content

A Pythonic CSS pre-processor, designed as a replacement/upgrade to CleverCSS.

Project description


Version: 0.0.1
Updated: 2014-12-08

PythonicCSS is a pre-compiler that outputs CSS. It was originally intended to be CleverCSS 2.0, but as it does not have a fully compatible syntax it did not make sense to keep the same name.

PythonicCSS has the following features:

  • Indentation-based structure
  • Automatic prefixing
  • Full CSS3 support (animation, media queries, calc, etc)
  • Modularity (includes) and mixins

Syntax Overview

PythonicCSS’s syntax is based on indentation, just like in Python. The main difference is that PythonicCSS is stricter and always expects the right amount of indentation and the use of tabs (not spaces) to do so.

Here’s an example of what PythonicCSS looks like (this example is actually the same from CleverCSS’s documentation).

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

Selectors & Rules

You can use any CSS-like selector in you rules. You can use , to separate the selectors on a single line and & to refer to the parent selector in a nested rule.

A = 10
    color:      #FF00FF
    content:    "asdasdd"
    background: #FFAAAAAA.brighten()
    width:      10em * 1.0 + ($A * 10 / 2)
    animation:  name 5s
div, span:
    font-size: 100%
        color: red
        color: green
        color: yellow
        background: 200%
    font-size: 100%
    font-size: 100%
    font-size: 100%
    font-size: 100%

Some rules will also be automatically prefixed, for instance:


will generate:

-moz-placeholder, -webkit-placeholder

Properties & Expressions

PCSS allows to evaluate expressions at compile time before generating the resulting CSS code. For instance

width: 10em * 3.5

will result in

width: 35em;

Property values can be expressed relatively to defined variables and also using computations. You can pre-calculate expressions before CSS rendering by using PCSS’s expressions, or defer the evaluation with CSS3’s calc function.

While the following will output calc(10em * 3.5). Note that we need to pass the expression as a string parameter, as otherwise the the expression will be evaluted by PCSS.

width: calc("10em * 3.5")

Alternatively, you can also quote the whole value, which will just pass the string as-is.

width: "calc(10em * 3.5)"

PCSS allows for implicit concatenation, as shown in the example below

    padding: $foo + 2 + 3 $foo - 2
    padding: ($foo + 2 + 3) ($foo - 2)

Automatic Prefixing

PCSS know about which properties and litteral property values to prefix. For instance, in the following example transition-property, transform and filter will be generated with their corresponding vendor prefixes.

transition-property: color transform filter

Some properties, such as gradients can have different syntaxes, depending on the browser. If CSS3 does not already have a recommendation, WebKit’s format will be chosen.

background: linear-gradient(to bottom, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%)

will generated the following CSS code (thanks

background: #1e5799;
background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: -o-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: -ms-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );


The PATH will be resolved relatively to the current file, and if not found will be resolved relatively to the current working directory.

%include test-include.pcss


Variables are declared at the beginning of the file, and can have any type of expression. Note that variables are not evaluated until referenced.

Variables are expected to be UPPER_CASE.

FONT_SIZE            = 14
PX                   = 1em / $FONT_SIZE
PAD                  = 20 * $PX

Special functions/methods

Embedding URLs

If you would like to embed an image as a data-url, you can do it by using the .embed() method call after an url() property.

background-image: url(

which will download/retrieve the file and produce a base-64 encoded data URL version of it. Macros ======

Macros allow to define common properties that can be applied all at once using by calling the macro with <NAME>()

@macro cleared:
    clear:   bothAA
    content: ""
    display: block
    height:  0em

CSS3 support


CSS animations can be defined just like in CSS3, using from/to or percentages to define the frames. You can use property groups and macros just like in any other PCSS block. Keyframes with from/to

@keyframes animation1:
        background: red
        background: yellow

Keyframes with %

@keyframes animation2:
        background: red
        background: yellow


    font-family: asdas

Media queries

@media[screen and (max-width: 300px)]:
        background-color: lightblue


The @import CSS directive is not supported by PCSS.

@import url("import4.css") tv, print;

Notable differences with CleverCSS

Variables have to be defined with valid expressions:

``FONT_FAMILY = Helvetica, Arial, sans-serif``

Will not work, instead, you’ll have to quote the whole text

`FONT_FAMILY = “Helvetica, Arial, sans-serif”

Rule trailing colon is optional:

div color: black

Is a valid PCSS code

Project details

Release history Release notifications

This version
History Node


History Node


History Node


History Node


History Node


History Node


History Node


History Node


History Node


History Node


Download files

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

Filename, size & hash SHA256 hash help File type Python version Upload date
pythoniccss-0.7.0.tar.gz (26.4 kB) Copy SHA256 hash SHA256 Source None Mar 27, 2017

Supported by

Elastic Elastic Search Pingdom Pingdom Monitoring Google Google BigQuery Sentry Sentry Error logging CloudAMQP CloudAMQP RabbitMQ AWS AWS Cloud computing Fastly Fastly CDN DigiCert DigiCert EV certificate StatusPage StatusPage Status page