CODEWITHSUNDEEP
cssangularsass
Kumaresan Sd
Kumaresan Sd

Reputation: 1516

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?

Upvotes: 7

Views: 8060

Answers (1)

Thatkookooguy
Thatkookooguy

Reputation: 7012

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

Upvotes: 6

Related Questions