How to execute different sass files based on a css class?

1
Hi all   we got 3 apps which all have an unique css class for its styling. Now i want to include sass framework and seperate all the css per app. In order to achieve this we define a base.scss. In this scss we want to reach this:   if .app1 then execute app1.scss else if .app2 then execute app2.scss else if .app3 then executr app3.scss else empty   on the net I saw this possibiliti but i could not figure it out since it is thenfirst time implementing sass
asked
1 answers
0

I think you can set up a structure where you create a lib-app1.css and a custom-app1.css and dynamically load this based on the URL. In most situations you will have custom URLs. 

 

In order to create a lib-app1.css and custom-app1.css you'll have to duplicate the custom-variables.scss, lib.scss and custom.scss. Change the names of each file to something else (that contains the name of the app for example) and then generate new css files. Make sure you load the correct custom-variables.scss in the lib.scss and custom.scss! 

 

The advantage of this situation is that you only have to maintain the custom-variables for each app. Once the structure is setup, you can add countless new labels that make use of the same library. You don't have to edit the buttons.scss from your lib folder for each label but can modify it for all the labels using the custom-variables. 

The disadvantage is that you will create a lot of files with minimum amount of change. I'm not sure what the performance impact is on your app. As long as you make sure your switch statement in your index.html will only load the correct lib and custom, I think your app will perform fine.

 

Hope this helps :)

answered