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

License

See LICENSE file.

> Copyright (c) 2012 Rim Valiulin