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的样式表导入master .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中不包含stretch类，但你仍然可以在SASS中使用它。

Answer 2

在Sass中使用@import方法。这使得另一个sass文件可以使用所有混合，变量等。

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

in origin.sass

$variable_color = #877889

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

in another.sass

@import origin

.one
  color: $variable_color

SASS - 跨多个文件扩展类

如何在只声明一次的情况下将css类扩展到多个文件？

2 个答案: