频道导航

ruby-on-rails – 如何在rails应用程序的大型ruby中管理css样式表文件和包含？

2019-08-06 CSS 前端之家

前端之家收集整理的这篇文章主要介绍了ruby-on-rails – 如何在rails应用程序的大型ruby中管理css样式表文件和包含？，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_502_0@

假设你没有使用框架,你应该如何管理在rails应用程序上的大型ruby中组织css文件和包含？当然,你有自己的应用程序级别样式(例如reset.css,applcation.css).但那之后什么是最好的方法？我可以看到使用特定于控制器的工作表或更具粒度的视图特定工还有其他合理的选择吗？什么是利弊？

顺便说一句,我现在正处于3.1之前的轨道中,似乎包含资产管道可能会影响到这里的答案 – 但我很高兴听到来自资产前或管道后管道的解决方案.

谢谢！

最佳答案

将其转化为答案,因为它(仅仅是一点点)对评论很重要,即使我发现它不是您正在寻找的确切答案.

我还没有进入rails 3.1,但是我已经使用Compass / Sass很长一段时间了,我可以松散地描述我的(有些不断变化的)练习.

在这里查看指南针：
http://compass-style.org/

我的目标是尽可能模块化,并以几种不同的方式将我的风格分为几类.示例结构可能如下所示.我正在将注释与文件层次结构一起嵌入,所以希望它是可读的.

- stylesheets
    # at top level,the files which are eventually concatenated and output,the main
    # sheet,"screen",a stripped version for a wysywyg editor,and some overrides.
    - screen.scss
    - print.scss
    - ie.scss
    - wysiwg.scss
    # also in this folder I tend to keep a reset
    - _reset.scss
    # and then separated,"includes" and "partials",includes being purely definitions
    # and mixins,while partials being their application (actual CSS output)
    - _includes.scss
    - includes
      - _definitions.scss   # some global variable defs 
      - _typography.scss    # typography mixins and defs
      - _colors.scss        # colors mixins and defs,and so on
      - ...
    - _partials.scss
    - partials
      - _application.scss   # top level layout + tweaks that don't belong anywhere else
      - _typography.scss    # the generation of typography CSS
      - _colors.scss        # the generation of colors CSS,and so on
      - ...
      - _layouts.scss       
      - layouts             # layout specific styles
      - _controllers.scss
      - controllers         # controller specific styles
      - _modules.scss       
      - modules             # modular,reusable pieces (widgets,breadcrumbs,navs,etc)
      - _vendor.scss        
      - vendor              # everything vendor,(jquery-ui,qtip,colorBox)

基本思想是将所有内容编译到顶级* .scss文件中,唯一不是以“下划线”为前缀的“部分”文件.这些文件非常简单,看起来像这样.

# screen.scss,import all partials
@import 'reset';
@import 'partials';
# wysiwyg.scss doesn't need all the partials,but needs the basic stuff
# and the semantic classes for wysiwyg users,e.g. ".red",etc.
@import 'reset';
@import 'partials/typography';
@import 'partials/colors';
@import 'partials/semantic';