Guide to importing a scss file into a scss class

Question

Guide to importing a scss file into a scss class

Is there a way to apply a different theme by adding the "dark-theme" class to the body? I've attempted the following implementation:

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

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

Unfortunately, it didn't work. Any suggestions on how to achieve this?

css angular sass

Answer 1

Answer №1

There are a couple of approaches to achieve this. Both involve the use of mixins.

meta.load-css

The sass:meta functionality allows you to accomplish your goal.

Suppose you have the following 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 import that code into another scss file like this:

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

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

As a result, the css will look like this:

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

For more information on this feature, refer to the documentation.

old fashioned mixin

Alternatively, you can achieve the same outcome using mixins and includes.

Let's say you have a class that you want to include in another class:

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

And another sass file with a different theme:

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

You can create 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';

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

dark-theme.scss

@import './mixin.scss';

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

  @include shared-items;
}

This will generate the following css:

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

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

Note that you can also pass parameters to mixins and use them as functions. This allows you to easily pass colors and utilize them with your theme variables.

For example:

/* an example of assigning 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;
    }
}

/* similar concept 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);
}

Answer 2

There are a couple of approaches to achieve this. Both involve the use of mixins.

meta.load-css

The sass:meta functionality allows you to accomplish your goal.

Suppose you have the following 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 import that code into another scss file like this:

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

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

As a result, the css will look like this:

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

For more information on this feature, refer to the documentation.

old fashioned mixin

Alternatively, you can achieve the same outcome using mixins and includes.

Let's say you have a class that you want to include in another class:

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

And another sass file with a different theme:

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

You can create 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';

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

dark-theme.scss

@import './mixin.scss';

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

  @include shared-items;
}

This will generate the following css:

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

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

Note that you can also pass parameters to mixins and use them as functions. This allows you to easily pass colors and utilize them with your theme variables.

For example:

/* an example of assigning 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;
    }
}

/* similar concept 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);
}

Guide to importing a scss file into a scss class

Answer №1

meta.load-css

old fashioned mixin

mixin.scss

white-theme.scss

dark-theme.scss

Similar questions

Attempting to position the calendar control at the center in Visual Studio using C#

Bug in floating elements within a header causing issues with IE6 and IE7

Experiencing difficulties with positioning text beside an image

Include an additional component in the array that is already in place

Video with a personalized play button overlay

Can you explain the purpose of this TypeScript code snippet? It declares a variable testOptions that can only be assigned one of the values "Undecided," "Yes," or "No," with a default value of "Undecided."

Error encountered during the deployment of Ionic 3 with TypeScript

Shades of Grey in Visual Studio Code

What is the best method for caching inline SVG in web browsers?

Exploring the power of CSS grid in React/Gatsby for creating dynamic layouts with varying numbers of columns in each

Where within Video.js can I modify the color of the large play button when the cursor hovers over the video?

POSTMAN - error when making a post request with the message "The media type 'application/json' is not compatible with this resource."

Adding animation to a div that is being appended can be done by using JavaScript functions and

Retrieve data from an HTML form within an Angular 2 ag-grid component

Tips for displaying Japanese characters followed by numbers in a single line on a web browser using CSS

Unable to retrieve values from input fields that have been established using interpolation

Version 2.0.0 of Angular working with Karma to offer Router capabilities

Github not recognizing CSS styles

The template reference variable has not been defined

What steps can I take to concentrate on a particular mat-tab?