suxin v1.0.8

素馨

素馨是css语言的一种拓展，与less相近，不完全相同。

• 目前支持的less内置函数有escape, e, saturate, desaturate, lighten, darken, fadein, fadeout, fade, spin, mix, tint, shade, grayscale, calc, each, extract, range, length。
• 其中darken, lighten等色彩相关的函数与less处理的算法有区别，计算结果不是直观的数值，但更符合人的直觉。
• 另外增加了grayluma函数，保持感观亮度不变的灰度转转换。
• calc方法也与less有区别，像calc(100% - 10px)这样的语句，不用再写成calc(~"100% - 10px")这种反人类的东西。当然你写成这样，也可以处理。
• 素馨不处理@import语句
• 素馨不处理url()语句

用法

1. 只有一个函数，传入源码，输出css代码

var 素馨 = require("suxin");
var csstext = 素馨("less like{ css.text{...} }...");

2. 也可以指定一个根选择器，用以替换代码中的&,:root,:scope等。

var csstext = 素馨("less like{ css.text{...} }...",".component-class-name");

选择器嵌套

与less相同，增加了用:scope表示上级的方式，与&用法一致

&{
    div{
        span{
        }
    }
    &:hover{
    }
}
:scope{
    &:active{
    }
    div.cn1>{
        #id1{
        }
    }
    div.cn2{
        >.cls1{
        }
        .cls2{
        }
    }
}

变量声明

与less保持一致，增加了--前缀的变量

@color:#ccc
--arg1:#ddd
div{
background:@color;
color:--arg1;
color:var(--arg1);
}

函数声明

与less保持一致，并增加了@前缀的声明方式

.method(@arg, @arg){
}

@method(@arg, @arg){
}

处理结果举例