$$$$$$$\   $$$$$$\   $$$$$$\   $$$$$$\  
$$  __$$\ $$  __$$\ $$  __$$\ $$  __$$\ 
$$ |  $$ |$$ /  \__|$$ /  \__|$$ /  \__|
$$$$$$$  |$$ |      \$$$$$$\  \$$$$$$\  
$$  ____/ $$ |       \____$$\  \____$$\ 
$$ |      $$ |  $$\ $$\   $$ |$$\   $$ |
$$ |      \$$$$$$  |\$$$$$$  |\$$$$$$  |
\__|       \______/  \______/  \______/ 

PythonicCSS is a pre-compiler that outputs CSS. It was originally intended to be CleverCSS 2.0, but as it does not have a fully compatible syntax it did not make sense to keep the same name.

• Python 3.8+
• libparsing>=0.9.3 available on your active Python path

PythonicCSS's syntax is based on indentation, just like in Python. The main difference is that PythonicCSS is stricter and always expects the right amount of indentation and the use of tabs (not spaces) to do so.

ul#comments, ol#comments:
	margin: 0
	padding: 0
	li:
		padding: 0.4em
		margin: 0.8em 0 0.8em
	h3:
	  font-size: 1.2em
	p:
	  padding: 0.3em
	p.meta:
	  text-align: right
	  color: #ddd

• Selectors: Any CSS-like selector. Use , to separate selectors on a single line and & to refer to the parent selector in a nested rule.
• Properties & Expressions: Evaluate expressions at compile time (width: 10em * 3.5), or defer evaluation with CSS3's calc (width: calc("10em * 3.5")). Implicit concatenation is supported (padding: $foo + 2 + 3 $foo - 2).
• Variables: Declared at the beginning of the file, expected to be UPPER_CASE (FONT_SIZE = 14). Not evaluated until referenced.
• Includes: The %include test-include.pcss directive resolves relative to the current file or working directory.
• Special Functions: Use .embed() after a url() to embed an image as a base-64 encoded data URL.

• @macro: Define common properties that can be applied all at once (e.g., @macro cleared: then called via cleared()).
• Automatic macro: Any rule with only one class selector is accessible as a macro (e.g., .expand-w can be called via expand-w()).
• merge() & extend(): Special macros to merge or extend directives from an already defined selector. merge() brings only direct style properties, while extend() copy-pastes the rule and all its children.

• Animations: CSS animations can be defined using from/to or percentages.
• Font-Face: Native support for @font-face blocks.
• Media Queries: Support for media queries (e.g., @media[screen and (max-width: 300px)]:).
• Note: The @import CSS directive is not supported by PCSS.

• Variables have to be defined with valid expressions. For example, FONT_FAMILY = Helvetica, Arial, sans-serif will not work; instead, you must quote the whole text: FONT_FAMILY = "Helvetica, Arial, sans-serif".
• Rule trailing colons are optional.

• Indentation-based structure: Clean, Python-like syntax enforcing readability.
• Automatic prefixing: Automatically applies vendor prefixes for properties like -placeholder, transition-property, transform, filter, and gradients.
• Full CSS3 support: Seamless integration with animations, media queries, and calc.
• Modularity: Reusable code blocks via includes and mixins.