如何在scss类中导入scss文件

Question

当我在正文中添加“深色主题”类时，我想添加其他主题。我的实现如下所示：

class RiskPlaceCalculation extends Model
{
   protected $table = 'tableName';
   protected $fillable = ['risk_placement_detail_id', '...', '...'];
   public function risk_placement_detail()
   {
      return $this->belongsTo(RiskPlacementDetail::class);
   }
}

没有任何运气。有关如何执行此操作的任何线索？

Answer 1

有两种方法可以做到这一点。它们都包含mixins。

meta.load-css

sass:meta feature可以执行您想要的操作。

假设您有一个包含主题的scss文件：

//theme/_code.scss
$border-contrast: false !default;

code {
  background-color: #6b717f;
  color: #d2e1dd;
  @if $border-contrast {
    border-color: #dadbdf;
  }
}

您可以将该代码包含在另一个scss文件中，如下所示：

// other-theme.scss
@use "sass:meta";

body.dark {
  @include meta.load-css("theme/code",
      $with: ("border-contrast": true));
}

这将导致以下CSS：

body.dark code {
  background-color: #6b717f;
  color: #d2e1dd;
  border-color: #dadbdf;
}

您可以在此处了解有关此功能的更多信息

老式的混音

但是，如果您使用mixin and include，则可以做基本相同的事情。

因此，假设您要将此类导入另一个类：

.title {
  font-size: 2em;
  font-weight: bold;
}

另一个具有另一个主题的sass文件：

.dark-theme {
  .title {
    font-size: 2em;
    font-weight: bold;
    color: white;
  }
}

您可以使用scss mixin并将其导入两个文件中

mixin.scss

@mixin shared-items() {
  .title {
    font-size: 2em;
    font-weight: bold;
  }
}

然后，在主题文件中：

white-theme.scss

@import './mixin.scss';

/* will be included as is without a parent class */
@include shared-items;

dark-theme.scss

@import './mixin.scss';

/* will be included inside the dark-theme class */
.dark-theme {
  .title {
    color: white;
  }

  @include shared-items;
}

这将生成此CSS：

.title {
  font-size: 2em;
  font-weight: bold;
}

.dark-theme {
  .title { color: white; }
  .title {
    font-size: 2em;
    font-weight: bold;
  }
}

请注意，您还可以将参数传递给mixin并将其用作函数。 因此，您可以轻松传递颜色并将其与主题变量一起使用。

例如：

# an example of giving a color to a placeholder mixin:
@mixin nk-placeholder($color: #C4C4CC) {
    &::-webkit-input-placeholder {
        color: $color;
        font: inherit;
    }
    &::-moz-placeholder {
        color: $color;
        font: inherit;
    }
    &:-ms-input-placeholder {
        color: $color;
        font: inherit;
    }
    &:-moz-placeholder {
        color: $color;
        font: inherit;
    }
    &::placeholder {
        color: $color;
        font: inherit;
    }
}

# same thing as above
@mixin shared-items($text-color: black) {
  .title {
    font-size: 2em;
    font-weight: bold;
    color: $text-color;
  }
}


.white-theme {
  @include shared-items;
}

.dark-theme {
  @include shared-items(white);
}