素馨

素馨是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){
}

处理结果举例

| 源码 | 输出 | | -------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | | 素馨('&{--a:1;a{opacity:--a}}') | a{opacity:1;} | | 素馨(':root{--a:1}a{opacity:--a}') | a{opacity:1;} | | 素馨(':scope{--a:1}a{opacity:--a}') | a{opacity:1;} | | 素馨(':scope{--b:--a;--a:1;}a{opacity:--b}') | a{opacity:1;} | | 素馨('@a(@p,@b){@p{opacity:@b}}@a(a,1);') | a{opacity:1;} | | 素馨('@a(a,1);@a(@p,@b){@p{opacity:@b}}') | a{opacity:1;} | | 素馨('a{ b{a:1}}') | a b{a:1;} | | 素馨('a{ >b{a:1}}') | a>b{a:1;} | | 素馨('a{ &>b{a:1}}') | a>b{a:1;} | | 素馨('a{ &b{a:1}}') | ab{a:1;} | | 素馨('a{ &.b{a:1}}') | a.b{a:1;} | | 素馨('a{ &[b]{a:1}}') | a[b]{a:1;} | | 素馨('a{ &[b]:nth-child(1){a:1}}') | a[b]:nth-child(1){a:1;} | | 素馨('a,b{c{a:1}}') | a c,b c{a:1;} | | 素馨('@media(){div{a:1}}') | @media(){div{a:1;}} | | 素馨('@keyframes a{%1{a:1}}') | @keyframes a{%1{a:1;}} | | 素馨('@media screen and (max-width: 200px){@keyframes a{%1{a:1}}}') | @media screen and (max-width: 200px){@keyframes a{%1{a:1;}}} | | 素馨('@a:1') | | | 素馨('@a:1;a{a:@a}') | a{a:1;} | | 素馨('@a:1;a{@{a}:@a}') | a{1:1;} | | 素馨('@a:1;a{@a:2;@{a}:@a}') | a{2:2;} | | 素馨('@a:1;@a{@a:2;@{a}:@a}') | 1{2:2;} | | 素馨('@b(@a:1){@a{a:b}}@b(2)') | 2{a:b;} | | 素馨('@a:1; a{a:@a/2}') | a{a:0.5;} | | 素馨('@a:1; a{a:(@a/2)}') | a{a:0.5;} | | 素馨('@a:1; a{a:(@a/2)+1}') | a{a:1.5;} | | 素馨('@a:1; a{a:(@a/2) + 1}') | a{a:1.5;} | | 素馨('@a:1px; a{a:(@a/2) +1px}') | a{a:0.5px +1px;} | | 素馨('@a:1px; a{a:(@a/2) -1px}') | a{a:0.5px -1px;} | | 素馨('@a:1px; a{a:(@a/2)-1px}') | a{a:-0.5px;} | | 素馨('@a:1px; a{a:1px+ (@a/2)}') | a{a:1.5px;} | | 素馨('&{a:calc(100% - 1px)}') | &{a:calc(100% - 1px);} | | 素馨('&{a:calc(~"100% - 1px")}') | &{a:calc(100% - 1px);} | | 素馨('&{a:calc(~"100vw - 1px")}') | &{a:calc(100vw - 1px);} | | 素馨('&{a:calc(~"100px - 1px")}') | &{a:99px;} | | 素馨('&{a:url(~"100px - 1px")}') | &{a:url(100px - 1px);} | | 素馨('&{a:url("100px - 1px")}') | &{a:url("100px - 1px");} | | 素馨('&{a:calc(100px - 1px)}') | &{a:99px;} | | 素馨('.a(){b{a:2}} .a();') | b{a:2;} | | 素馨('#a(){b{a:2}} #a();') | b{a:2;} | | 素馨('#a{a:1}') | #a{a:1;} | | 素馨('#a{}') | | | 素馨('@a{}') | | | 素馨('.a{}') | | | 素馨('a{}') | | | 素馨('@a: 1,2;each(@a,(){b{a:@value}})') | b{a:1;}\r\nb{a:2;} | | 素馨('@a(){a:A;b:B} each(@a(),(@v,@k,@i){@{key}@{i}{@{v}:@i}})') | a1{A:1;}\r\nb2{B:2;} | | 素馨('b{a:darken(#fff,10%)}') | b{a:#f5f5f5;} | | 素馨('b{a:darken(hsl(90, 80%, 50%), 20%)}') | b{a:#6cd205;} | | 素馨('b{a:darken(#6cd205, 20%)}') | b{a:#58be00;} | | 素馨('b{a:darken(#7ff,10%)}') | b{a:#6df5f5;} | | 素馨(':not(a):not(b){c:d}') | :not(a):not(b){c:d;} | | 素馨(':not(a):not(b){c:d}', 'abc') | abc :not(a):not(b){c:d;} | | 素馨('&:not(a):not(b){c:d}', 'abc') | abc:not(a):not(b){c:d;} | | 素馨(':scope{&:not(a):not(b){c:d}}', 'abc') | abc:not(a):not(b){c:d;} | | 素馨(':root{&:not(a):not(b){c:d}}', 'abc') | abc:not(a):not(b){c:d;} | | 素馨('&{&:not(a):not(b){c:d}}', 'abc') | abc:not(a):not(b){c:d;} | | 素馨(':root>a{&:not(a):not(b){c:d}}', '.abc-') | .abc->a:not(a):not(b){c:d;} | | 素馨('a>:root{&:not(a):not(b){c:d}}', '.abc-') | a>.abc-:not(a):not(b){c:d;} | | 素馨('.a (){ &:after{abc:1}} .b{.a();}', '.abc-') | .abc- .b:after{abc:1;} | | 素馨('@a:1px;@margin-x:@a+10px; a{m:-@margin-x}') | a{m:-11px;} | | 素馨('a{@a:1px;@margin-x:@a+10px;m:-@margin-x}') | a{m:-11px;} | | 素馨('.type(@type,@media) {.@{type} {&:before{content:"@{media}";}}}.type(videoinput, "相机");') | .videoinput:before{content:"相机";} | | 素馨('.type(@type,@media) {.@{type} {&:before{content:"@{media}";}}}.type(videoinput, 相机);') | .videoinput:before{content:"相机";} | | 素馨('@media screen{&.a{b:1}}','a') | @media screen{a.a{b:1;}} | | 素馨('@media screen and(max-width:100px){&.a{b:1}}','a') | @media screen and (max-width:100px){a.a{b:1;}} | | 素馨('@media screen and(max-width:100px){&.a{b:1}}','a') | @media screen and (max-width:100px){a.a{b:1;}} | | 素馨('b{:not([resizing], [dragging]) {transition: padding .2s, margin .2s;}}') | b :not([resizing], [dragging]){transition:padding .2s, margin .2s;} | | 素馨('@a(@b){a@b{@w:@b/2;c:@w;}} @a(1); @a(2); @a(3)') | a1{c:0.5;}\r\na2{c:1;}\r\na3{c:1.5;} | | 素馨('a{filter:grayscale(.9)}') | a{filter:grayscale(.9);} | | 素馨('a{each(1,2,3,4,5,(@a){a:@a})}') | a{a:1;a:2;a:3;a:4;a:5;} | | 素馨('each(1,(@a){a{a:@a}})a>b{b:2}') | a{a:1;}\r\na>b{b:2;} | | 素馨('each(2,(@a){@b:1/@a;a{a:@b}})') | a{a:0.5;} | | 素馨('a{a:length(2)}') | a{a:1;} | | 素馨('a{b:length(2,3)}') | a{b:2;} | | 素馨('a{a:extract(2,1)}') | a{a:2;} | | 素馨('a{a:extract(2,3,2)}') | a{a:3;} | | 素馨('a{a:extract(2 3,2)}') | a{a:3;} | | 素馨('@a:-1;b{a:-@a}', '', true) | b{a:1;} | | 素馨('value: range(10px, 30px, 10);', '', true) | value:10px 20px 30px; | | 素馨('value: range(4);', '', true) | value:1 2 3 4; | | 素馨('--mwidth:0px;--bwidth:2px;--qwidth: var(--mwidth)+var(--bwidth);width:--qwidth', '', true) | width:2px; |