The pythonic awesome stylesheet language
Project description
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
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
