Question

我正在使用Ruby on Rails 4.0 Web应用程序中的SCSS文件。

一个SCSS文件定义了我的所有mixins和变量，另一个SCSS文件需要访问那些mixins /变量。

/*** main.css.scss ***/
$brandfont: 'Rokkitt';
@mixin dropdown_bottom() {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

/*** header.css.scss ***/
header {
  .navbar-brand {
    background:url('/assets/header-icon.png') 15px 7px no-repeat;
    font-size:30px;
    font-family:$brandfont;
    @include dropdown_bottom();
  }
}

最好的方法是什么？我是否需要在“header.css.scss”文件中添加“@import”语句？或者我是否需要在“application.css”文件中添加某种“require”语句？

Answer 1

创建一个css文件，将所有其他css文件一起编译成一个大的css文档。

来自我工作的项目中的all.css.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";

这将让你开始，但理想情况下，你不会将所有的css文件保存在这样的大堆中。考虑为基本样式，颜色，视图，菜单等创建子目录......

@import方法使用标准目录命名协议，因此您可以使用/'s和../指定子目录以返回等...

Answer 2

说实话，你需要包含所有必需的文件才能使用变量＆amp;你定义的mixins

以下是我们的工作方式：

#app/assets/sytlesheets.css.scss
@import 'variables';
@import 'the other file you need';

Answer 3

感谢所有回复的人！

我发现我应该将所有通用变量和mixin放到一个文件“main.css.scss”中，然后让每个使用这些mixins / vars的scss文件导入该文件。

/*** main.css.scss ***/
$brandfont: 'Rokkitt';
@mixin dropdown_bottom() {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

/*** header.css.scss ***/
@import "main.css.scss";   // this is the line I need to put in here
header {
  .navbar-brand {
    background:url('/assets/header-icon.png') 15px 7px no-repeat;
    font-size:30px;
    font-family:$brandfont;
    @include dropdown_bottom();
  }
}

如何在一个SCSS中获取mixins以在Rails项目中的所有SCSS文件中识别？

3 个答案: