jacket, 带有Sass的条件样式适当地将你打扮为 CSS

带有Sass的条件样式。 适当地打扮你的CSS。

Jacket是一个指南针组件，它基于你在样式表中设置的上下文变量打印或者隐藏样式。 编写和维护主样式表，然后输出现代和旧版浏览器的自定义样式表，站点和应用程序。

安装

直到 Sass 3.3被释放夹克需要指南针。

带 ruby的

• 在终端：gem install jacket
• 在 config.rb 中需要 gem
• 在样式表中导入'夹克'。

带 Bower的

• 在终端：bower install jacket
• 添加 extensions_dir ="[your Bower component directory]" 到 config.rb
• 在样式表中导入'夹克'。

基本用法

jacket() mixin

使用夹套mixin有条件地输出代码块。 如果夹克中的任何上下文匹配 $jacket 变量中的上下文，那么你的条件代码将被输出。 如果 $jacket 变量上下文有与之关联的包装选择器，则代码 block 将被包装在包装选择器中。

jacket($contexts...) {//Conditional code}

jacket() 函数

使用夹克函数有条件地输出值。 如果夹克函数中的任何上下文与 $jacket 变量中的上下文匹配，则将输出值。

property: jacket($value, $contexts...);

$jacket 变量

使用 $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日: 初始版本。

许可证

bsd新插件

感谢断点，没有一个查询功能激发了这个项目。