Pass

http://github.com/rimvaliulin/pass

The pythonic awesome stylesheet language.

About

Pass is a dynamic stylesheet language and css preprocessor for web-developers that makes ccs coding simple and beautiful by having dynamic behavior such as variables, inheritance, operations and functions with python like indented syntax.

Installation

pip install pass

Command-line usage

pass style.pass

Usage in Code

import Pass

Pass('style.pass')

Syntax

• Every piece of knowledge must have a single, unambiguous, authoritative representation within a system. "DRY - don't repeat yourself"
• There should be one — and preferably only one — obvious way to do it", from "The Zen of Python".

Variables and operators

Variables allow you to specify widely used values in a single place, and then re-use them throughout the stylesheet, making global changes as easy as changing one line of code.

// Pass link_active = #1f6ba2 link_hover = #ccc link_height = 32px link_size = 1em .menu-item color link_active line-height link_height / 2 a:hover color link_hover font-size link_size + 0.5 background #000

/* Compiled CSS */ .menu-item { color: #1f6ba2; line-height: 16px } a:hover { color: #ccc font-size: 1.5em background: #000 }

Nested selectors

Rather than constructing long selector names to specify inheritance, you can simply nest selectors inside other selectors.

// Pass line_height = 16px .menu margin-bottom line_height/2 -item float left color #fff :visited color #eee _active :hover color #ccc span background-color #ccc

/* Compiled CSS */ .menu { margin-bottom 8px } .menu-item { float left color #fff } .menu-item:visited { color #eee } .menu-item_active, .menu-item:hover { color #ccc } .menu span { background-color #ccc }

Selector inheritance

Class naming scheme:

block-[element]

[child]parent-[[parent]child]

// Pass ._foo pass .foo pass .сhild_foo pass .new_child_foo pass .bar -link pass _acive pass

/* Compiled CSS */ ._foo,.foo,.сhild_foo,.new_child_foo{} .foo{} .child_foo,.new_child_foo{} .new_child_foo{} .bar-link,bar-link_active{} bar-link_active{}

Parent directive

Usage:

@parent "style.pass"

Functions

Color initialization

rgb(r, g, b) - Converts an Rgb(r, g, b) triplet into a color

rgba(r, g, b, a) - Converts an Rgba(r, g, b, a) quadruplet into a color.

hsl(h, s, l) - Converts an Hsl(h, s, l) triplet into a color.

hsla(h, s, l, a) - Converts an Hsla(h, s, l) quadruplet into a color.

Get/set color components

red(color, value=None) - Return the red component of the given color.

green(color, value=None) - Return the green component of the given color.

blue(color, value=None) - Return the blue component of the given color.

hue(color, value=None) - Return the hue of the given color.

saturation(color, value=None) - Return the saturation of the given color.

lightness(color, value=None) - Return the lightness of the given color.

alpha(color, value=None) - Return the alpha component of the given color.

Color adjustment

spinin(color, value=Pr(10)) - Changes the hue of a color.

spinout(color, value=Pr(10)) - Changes the hue of a color.

lighten(color, value=Pr(10)) - Makes a color lighten.

darken(color, value=Pr(10)) - Makes a color darker.

saturate(color, value=Pr(10)) - Makes a color more saturated.

esaturate(color, value=Pr(10)) - Makes a color less saturated.

fadein(color, value=Pr(10)) - Add or change an alpha layer for any color value.

fadeout(color, value=Pr(10)) - Add or change an alpha layer for any color value.

grayscale(color) - Converts a color to grayscale.

complement(color) - Returns the complement of a color.

invert(color) - Returns the inverse of a color.

mix(color, color1, weight=Pr(50)) - Mixes two colors together.

String Functions

quote(s) - Removes the quotes from a string.

unquote(s) - Adds quotes to a string.

Number Functions

percentage(value) - Converts a unitless number to a percentage.

round(value, digits=0) - Rounds a number to the nearest whole number.

ceil(value) - Rounds a number up to the nearest whole number.

floor(value) - Rounds a number down to the nearest whole number.

Command-line options

--version show program's version number and exit -h, --help show this help message and exit -i, --inherit use selector inheritance, rather then property duplication -c, --compressed compress imported .css files -e, --empty-selectors keep empty selectors -r, --respect-indents respect indentes -n, --newlines use newlines -I INDENT, --indent=INDENT .pass file indentation. default 2 breaks -C CSS_INDENT, --css-indent=CSS_INDENT .css file indentation. default 4 breaks -C CSS_INDENT, --css-indent=CSS_INDENT .css file indentation. default 4 breaks

License

See LICENSE file.

> Copyright (c) 2012 Rim Valiulin

Author

Rim Valiulin