SASS - 跨多个文件扩展类

Question

我有一个项目使用Compass 和SASS/SCSS。它是一个单页应用程序。

我有一个主 .scss 文件，其中包含我所有的 variables、mixins 和 function 声明。

//Master.scss 
$foo: 'bar';

@function border($color) {
  @return 1px solid $color;
}

// etc.

我有一个 base.scss 文件，其中包含主 UI 的 css。

我的系统稍后在加载后使用 AMD 导入其他模块。这意味着某些样式表是在事后加载的。

每个模块或“App 的样式表”都会导入包含所有变量等的主 .scss 文件。master.scss 没有任何实际的类声明，因此在加载模块时没有重复导入。

现在，我更喜欢使用 @extend 而不是 mixins 重复相同的代码。如：

.a { @extend .stretch; }

代替：

.a { @include stretch(); },

两者产生相同的结果：

.a { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; }

执行extend 会更好，因为这样代码的重复就不会到处乱窜。这样做：

.stretch { @include stretch() }
.a { @extend .stretch; }
.b { @extend .stretch; }
.c { @extend .stretch; }

只生产：

.stretch, .a, .b, .c { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; }

相对于：

.a { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; }
.b { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; }
.b { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; }

所以我们喜欢extend。现在唯一的问题是，如果我将可扩展类 (.stretch) 放入 master.scss 文件，它会将自身复制到每个 css 页面。如果我将它放入 base.scss 文件中，Compass 在编译时似乎无法识别该类，因此不会对其进行扩展。

不确定解决此问题的最佳方法是什么。那么我的确切问题是：

如何在多个文件中扩展一个 css 类，同时只声明一次？

Answer 1

这就是占位符的用途。而不是这个：

.stretch { color: #F00 }
.a { @extend .stretch; }
.b { @extend .stretch; }
.c { @extend .stretch; }

使用这个：

%stretch { color: #F00 }
.a { @extend %stretch; }
.b { @extend %stretch; }
.c { @extend %stretch; }

它将产生以下css：

.a, .b, .c {
  color: red; 
}

即拉伸类不包含在最终编译的 CSS 中，但您仍然可以在 SASS 中使用它。

Answer 2

在 Sass 中使用 @import 方法。这使得其他 sass 文件可以使用所有混合、变量等。

http://sass-lang.com/tutorial.html

在 origin.sass 中

$variable_color = #877889

.one, .another, .two
  @extend .fatherclass

在另一个.sass中

@import origin

.one
  color: $variable_color