We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Overriding SCSS variables

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-size24px;
@import "ej2-react-buttons/styles/button/fabric.scss";

Thanks.

Tom

9 Replies

SU Sridurgha Uthayakumaran Syncfusion Team June 11, 2018 04:24 PM UTC

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. 
 
 
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 
 



TS Tom Shane June 18, 2018 05:51 AM UTC

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


SM Saranya Murugasamy Syncfusion Team June 19, 2018 06:00 PM UTC

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



TS Tom Shane June 23, 2018 05:36 PM UTC

That's a great news!

Thanks.


SU Sridurgha Uthayakumaran Syncfusion Team June 25, 2018 08:58 AM UTC

Hi Tom, 

Thanks for the update. 

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

Regards, 
Sridurgha U 



JA Jatinder replied to Saranya Murugasamy September 27, 2018 06:20 PM UTC

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


JR John Rajaram Syncfusion Team September 28, 2018 11:24 AM UTC

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 



PE Peeyush replied to John Rajaram August 6, 2019 01:40 PM UTC

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?


GA Gurunathan A Syncfusion Team August 7, 2019 08:47 AM UTC

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 


Loader.
Live Chat Icon For mobile
Up arrow icon