suxin

素馨

素馨是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()语句

用法

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

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

• 也可以指定一个根选择器，用以替换代码中的&,: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;}
素馨('&{&:not(a):not(b){c:d}}', 'abc')	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;
素馨('@b(@c,...@d,@e){each(@d,(@a){a:@a})};@b(1,2,3,4,5,3,4)' '', true)	a:2;a:3;a:4;a:5;a:3;
素馨('a{--a:1px;padding:var(--a) -var(--a);}', '', true)	a{padding:1px -1px;}
素馨('a{@a:1px;padding:@a -@a;}', '', true)	a{padding:1px -1px;}
素馨(':root{&:not(a):not(b){c:d}}', 'abc1')	: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-')	:not(a):not(b){c:d;}