Precss 变量条件循环混入扩展导入 介绍
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; }
Precss 变量条件循环混入扩展导入 官网
https://github.com/jonathantneal/precss
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。