Can I debug Scss in theme components?

Support
1

I want to use variables from theme settings in Scss functions. I’d like to be able to debug the variables, but the only way that I found so far is replicating the code in dedicated files outside of the component and declaring the variables right in those files.

Did someone do that already? Is there a way to debug Scss variables when working with the Theme CLI and within the component folder structure?

2 Likes
2

What are you expecting in terms of debugging? are you looking to use Sass’ @debug?

It’s a little silly, but I’ve done this before to see the output of a Sass variable:

body {
  &:after {
    content: "#{$primary}" !important;
    display: block;
    background: salmon;
    color: white;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999999;
  }
}
4 Likes
3

Oh, that’s what I did as well, just after the header and with a less creative background :see_no_evil: Thanks for sharing, I already feel less silly now! :grinning_face_with_smiling_eyes:

And yes, I want to use @debug. I just wondered if I’d miss an option. But it’s also easy enough to just write out the variables and debug the functions in a dedicated file.

3 Likes