Package: pythoniccss
PythonicCSSVersion: 0.0.1
Updated: 2014-12-08
URL:     http://github.com/sebastien/pythoniccssPythonicCSS 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 structureAutomatic prefixingFull CSS3 support (animation, media queries, calc, etc)Modularity (includes) and mixinsSyntax OverviewPythonicCSS’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
    li:
        padding: 0.4em
        margin: 0.8em 0 0.8em
    h3:
      font-size: 1.2em
    p:
      padding: 0.3em
    p.meta:
      text-align: right
      color: #dddSelectors & RulesYou 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
div:
    color:      #FF00FF
    content:    "asdasdd"
    background: #FFAAAAAA.brighten()
    width:      10em * 1.0 + ($A * 10 / 2)
    animation:  name 5s
div, span:
    font-size: 100%
div:
    &:first-child:
        color: red
    &:last-child:
        color: green
    &:nth-child(2):
        color: yellow
.Application:
    &.with-base:
        background: 200%
#Application:
    font-size: 100%
div[data-type=1.0]:
    font-size: 100%
*[data-type=1.0]:hover:
    font-size: 100%
div#Application.widget.application[data-type=Application]:hover:
    font-size: 100%Some rules will also be automatically prefixed, for instance:-placeholder:will generate:-moz-placeholder,-webkit-placeholderProperties & ExpressionsPCSS allows to evaluate expressions at compile time before generating
the resulting CSS code. For instancewidth: 10em * 3.5will result inwidth: 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’scalcfunction.While the following will outputcalc(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 belowlabel1:
    padding: $foo + 2 + 3 $foo - 2
label2:
    padding: ($foo + 2 + 3) ($foo - 2)Automatic PrefixingPCSS know about which properties and litteral property values to prefix.
For instance, in the following exampletransition-property,transformandfilterwill be generated with their corresponding
vendor prefixes.transition-property: color transform filterSome 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 (thankshttp://www.colorzilla.com/gradient-editor/)background:#1e5799;background:-moz-linear-gradient(top,#1e57990%,#2989d850%,#207cca51%,#7db9e8100%);background:-webkit-linear-gradient(top,#1e57990%,#2989d850%,#207cca51%,#7db9e8100%);background:-o-linear-gradient(top,#1e57990%,#2989d850%,#207cca51%,#7db9e8100%);background:-ms-linear-gradient(top,#1e57990%,#2989d850%,#207cca51%,#7db9e8100%);background:linear-gradient(tobottom,#1e57990%,#2989d850%,#207cca51%,#7db9e8100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799',endColorstr='#7db9e8',GradientType=0);IncludesThePATHwill be resolved relatively to the current file, and if not
found will be resolved relatively to the current working directory.%include test-include.pcssVariablesVariables 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 beUPPER_CASE.FONT_SIZE            = 14
PX                   = 1em / $FONT_SIZE
PAD                  = 20 * $PX
BACKGROUND_COLOR     = white
BACKGROUND_COLOR_ALT = #F0F0F0Special functions/methodsEmbedding URLsIf you would like to embed an image as a data-url, you can do it by
using the.embed()method call after anurl()property.background-image: url(http://ffctn.com/lib/images/nothing.png).embed()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
div.cleared:
    cleared()CSS3 supportAnimationsCSS animations can be defined just like in CSS3, usingfrom/toor
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:
    from:
        background: red
    to:
        background: yellowKeyframes with %@keyframes animation2:
    0%:
        background: red
    100%:
        background: yellowFont-Face@font-face:
    font-family: asdasMedia queries@media[screen and (max-width: 300px)]:
    body:
        background-color: lightblueImportThe@importCSS directive is not supported by PCSS.@import url("import4.css") tv, print;Notable differences with CleverCSSVariables 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: blackIs a valid PCSS code