css – SASS – 跨多个文件扩展类

我有一个使用Compass和SASS / SCSS的项目.这是一个单页面应用程序.

我有一个master .scss文件,它包含我的所有变量,mixins和函数声明.

//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; }

做一个扩展是更好的,因为那个代码的重复不会遍布整个地方.这样做：

.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; }

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

不确定解决这个问题的最佳方法是什么.那么我的确切问题是：

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

解决方法

这就是占位符所做的.而不是这个：

.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,.c {
  color: red; 
}

即最终编译的CSS中不包含stretch类,但您仍然可以在SASS中使用它.

css – SASS – 跨多个文件扩展类

解决方法

猜你在找的CSS相关文章