sass | Bogdan's blog https://blog.bogdancarpean.com Code and anything else. Fri, 24 Jan 2020 18:53:00 +0000 en-US hourly 1 https://wordpress.org/?v=6.1.1 https://blog.bogdancarpean.com/wp-content/uploads/2022/12/icons8-pencil-drawing-96.png sass | Bogdan's blog https://blog.bogdancarpean.com 32 32 How to @extend sass classes or use sass global variables in Vue components https://blog.bogdancarpean.com/how-to-extend-sass-classes-or-use-sass-global-variables-in-vue-components/?utm_source=rss&utm_medium=rss&utm_campaign=how-to-extend-sass-classes-or-use-sass-global-variables-in-vue-components https://blog.bogdancarpean.com/how-to-extend-sass-classes-or-use-sass-global-variables-in-vue-components/#respond Wed, 20 Mar 2019 04:16:21 +0000 http://blog.bogdancarpean.com/?p=274 Extend classes and use of variables are two of the sass most powerful tools. But using them in a VueJS application could be a little bit tricky. In this article, I will show you a way of using these two on components without the need for importing the sheet containing them at each usage. Let’s […]

The post How to @extend sass classes or use sass global variables in Vue components first appeared on Bogdan's blog.]]>
Extend classes and use of variables are two of the sass most powerful tools. But using them in a VueJS application could be a little bit tricky. In this article, I will show you a way of using these two on components without the need for importing the sheet containing them at each usage.

Let’s assume that you have a class that you want to extend

src/styles/style.scss

.my_class_to_extend {
  backgroud-color: aqua;
}

Assuming you generated your project with @vue/cli, you have to add the following statement to vue.config.js in order to have file visibility throughout your application

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/style.scss";`
      }
    }
  }
}

Then, you can use @extend on which component you want

<style lang="scss" scoped>
.my_extended_class {
  @extend .my_class_to_extend;
}
</style>

Remember that you have to use sass in both extended and extender sheets for this to work.

The post How to @extend sass classes or use sass global variables in Vue components first appeared on Bogdan's blog.]]> https://blog.bogdancarpean.com/how-to-extend-sass-classes-or-use-sass-global-variables-in-vue-components/feed/ 0 Create custom color theme on Angular Material https://blog.bogdancarpean.com/create-custom-color-theme-on-angular-material/?utm_source=rss&utm_medium=rss&utm_campaign=create-custom-color-theme-on-angular-material https://blog.bogdancarpean.com/create-custom-color-theme-on-angular-material/#respond Thu, 01 Feb 2018 02:04:34 +0000 http://blog.bogdancarpean.com/?p=197 Most of the time when building an Angular Material application, you will need to customize your color palette, so that you adapt the look of your application to your client’s brand. In this article, we are going to do that customization for an Angular app that uses Angular Material. When you add Angular Material to […]

The post Create custom color theme on Angular Material first appeared on Bogdan's blog.]]> Most of the time when building an Angular Material application, you will need to customize your color palette, so that you adapt the look of your application to your client’s brand. In this article, we are going to do that customization for an Angular app that uses Angular Material.
When you add Angular Material to your app, you have the choice of four pre-built themes: deeppurple-amber, indigo-pink, pink-bluegrey or purple-green.
An Angular Material theme is based on five color palettes, each palette being just a collection of nuances generated from one main color: the primary palette (the main color used across the application), the accent palette (color used for floating action button and interactive elements), the warn palette (used for all error displays), the foreground palette (used for text and icons) and the background palette (used for element backgrounds).
Let’s say we are going to define a custom theme using three colors: the primary color, the accent (or the contrast) color and the warn color. For the first two, we are going to generate custom palettes, for the third, we are going to use the material red predefined palette.
First, we are going to generate a scss file, let’s call it your-theme.scss, in a common zone folder, let’s say app/common/themes.
Into this file, we are going to @import the theming file from Angular Material which contains the mat-core() mixin, containing all the common styles used by material components. (mat-core() should only be included once in your app to not duplicate the common styles).
@import '../node_modules/@angular/material/theming';

@include mat-core();

Next, we need to generate the material palettes for our two custom colors (primary and accent). An excellent site to do this is mcg.mbitson.com. In our example, we are going to use #008a00 as the primary custom color and #ca5d1e as the accent color. On the generator, enter the name you want for your color variable, click on the arrow on the right of the color box on the header and enter the color code in the input field under the color picker. Click choose and you will see the material nuances generated from your custom color. To export the palette, click on the clipboard icon on the header, then choose output format Angular JS 2 (Material 2). Copy the generated code in our your-theme.scss file. Do the same for the accent color. We will end up having the two custom color material palettes:

@import '../node_modules/@angular/material/theming'; @include mat-core();

@include mat-core();

$my-primary: (
    50 : #e0f1e0,
    100 : #b3dcb3,
    200 : #80c580,
    300 : #4dad4d,
    400 : #269c26,
    500 : #008a00,
    600 : #008200,
    700 : #007700,
    800 : #006d00,
    900 : #005a00,
    A100 : #8bff8b,
    A200 : #58ff58,
    A400 : #25ff25,
    A700 : #0cff0c,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

$my-accent: (
    50 : #f9ece4,
    100 : #efcebc,
    200 : #e5ae8f,
    300 : #da8e62,
    400 : #d27540,
    500 : #ca5d1e,
    600 : #c5551a,
    700 : #bd4b16,
    800 : #b74112,
    900 : #ab300a,
    A100 : #ffdfd7,
    A200 : #ffb5a4,
    A400 : #ff8c71,
    A700 : #ff7858,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

Now, all we have left to do is to declare the three palettes, declare the new theme using the three palettes and then add the newly created theme into the material themes.

@import '../node_modules/@angular/material/theming';

@include mat-core();


$my-primary: (
    50 : #e0f1e0,
    100 : #b3dcb3,
    200 : #80c580,
    300 : #4dad4d,
    400 : #269c26,
    500 : #008a00,
    600 : #008200,
    700 : #007700,
    800 : #006d00,
    900 : #005a00,
    A100 : #8bff8b,
    A200 : #58ff58,
    A400 : #25ff25,
    A700 : #0cff0c,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

$my-accent: (
    50 : #f9ece4,
    100 : #efcebc,
    200 : #e5ae8f,
    300 : #da8e62,
    400 : #d27540,
    500 : #ca5d1e,
    600 : #c5551a,
    700 : #bd4b16,
    800 : #b74112,
    900 : #ab300a,
    A100 : #ffdfd7,
    A200 : #ffb5a4,
    A400 : #ff8c71,
    A700 : #ff7858,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

//the first two are the custom palettes we declared above
$my-theme-primary: mat-palette($my-primary);
$my-theme-accent: mat-palette($my-accent);
//the third, for the warn color, is the predefined material red palette
$my-theme-warn: mat-palette($mat-red);

$my-theme: mat-light-theme($my-theme-primary, $my-theme-accent, $my-theme-warn);

@include angular-material-theme($my-theme);

The only one thing left to do is to import the generated theme file into the styles.scss file found in the root of your application

@import "./path/to/your-theme.scss"

If you’re in Montreal and passionate about Angular, come meet at Angular Montreal Meetup

The post Create custom color theme on Angular Material first appeared on Bogdan's blog.]]> https://blog.bogdancarpean.com/create-custom-color-theme-on-angular-material/feed/ 0