# テーマコンポーネントでScssをデバッグできますか？

**URL:** https://meta.discourse.org/t/can-i-debug-scss-in-theme-components/200332
**Category:** Support
**Created:** [2021 年 8 月 13 日午後 5:35 UTC](https://meta.discourse.org/t/can-i-debug-scss-in-theme-components/200332 "2021-08-13T17:35:28Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [2021 年 8 月 13 日午後 5:35 UTC](https://meta.discourse.org/t/can-i-debug-scss-in-theme-components/200332/1 "2021-08-13T17:35:28Z")

</div>

テーマ設定の変数を SCSS 関数で使用したいと考えています。変数をデバッグしたいのですが、現時点で私が発見した唯一の方法は、コンポーネント外の専用ファイルにコードを複製し、そのファイル内で直接変数を宣言することです。

これまでに誰かがこれを行ったことはありますか？Theme CLI を使用し、コンポーネントのフォルダ構造内で SCSS 変数をデバッグする方法はありますか？

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2021 年 8 月 13 日午後 7:10 UTC](https://meta.discourse.org/t/can-i-debug-scss-in-theme-components/200332/2 "2021-08-13T19:10:36Z")

</div>

デバッグについて、どのようなことをお望みでしょうか？Sass の `@debug` をご使用になるおつもりですか？

少しばかげた方法ですが、以前、Sass 変数の出力を確認するために以下のようなことをしたことがあります。

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

```

---

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [2021 年 8 月 13 日午後 7:39 UTC](https://meta.discourse.org/t/can-i-debug-scss-in-theme-components/200332/3 "2021-08-13T19:39:40Z")

</div>

ああ、私も同じことをしました。ヘッダーの直後に、少し地味な背景でね 🙈 共有してくれてありがとう。もう少し恥ずかしさが和らぎました 😄

それに、`@debug` を使いたいです。何かオプションを見落としているかどうかが気になっていたのですが、変数をそのまま書いて、専用のファイルで関数をデバッグするだけでも十分簡単ですね。
