Question

我有一个带有一些部分mixin的scss文件。我只想编译该mixin，而不将其转换为CSS。让我向您展示代码。

@mixin baseButton() {
  position: relative;
  display: inline-block;

  &:disabled {
    background-color: gray;
  }
}

@mixin button($classname:".midori-button") {
  #{$classname} {
    color: gray;
    @include baseButton();
  }
}

@include button();

是否可以像上面那样将代码编译为SCSS而不是像这样的CSS：

.midori-button {
  color: gray;
  position: relative;
  display: inline-block;

  &:disabled {
    background-color: gray;
  }
}

谢谢。

P.S：不是本机的。

Answer 1

不确定我是否在正确地阅读此问题，但是您可以通过在文件名中添加下划线，例如_button.scss

，来创建不渲染CSS的mixin部分。

如果这样做，则应将@inclue放在要呈现CSS的文件中（使用@import使mixins可用）。

// _button.scss => No CSS
@mixin baseButton(){ ... }
@mixin button(){ ...}


// module-1.scss  => module-1.css
@import '_button.scss';
@include baseButton;
@include button;

// module-2.scss  => module-2.css 
@import '_button.scss';
@include baseButton;
@include button;

是否可以仅在scss中编译mixins？

1 个答案: