http://github.com/rimvaliulin/pass
The pythonic awesome stylesheet language.
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.
pip install pass
pass style.pass
import Pass
Pass('style.pass')
- 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 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
}
|
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
}
|
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{}
|
Usage:
@parent "style.pass"
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.
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.
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.
quote(s) - Removes the quotes from a string.
unquote(s) - Adds quotes to a string.
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.
| --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 | |
See LICENSE file.
> Copyright (c) 2012 Rim Valiulin
| Author: | Rim Valiulin |
|---|