Question

我有一个包含CSS的SCSS文件。我想扩展这些课程，但我不想在主文件上呈现这些课程（参见下文）。

文件结构：

_vars.scss
main.scss

main.scss

@import 'vars';
//extend margin class
body{
    margin: @extend .m10;
}

在我的_vars.scss

中

.m10{margin:10px;}
.p10{padding:10px;}

如果编译了主SCSS，它将被编译为：

的main.css

.m10{margin:10px;} /* <-- i dont want to see this in my compiled scss --> */
.p10{padding:10px;} /* <-- i dont want to see this in my compiled scss --> */
body{
    margin: 10px;  /* <-- but still extent from the .m10 class of _vars.scss --> */
}

有什么想法不显示_vars.scss中的那些类，但仍在main.scss中扩展这些类？有没有办法用SASS做到这一点？

Answer 1

要走的路是使用占位符而不是类：

_vars.scss：

%m10 {
  margin:10px;
}
%p10 { 
  padding:10px;
}

main.scss

@import 'vars';
body {
  @extend %m10; 
}

哪个产生，编译：

body{
  margin: 10px;
}

占位符仅在使用时才生成CSS。更好的是，他们会使用它们连接所有选择器，以避免重复内容：

body {
  @extend %m10;
  background: red;
}
main > article {
  @extend %m10;
}

输出：

body, main > article {
  margin: 10px;
}
body {
  background: red;
}

Answer 2

你得到的输出正是它应该是的。

如果您不想拥有：

.m10{margin:10px;} /* <-- i dont want to see this in my compiled scss --> */
.p10{padding:10px;} /* <-- i dont want to see this in my compiled scss --> 
*/
body{
margin: 10px;  /* <-- but still extent from the .m10 class of _vars.scss --> 
*/

}

您不应该使用课程和@extend，而是使用mixin和@include

以下是您可以做的事情：

@mixin m10 {
  margin: 10px;
}

body{
  @include m10;
}

添加变量甚至更好：

@mixin myMargin($size) {
  margin: #{$size}px;
}

.input {
   @include myMargin(10);
}

这样，您可以选择保证金大小。

导入scss文件但不渲染其包含

2 个答案: