Precss可以在CSS文件中使用Sass类型的Markup。
在线演示
变量/* before */$blue: #056ef0;$column: 200px;.menu { width: calc(4 * $column);}.menu_link { background: $blue; width: $column;}/* after */.menu { width: calc(4 * 200px);}.menu_link { background: #056ef0; width: 200px;}条件/* before */.notice--clear { @if 3 < 5 { background: green; } @else { background: blue; }}/* after */.notice--clear { background: green;}循环/* 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 */@define-mixin icon $name { padding-left: 16px; &::after { content: ""; background-url: url(/icons/$(name).png); }}.search { @mixin icon search;}/* after */.search { padding-left: 16px;}.search::after { content: ""; background-url: url(/icons/$(name).png);}扩展/* before */@define-extend bg-green { background: green;}.notice--clear { @extend bg-green;}/* after */.notice--clear { background: green;}导入/* Before */@import "partials/_base.css"; /* Contents of _base: `body { background: black; }` *//* After */body { background: black; }
评论