# Custom design palette theme in Pinegrow 6 + scss are incomptabile

**URL:** <https://forum.pinegrow.com/t/custom-design-palette-theme-in-pinegrow-6-scss-are-incomptabile/5403>\
**Category:** General\
**Created:** [July 1, 2021, 9:53am UTC](https://forum.pinegrow.com/t/custom-design-palette-theme-in-pinegrow-6-scss-are-incomptabile/5403 "2021-07-01T09:53:20Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![kwizfreak](https://avatars.discourse-cdn.com/v4/letter/k/8797f3/32.png) [@kwizfreak](https://forum.pinegrow.com/u/kwizfreak)\
**Post date:** [July 1, 2021, 9:53am UTC](https://forum.pinegrow.com/t/custom-design-palette-theme-in-pinegrow-6-scss-are-incomptabile/5403/1 "2021-07-01T09:53:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [July 1, 2021, 10:51am UTC](https://forum.pinegrow.com/t/custom-design-palette-theme-in-pinegrow-6-scss-are-incomptabile/5403/2 "2021-07-01T10:51:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kwizfreak](https://avatars.discourse-cdn.com/v4/letter/k/8797f3/32.png) [@kwizfreak](https://forum.pinegrow.com/u/kwizfreak)\
**Post date:** [July 1, 2021, 10:57am UTC](https://forum.pinegrow.com/t/custom-design-palette-theme-in-pinegrow-6-scss-are-incomptabile/5403/3 "2021-07-01T10:57:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [July 1, 2021, 3:14pm UTC](https://forum.pinegrow.com/t/custom-design-palette-theme-in-pinegrow-6-scss-are-incomptabile/5403/4 "2021-07-01T15:14:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [July 1, 2021, 5:53pm UTC](https://forum.pinegrow.com/t/custom-design-palette-theme-in-pinegrow-6-scss-are-incomptabile/5403/5 "2021-07-01T17:53:52Z")

</div>

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.
