Rails中适当的SCSS资产结构

Question

所以,我有一个app/assets/stylesheets/看起来像这样的目录结构:

   |-dialogs
   |-mixins
   |---buttons
   |---gradients
   |---vendor_support
   |---widgets
   |-pages
   |-structure
   |-ui_elements

在每个目录中,有多个sass partials(通常是*.css.scss,但是一个或两个*.css.scss.erb).

我可能会假设很多,但rails应该自动编译那些目录中的所有文件,因为*= require_tree .在application.css中,对吧？

我最近尝试通过删除所有颜色变量并将它们放在根app/assets/stylesheets文件夹(_colors.css.scss)中的文件中来重构这些文件.然后我在app/assets/stylesheets名为master.css.scss 的根文件夹中创建了一个文件,如下所示:

// Color Palette 
@import "colors";

// Mixins
@import "mixins/buttons/standard_button";
@import "mixins/gradients/table_header_fade";
@import "mixins/vendor_support/rounded_corners";
@import "mixins/vendor_support/rounded_corners_top";
@import "mixins/vendor_support/box_shadow";
@import "mixins/vendor_support/opacity";

我真的不明白rails如何处理资产编译的顺序,但它显然不利于我.看来没有一个文件意识到他们有任何变量或mixins被导入,所以它抛出错误,我无法编译.

Undefined variable: "$dialog_divider_color".
  (in /home/blah/app/assets/stylesheets/dialogs/dialog.css.scss.erb)

Undefined mixin 'rounded_corners'.
  (in /home/blah/app/assets/stylesheets/widgets.css.scss)

该变量$dialog_divider_color在_colors.css.scss中明确定义,并_master.css.scss导入颜色和我的所有mixins.但显然铁路没有获得那份备忘录.

有什么方法可以解决这些错误,还是我需要将所有变量定义放回每个单独的文件,以及所有mixin导入？

不幸的是,这家伙似乎并不认为这是可能的,但我希望他错了.任何想法都非常感谢.

Answer 1

CSS的问题是,您不希望自动添加所有文件.浏览器加载和处理工作表的顺序至关重要.所以你总是会明确地导入你所有的CSS.

举个例子,假设您有一个normalize.css工作表,以获得默认外观而不是所有可怕的不同浏览器实现.这应该是浏览器加载的第一个文件.如果您只是在css导入中的某个位置随机包含此工作表,那么它将不仅覆盖浏览器默认样式,还会覆盖在其之前加载的所有css文件中定义的任何样式.对于变量和混合,这是相同的.

在看到Roy Tomeij在Euruko2012上的演示后,如果你需要管理很多CSS,我决定使用以下方法.

我通常使用这种方法:

1. 将所有现有的.css文件重命名为.scss
2. 从application.scss中删除所有内容

开始添加@import指令application.scss.

如果你使用twitters bootstrap和你自己的一些css表,你必须首先导入bootstrap,因为它有一个表重置样式.所以你加入@import "bootstrap/bootstrap.scss";你的application.scss.

bootstrap.scss文件如下所示:

// CSS Reset
@import "reset.scss";

// Core
@import "variables.scss";
@import "mixins.scss";

// Grid system and page structure
@import "scaffolding.scss";

// Styled patterns and elements
@import "type.scss";
@import "forms.scss";
@import "tables.scss";
@import "patterns.scss";

你的application.scss文件看起来像:

@import "bootstrap/bootstrap.scss";

由于导入的顺序,您现在可以使用在其后导入的@import "variables.scss";任何其他.scss文件中加载的变量.所以它们可以type.scss在bootstrap文件夹中使用,但也可以在my_model.css.scss.

在此之后创建一个名为partials或的文件夹modules.这将是大多数其他文件的位置.您可以将导入添加到application.scss文件中,使其看起来像:

@import "bootstrap/bootstrap.scss";
@import "partials/*";

现在,如果您在主页上为一篇文章设置一些css.只需创建partials/_article.scss并将其添加到已编译的application.css.由于导入顺序,您还可以在自己的scss文件中使用任何bootstrap mixins和变量.

到目前为止我找到的这种方法的唯一缺点是,有时你必须强制重新编译部分/*.scss文件,因为rails不会总是为你做.

Answer 2

创建以下文件夹结构:

+ assets
|
--+ base
| |
| --+ mixins (with subfolders as noted in your question)
|
--+ styles
  |
  --+ ...

在文件夹中base创建一个文件"globals.css.scss".在此文件中,声明所有导入:

@import 'base/colors';
@import 'base/mixins/...';
@import 'base/mixins/...';

在你的application.css.scss中,你应该有:

*= require_self
*= depends_on ./base/globals.css.scss
*= require_tree ./styles

并且作为最后一步(这很重要),@import 'base/globals'在每个要使用变量或mixins的样式文件中声明.您可能会考虑这种开销,但我实际上喜欢您必须在每个文件中声明样式的依赖关系.当然,重要的是你只在globals.css.scss中导入mixins和变量,因为它们不添加样式定义.否则样式定义将在预编译文件中多次包含...

Answer 3

要使用变量等跨文件,需要使用@import指令.文件按指定顺序导入.

然后,使用application.css来要求声明导入的文件.这是实现您想要的控制的方法.

最后,在layout.erb文件中,您可以指定要使用的"master"css文件

示例将更有帮助:

假设您的应用中有两个模块需要不同的css集:"application"和"admin"

文件

|-app/
|-- assets/
|--- stylesheets/
|     // the "master" files that will be called by the layout
|---- application.css
|---- application_admin.css
|
|     // the files that contain styles
|---- config.scss
|---- styles.scss
|---- admin_styles.scss
|
|     // the files that define the imports
|---- app_imports.scss
|---- admin_imports.scss
|
|
|-- views/
|--- layouts/
|---- admin.html.haml
|---- application.html.haml

这里是文件里面的样子:

-------- THE STYLES

-- config.scss
// declare variables and mixins
$font-size: 20px;

--  app_imports.scss
// using imports lets you use variables from `config` in `styles`
@import 'config'
@import 'styles'

-- admin_imports.scss
// for admin module, we import an additional stylesheet
@import 'config'
@import 'styles'
@import 'admin_styles'

-- application.css
// in the master application file, we require the imports
*= require app_imports
*= require some_other_stylesheet_like_a_plugin
*= require_self

-- application_admin.css
// in the master admin file, we require the admin imports
*= require admin_imports
*= require some_other_stylesheet_like_a_plugin
*= require_self


-------- THE LAYOUTS

-- application.html.haml
// in the application layout, we call the master css file
= stylesheet_link_tag "application", media: "all"

--  admin.html.haml
// in the admin layout, we call the admin master css file
= stylesheet_link_tag "application_admin", media: "all"