Can I debug Scss in theme components?

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?


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;

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.