How to import a scss file inside a scss class

问题

I want to add a different theme when i add "dark-theme" class to body. My implementation looks like this:

@import '../../../../node_modules/angular-grids/styles/material.scss';

.app-dark {
  @import '../../../../node_modules/angular-grids/styles/material-dark.scss';
}

Without any luck. Any clue on how to do this?

回答1:

There are two methods in order to do that. Both of them include mixins.

meta.load-css

The sass:meta feature gives the ability to do what you want.

Say you have this scss file with a theme:

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

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

you can include that code inside another scss file like so:

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

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

This will result in the following css:

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

You can read more about this feature here

old fashioned mixin

But you can do basically the same thing if you use mixin and include.

So, let's say you have this class you want to import into another class:

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

And another sass file with another theme:

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

You can use a scss mixin and import it into both files:

mixin.scss

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

then, in the theme files:

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

this will generate this css:

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

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

Notice that you can also pass parameters to mixin and use them as functions. So you can easily pass colors and use them with your theme variables.

for example:

# 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);
}

来源：https://stackoverflow.com/questions/59946608/how-to-import-a-scss-file-inside-a-scss-class