Overriding SCSS variables

[Tom Shane]

Hello,

I'm currently evaluating your new EJS2 package and I'm trying to import themes via SCSS files. Everything works fine, I just am not able to override theme variables without modifying source SCSS files. I dont want to do that, because of need to merge changes with every new release of your components.

To be able to modify the values, variables in the source package have to be marked as "!default", which currently are not.

With "!default" modifier, I would be able to do something like this in my project:

$btn-font-size: 24px;

@import "ej2-react-buttons/styles/button/fabric.scss";

Thanks.

Tom

[Sridurgha Uthayakumaran]

Hi Tom, 

Thanks for your patience and sorry for the delay. 

We can override the SCSS variables after referring its definition file to achieve your requirement instead of adding !default flag to each variable. You can override the required variables alone from the definition file. 

Please find the below code snippet for further details. 

// ej2 common base styles 

@import 'ej2-base/styles/material.scss'; 

// button variable definitions 

@import 'ej2-buttons/styles/button/definition.scss'; 

@import 'ej2-buttons/styles/button/material-definition.scss'; 

// override button variables here 

$btn-font-size: 24px;  

// define button styles 

 @import 'ej2-buttons/styles/button/_all.scss';   

For your convenience, we have created a simple sample for overriding styles using scss variable and the same can be download from the below link. 

 

Sample Link: http://www.syncfusion.com/downloads/support/forum/137888/ze/node_sass1700330545  

 

You can compile the styles from the above sample by using the command “npm start”. 

 

Please let us know if you have any concerns. 

Regards, 

Sridurgha U 

 

[Tom Shane]

Hello Sridurgha,

thanks for the reply.

Yes, I'm aware of this way of overriding variables. This, however, requires each component to be re-imported this way, which is, in my opinion unnecessary and it's a shame you are not using SCSS' built-in capabilities, which would make your new components feel even more modular.

Either way, thanks for your time and the sample.

Tom

[Saranya Murugasamy]

Hi Tom,

 

Thanks for your update and suggestion.

 

We have noted your description and we will include this “Append !default in the SCSS variables” in any of our upcoming Essential Studio volume release.

 

Please let us know if need any further assistance on this.

 

Regards,

Saranya Murugasamy

[Tom Shane]

That's a great news!

Thanks.

[Sridurgha Uthayakumaran]

Hi Tom, 

Thanks for the update. 

Please get back to us if you require any further assistance on this. 

Regards, 

Sridurgha U 

[Jatinder]

Hi Tom,

 

Thanks for your update and suggestion.

 

We have noted your description and we will include this “Append !default in the SCSS variables” in any of our upcoming Essential Studio volume release.

 

Please let us know if need any further assistance on this.

 

Regards,

Saranya Murugasamy

Any idea when this happens? (we're using the angular controls fyi)
We're in the same boat - rather not have to put all the import chain to override the variables

[John Rajaram]

Hi Jatinder, 

We have planned to include this “Append !default in the SCSS variables” support in our Essential Studio Volume 4, 2018 release, which is expected to be out at the end of December 2018. We will let you know once it is rolled out. 

Regards, 

John R 

[Peeyush]

Hi Jatinder, 

We have planned to include this “Append !default in the SCSS variables” support in our Essential Studio Volume 4, 2018 release, which is expected to be out at the end of December 2018. We will let you know once it is rolled out. 

Regards, 

John R 

Hi.. Is it rolled out now?

[Gurunathan A]

Hi Peeyush, 

  

  

Yes, we have provided the support for this feature 17.1.40 (nuget) and  it'slater version. 

  

  

Please let us know if  you have further queries. 

Regards, 

Gurunathan