Custom design palette theme in Pinegrow 6 + scss are incomptabile

General
1

Hello,
If i clic on the design palette options in Pinegrow 6 and in same theme i use bootstrap in scss, if i make some modification directly on the scss file nothing change, nothing happen.

We want to create some palette + use it on scss but im not sure it’s possible,
But if possible an option to deactive the design palette option to ensure that we can no longer use scss

Thanks

2

Hi @kwizfreak,
So, you should be able to use both the Design panel and Sass in the same project. Where you might be running into trouble is if you are trying to over-ride something set in the Design panel due to the cascade. Can you give me an example of what you are adding to the .scss stylesheet and how you are adding it to the page/the desired behaviour?
Cheers,
Bob

3

Hi @RobM,

Here a capture video :
I can change my scss (you can see i change my sucess color in variable.scss to red but when i active the design palette, i can’t change anymore (in design palette don’t work) and i scss not working any more, and now i can’t desactive the design palette (i need to delete the pinegrow file at the root directory and relaunch pinegrow)
Best Regards

4

Hi @kwizfreak,
So, the behavior you are seeing is the expected one and I will explain.

At the base of the Sass styling is the bootstrap.scss file that imports the _variables.scss file. It also imports all of the rest of the theme files. That bootstrap.scss file is imported for the final compile by the custom.scss file. The cascade order without the Design panel being activated is to add any rules duplicated from the _variables.scss to the custom.scss file, followed by the main bootstrap.scss file. When the Design panel is activated, the Design panel rules/variables are added at the top of the custom.scss file. So, what does this mean?

Without the Design panel activated, the duplicated variable in the _variable.scss file is after the original variable. Therefore, the compiler will use the later value - just like in a normal cascade where the last rule declared is the one that is applied. If you elect to copy the rule/variable to the custom.scss sheet (this is the way you should be doing it) then the new value will be added before the bootstrap import. However, the _variable.scss has the values post-fixed with !default, so they are only used if the variable hasn’t already been declared, so your value in custom.scss will be used in the compiler.

Finally - and here we get to the behavior you are seeing - when the Design panel is activated, the variables are defined at the very top of the custom.scss file. Both the duplicated variables and any variables not post-fixed with !default in the Bootstrap theme files will override these Design panel variables. Basically, the compiler when it sees multiple variables with the same name will select the last one loaded.

So, two suggestions for working with variables, Sass, and the Design panel.

  1. Only use new, unique variable names in your custom Sass unless you want to override the values set in the Design panel.
  2. Always duplicate your variables/rules to the custom.scss file to avoid overwrite of custom values when Bootstrap updates.

Does this make sense?

Cheers,
Bob

5

Or select to work with one, or the other.
The design panel is a customization facilitator that avoids the need for immersion in sass files. For projects where large customization is needed, using SASS may be preferable. Both at the same time? That seems tricky to me.