pythoniccss 0.7.0

pythoniccss

Version: 0.0.1
Updated: 2014-12-08
URL:     http://github.com/sebastien/pythoniccss

pythoniccss是一个输出css的预编译器。原来是 本打算是Clevercss2.0，但由于它没有完全兼容 语法保持相同的名字是没有意义的。

pythoniccss具有以下功能：

• 基于缩进的结构
自动前缀
• 完全支持CSS3（动画、媒体查询、计算等）
模块性（包括）和MIXIN < /LI>

语法概述

pythoniccss的语法基于缩进，就像在python中一样。这个 主要的区别是pythoniccss更严格，总是期望 适当的缩进量和制表符（不是空格）的使用。

下面是pythoniccss的一个例子（这个例子是 实际上与克利夫茨的文档相同）。

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

选择器和规则

您可以在规则中使用任何类似css的选择器。您可以使用,来 将一行上的选择器与&分开以引用父级 嵌套规则中的选择器。

A = 10
div:
    color:      #FF00FF
    content:    "asdasdd"
    background: #FFAAAAAA.brighten()
    width:      10em * 1.0 + ($A * 10 / 2)
    animation:  name 5s
div, span:
    font-size: 100%
div:
    &:first-child:
        color: red
    &:last-child:
        color: green
    &:nth-child(2):
        color: yellow
.Application:
    &.with-base:
        background: 200%
#Application:
    font-size: 100%
div[data-type=1.0]:
    font-size: 100%
*[data-type=1.0]:hover:
    font-size: 100%
div#Application.widget.application[data-type=Application]:hover:
    font-size: 100%

一些规则也会自动加上前缀，例如：

-placeholder:

将生成：

-moz-placeholder,-webkit-placeholder

属性和表达式

pcss允许在编译时计算表达式，然后再生成 生成的css代码。例如

width: 10em * 3.5

将导致

width: 35em;

属性值可以相对于定义的变量和 也使用计算。可以在css之前预先计算表达式 使用PCSS表达式进行渲染，或使用 css3的calc函数。

而下面将输出calc(10em * 3.5)。注意我们需要 将表达式作为字符串参数传递，否则 表达将由pcss评估。

width: calc("10em * 3.5")

或者，您也可以引用整个值，它只是传递 一成不变的弦。

width: "calc(10em * 3.5)"

pcss允许隐式连接，如下例所示

label1:
    padding: $foo + 2 + 3 $foo - 2
label2:
    padding: ($foo + 2 + 3) ($foo - 2)

pcs知道要加前缀的属性和litteral属性值。 例如，在下面的示例transition-property中， transform和filter将用它们对应的 供应商前缀。

transition-property: color transform filter

一些属性，比如渐变可以有不同的语法， 取决于浏览器。如果CSS3还没有 推荐，将选择WebKit的格式。

background: linear-gradient(to bottom, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%)

将生成以下css代码（谢谢 http://www.colorzilla.com/gradient-editor/）

background:#1e5799;background:-moz-linear-gradient(top,#1e57990%,#2989d850%,#207cca51%,#7db9e8100%);background:-webkit-linear-gradient(top,#1e57990%,#2989d850%,#207cca51%,#7db9e8100%);background:-o-linear-gradient(top,#1e57990%,#2989d850%,#207cca51%,#7db9e8100%);background:-ms-linear-gradient(top,#1e57990%,#2989d850%,#207cca51%,#7db9e8100%);background:linear-gradient(tobottom,#1e57990%,#2989d850%,#207cca51%,#7db9e8100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799',endColorstr='#7db9e8',GradientType=0);

包括

PATH将相对于当前文件进行解析，如果不是的话 找到的将相对于当前工作目录进行解析。

%include test-include.pcss

变量

变量在文件开头声明，可以有 表达式的类型。注意，变量在 参考。

变量应为UPPER_CASE。

FONT_SIZE            = 14
PX                   = 1em / $FONT_SIZE
PAD                  = 20 * $PX
BACKGROUND_COLOR     = white
BACKGROUND_COLOR_ALT = #F0F0F0

特殊功能/方法

嵌入URL

如果要将图像作为数据url嵌入，可以通过 在url()属性之后使用.embed()方法调用。

background-image: url(http://ffctn.com/lib/images/nothing.png).embed()

它将下载/检索文件并生成base-64编码的数据 它的url版本。宏===

宏允许定义可同时应用的公共属性 使用<NAME>()

@macro cleared:
    clear:   bothAA
    content: ""
    display: block
    height:  0em
div.cleared:
    cleared()

CSS3支持

@keyframes animation1:
    from:
        background: red
    to:
        background: yellow

@keyframes animation2:
    0%:
        background: red
    100%:
        background: yellow

@font-face:
    font-family: asdas

@media[screen and (max-width: 300px)]:
    body:
        background-color: lightblue

导入

pcss不支持@importcss指令。

@import url("import4.css") tv, print;