Precss可以在CSS文件中使用Sass类型的Markup。
在线演示
变量/* before */$blue: #056ef0;$colum: 200px;.meu { width: calc(4 * $colum);}.meu_lik { backgroud: $blue; width: $colum;}/* after */.meu { width: calc(4 * 200px);}.meu_lik { backgroud: #056ef0; width: 200px;}条件/* before */.otice--clear { @if 3 < 5 { backgroud: gree; } @else { backgroud: blue; }}/* after */.otice--clear { backgroud: gree;}循环/* before */@for $i from 1 to 3 { .b-$i { width: $(i)px; }}/* after */.b-1 { width: 1px}.b-2 { width: 2px}.b-3 { width: 3px}混入/* before */@defie-mixi ico $ame { paddig-left: 16px; &::after { cotet: ""; backgroud-url: url(/icos/$(ame).pg); }}.search { @mixi ico search;}/* after */.search { paddig-left: 16px;}.search::after { cotet: ""; backgroud-url: url(/icos/$(ame).pg);}扩展/* before */@defie-exted bg-gree { backgroud: gree;}.otice--clear { @exted bg-gree;}/* after */.otice--clear { backgroud: gree;}导入/* Before */@import "partials/_base.css"; /* Cotets of _base: `body { backgroud: black; }` *//* After */body { backgroud: black; }
评论