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

时间:2011-08-18 23:15:41

标签: ruby-on-rails css

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

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

谢谢!

2 个答案:

答案 0 :(得分:3)

将其转化为答案,因为即使我意识到这不是您正在寻找的确切答案,但是(仅仅是一点点)评论仍然很重要。

我还没有进入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';

_layouts.scss和其他共享文件夹名称的文件是各自目录中文件的简单集体导入。

一般的想法是,偏见尽可能地保持薄弱,而在mixins中完成的工作首当其冲。感谢指南针提供了一个完整的抓包,我大量使用。

对于某些人来说,这种类型的文件结构可能不实用,但我发现它适用于我的目的。特别是一旦你获得了一个很好的mixin库和可交换的部分库。这使得调整一些变量定义或者将一个部分或mixin替换为另一个变量定义以便快速进行全局更改变得有些容易。

答案 1 :(得分:1)

在我的项目中,我有一些助手根据控制器和动作加载样式表和javascripts。我还加载了默认值,东西在公共目录和供应商目录中。这都是在我的application.html.haml布局中完成的,所以这些包含在标题中。

假设一个名为my_apps_controller.rb的控制器,我的样式表和javascripts目录看起来像这样:

public/javascript/
  vendors/
  common/
  my_apps/
    common/
    index/
    edit/
    show/
  ...etc...

我的样式表/ sass /目录看起来很相似。

这里的好处是我为我的资产建立了一个内置的基于会议的组织,而不是必须玩配置游戏。挑战在于我发现不清楚它进入的行动目录的情况。到目前为止,它很适合我。

我的助手基本上是:

module ApplicationHelper
  def load_javascript_for_directory(directory_name)
    glob_string = "#{directory_name}/**/*.js"
    javascript_include_tag Dir.chdir(File.join(Rails.root, "public", "javascripts")) {   Dir.glob(glob_string).sort }
  end

  def load_css_for_directory(directory_name)
    glob_string = "#{directory_name}/**/*.css"
    stylesheet_link_tag Dir.chdir(File.join(Rails.root, "public", "stylesheets")) { Dir.glob(glob_string).sort }
  end
end

没有什么棘手的,但在我的应用程序布局中,我可以用以下方式调用它们:

= load_javascript_for_directory "#{controller_name}/#{action_name}"

这会加载控制器/操作特定资产,而正常的样板资产会定期获取我需要的东西。

我不是试图将此作为唯一的方法出售。这只是一个替代方案,它不仅解决了我的问题,而且帮助我真正理解我的资产结构以及如何将它们干掉。

是的,SASS为我的样式表和coffeescript为我的javascripts:)