帮酷LOGO
0 0 评论
  • 显示原文与译文双语对照的内容
文章标签:SASS  style  样式  SAS  
Conditional Styles with Sass. Dress you CSS appropriately.

  • 源代码名称:jacket
  • 源代码网址:http://www.github.com/at-import/jacket
  • jacket源代码文档
  • jacket源代码下载
  • Git URL:
    git://www.github.com/at-import/jacket.git
  • Git Clone代码到本地:
    git clone http://www.github.com/at-import/jacket
  • Subversion代码到本地:
    $ 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
    • 在 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新插件

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



    文章标签:style  SASS  SAS  样式  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语