LESSでDebug用のstyleを適用させる

装飾にデバッグ?(゚Д゚)ハァ?と思われるかも知れませんが、styleを作る時に「一時的に強制的にhoverのstyleにしておきたい」とか「強制的にdisplay: blockにしておきたい」とかあると思うのです。具体例を上げるとul/liを横並びにしてMenuを作る時とかですかね。ChromeならDeveloper toolsでポチポチやれば解決できなくは無いですが、一々ポチポチするのが面倒なので、LESSの方で吸収したいと思います。

LESSだと if ~ else とは書けないので、こんな感じでmixinを用意しておきます。debug用にdebug.less何て作っておくと良いかも知れません。

@debugflg: true;
.x-debug() when (@debugflg = true) {}
.xx-debug() when (@debugflg = true) {}
.xxx-debug() when (@debugflg = true) {}
:
:

作ったらdebug用styleを埋め込みたい所で作成したmixinをコールします。

.menu {
  li {
    .x-debug();
    a {
      .xx-debug();
    }
  }
}

これでdebug用styleが適用されます。debug用styleを外したい場合は、@debug: false;にしてあげればOKです。debug以外にも使える小技?なので、色々幅が広がりそうですね。

それでは、楽しいPHP・LESS・WordPressライフを:)

よろしければSNSでシェアしてください!

コメントを残す

*
*