css - 如何在一个 SCSS 中获取 mixin，以便在 Rails 元素的所有 SCSS 文件中得到识别？

Question

我正在 Ruby on Rails 4.0 网络应用程序中处理 SCSS 文件。

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

/*** 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 文件放在一个大堆中。考虑为您的基本样式、颜色、 View 、菜单等创建子目录...

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