Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rimvaliulin/pass
The pythonic awesome css stylesheet language.
https://github.com/rimvaliulin/pass
css css-framework preprocessor python
Last synced: 5 days ago
JSON representation
The pythonic awesome css stylesheet language.
- Host: GitHub
- URL: https://github.com/rimvaliulin/pass
- Owner: rimvaliulin
- License: bsd-3-clause
- Created: 2013-08-19T14:20:29.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2018-08-14T09:24:59.000Z (over 6 years ago)
- Last Synced: 2025-01-02T03:05:49.752Z (20 days ago)
- Topics: css, css-framework, preprocessor, python
- Language: Python
- Homepage:
- Size: 89.8 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.rst
- License: LICENSE
Awesome Lists containing this project
README
====
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 | /* Compiled CSS */ |
| link_active = #1f6ba2 | .menu-item { |
| link_hover = #ccc | color: #1f6ba2; |
| link_height = 32px | line-height: 16px |
| link_size = 1em | } |
| | a:hover { |
| .menu-item | color: #ccc |
| color link_active | font-size: 1.5em |
| line-height link_height / 2 | background: #000 |
| | } |
| a:hover | |
| color link_hover | |
| font-size link_size + 0.5 | |
| background #000 | |
| | |
+------------------------------------------+------------------------------------------+
Nested selectors
----------------
Rather than constructing long selector names to specify inheritance, you can simply nest selectors
inside other selectors.
+------------------------------------------+------------------------------------------+
|:: |:: |
| | |
| // Pass | /* Compiled CSS */ |
| line_height = 16px | .menu { |
| .menu | margin-bottom 8px |
| margin-bottom line_height/2 | } |
| -item | .menu-item { |
| float left | float left |
| color #fff | color #fff |
| :visited | } |
| color #eee | .menu-item:visited { |
| _active | color #eee |
| :hover | } |
| color #ccc | .menu-item_active, .menu-item:hover { |
| span | color #ccc |
| background-color #ccc | } |
| | .menu span { |
| | background-color #ccc |
| | } |
| | |
+------------------------------------------+------------------------------------------+
Selector inheritance
--------------------
Class naming scheme::
block-[element]
[child_]parent-[[parent]_child]
+------------------------------------------+------------------------------------------+
|:: |:: |
| | |
| // Pass | /* Compiled CSS */ |
| ._foo | ._foo,.foo,.сhild_foo,.new_child_foo{}|
| pass | .foo{} |
| | .child_foo,.new_child_foo{} |
| .foo | .new_child_foo{} |
| pass | |
| | |
| .сhild_foo | |
| pass | |
| | |
| .new_child_foo | |
| pass | .bar-link,bar-link_active{} |
| | bar-link_active{} |
| .bar | |
| -link | |
| pass | |
| _acive | |
| pass | |
+------------------------------------------+------------------------------------------+
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