git://www.github.com/at-import/jacket.git
git clone http://www.github.com/at-import/jacket
$ svn co --depth empty http://www.github.com/at-import/jacket
Checked out revision 1.
$ cd repo
$ svn up trunk
带有Sass的条件样式。 适当地打扮你的CSS。
Jacket是一个指南针组件,它基于你在样式表中设置的上下文变量打印或者隐藏样式。 编写和维护主样式表,然后输出现代和旧版浏览器的自定义样式表,站点和应用程序。
直到 Sass 3.3被释放夹克需要指南针。
带 ruby的
gem install jacket
带 Bower的
bower install jacket
extensions_dir ="[your Bower component directory]"
到 config.rb使用夹套mixin有条件地输出代码块。 如果夹克中的任何上下文匹配 $jacket
变量中的上下文,那么你的条件代码将被输出。 如果 $jacket
变量上下文有与之关联的包装选择器,则代码 block 将被包装在包装选择器中。
jacket($contexts...) {//Conditional code}
使用夹克函数有条件地输出值。 如果夹克函数中的任何上下文与 $jacket
变量中的上下文匹配,则将输出值。
property: jacket($value, $contexts...);
使用 $jacket
变量设置样式表的上下文。 可以在逗号分隔列表中设置多个上下文。 每个上下文都可以有一个与之关联的可选包装选择器。
$jacket: context, context '.wrapping-selector', context;
在主样式表中编写代码。
style.scss
.example {//Universal rulesfont-size: 1rem; padding:0 20px; }
在夹克mixin或者夹克函数中包装上下文特定代码。
.example {//Universal rulesfont-size: 1rem; padding:0 20px;//Conditional styles for an ie8 stylesheet@includejacket(ie8) { float: left; }//Conditional styles for an iOS and android app build of the stylesheet@includejacket(ios, android) { background-color: #c0ffee; } line-height: jacket(1.5, ios, site) jacket(1.3, android); }
然后为每个构建上下文创建一个样式表,并告诉夹克天气是什么。
style.ios.scss
$jacket: ios;@import 'style';//Compiles to.example { font-size: 1rem; padding: 0 20px; background-color: #c0ffee; line-height: 1.5; }
style.android.scss
//Set the weather $jacket: android;@import 'style';//Compiles to.example { font-size: 1rem; padding: 0 20px; background-color: #c0ffee; line-height: 1.3; }
style.ie8.scss
$jacket: legacy, ie8'.ie8';@import 'style';//Compiles to:.example { font-size: 1rem; padding: 0 20px; }.ie8.example { float: left; }
现在你可以使用条件注释。自动构建过程或者一些javascript来为正确的上下文提供这些定制的样式表。 不要太多,不要太小。 你的样式表看起来很好。
查看更多的测试插件,包括带有嵌套包和简单媒体查询回退混合mixin的逻辑。
报告 Bug 和功能建议在 Github问题跟踪程序。 代替正式的styleguide,请注意维护现有的编码风格。
0.1.4,七月 7,2013: 添加 jacket() 函数,重写文档和测试。
0.1.0,2013年04月21日: 初始版本。
感谢断点,没有一个查询功能激发了这个项目。