rails 4和指南针，如何仅一次导入我的sass文件？ [英] rails 4 and compass, how import only one time my sass files?

问题描述

我有一个Rail 4项目，其中包含我所有的CSS文件 stylesheets / application / index.css.scss：

  / * 
 * =需要jquery.ui.all 
 * = require_tree ../shared 
 * = require_tree ../design 
 * = require_tree ../layout 
 * = require_self 
 * = require_tree。 
 * / 
  

rails仅将一个css编译为一个，最小化（生成）。 / p>

我需要在许多文件中导入 @import共享/标题 。

示例：在样式表/布局/main.css.scss中

  @import'shared /标头； 
 
 .header 
 {
 @extend .header_common_overview; 
 [...] 
} 
  

但我 @import'shared / header'。结果是：

当rails只能在一个文件中编译时，存在很多相同的规则 .header_common_overview，因为我将其导入到不同的文件中。

我尝试将导入指令直接放在index.css.scss中，但是它不起作用。

那么我怎么能一次只导入一个文件，却又想调用其他所有文件中的内容？

解决方案

首先，请不要使用 require_tree。您将无法控制CSS文件的包含顺序，从而可能导致级联问题-样式实际上不应该被覆盖。

我已学会避免在主SASS文件中使用链轮的 require 行，原因与您所描述的类似。

• 它可能导致重复，尤其是在各处使用 = require_tree 时
  
• 变量/ mixins / etc ...不能通过链轮包括在内（我很想成为PR

在您的 index.css.scss 您可以考虑简单地放入

  @import供应商； 
 @import共享； 
 @import design; 
 @import布局; 
 
 //您的主要样式。 
 
 @ import另一个文件; 
  

这些 @import 行对应于其他文件。例如， shared.css.scss 可能看起来像

  / * 
 * = require ./shared/header 
 * / 
  

想法是

1. 保持资产的清晰分离/组织包括


2. 明确定义包括的每个资产，以便保留完全控制包括订单


3. 使用SASS @import 而不是链轮 = require 指令以使变量，mixin等...始终存在于整个文件中。




I have a rail 4 project with "stylesheets/application/index.css.scss" with my all css files:

 /*
 *= require jquery.ui.all
 *= require_tree ../shared
 *= require_tree ../design
 *= require_tree ../layout
 *= require_self
 *= require_tree .
 */

rails compile all css in only one, minimized (in prod).

I need to import @import "shared/header" in many files.

exemple: in "stylesheets/layout/main.css.scss"

@import 'shared/header';

.header
{
  @extend .header_common_overview;
  [...]
}

but I @import 'shared/header' in others files too. The result is :

when rails compile in only one file, there are many times the same rules ".header_common_overview", because I import it in different files.

I tried to put the "import" instruction directly in index.css.scss, but it does't works.

So how can I import only one time a file, and be abble to call the content in all others files?

解决方案

First, don't use require_tree . You lose control over the include order of your CSS files, potentially leading to cascading issues - styles being overwritten that really should not be.

I've learned to avoid sprockets' require lines in the main SASS files for reasons similar to what you describe.

• It can lead to duplication, particularly when using =require_tree all over the place
• Variables/mixins/etc... can't be included via sprockets (I'd love to be proven wrong about this though)

In your index.css.scss you might consider simply putting

@import "vendor";
@import "shared";
@import "design";
@import "layout";

// Your main styling here.

@import "another_file";

These @import lines correspond to other sass files. shared.css.scss for example might look like

/*
 *=require ./shared/header
 */

The idea is to

1. Keep clean separation/organization of your asset includes
2. Explicitly define each asset include so you retain full control over include order
3. Use SASS @importinstead of Sprockets =require directive to keep variables, mixins, etc... present in an included file available throughout.

这篇关于rails 4和指南针，如何仅一次导入我的sass文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！