[add] デバッグ用CSSファイルを作成

[manabuyasuda]

リンク先の漏れがないか、適切にマークアップされているか、任意のクラスやプレフィックスが付いているか探すなど。

// 任意のプレフィックスがついている要素を探します。
// @example scss
// @include _debug-prefix('c-') {
//   outline: 5px solid crimson !important;
//   background-color: rgba(crimson, 0.1) !important;
// }
@mixin _debug-prefix($prefix) {
  [class^="#{$prefix}"],
  [class*=" #{$prefix}"] {
    @content;
  }
}

// 任意のクラスがついている要素を探します。
// @example scss
// @include _debug-class('c-layout') {
//   outline: 5px solid crimson !important;
//   background-color: rgba(crimson, 0.1) !important;
// }
@mixin _debug-class($class) {
  [class^="#{$class} "],
  [class$="#{$class}"] {
    @content;
  }
}

// @include _debug-element('[target="_blank"]') { // 外部リンクを探す
//   outline: 5px solid crimson !important;
//   background-color: rgba(crimson, 0.1) !important;
// }
// @include _debug-element('[href=""], [href="#"]') { // リンク先の指定がない
//   outline: 5px solid crimson !important;
//   background-color: rgba(crimson, 0.1) !important;
// }
@mixin _debug-element($element) {
  #{$element} {
    @content;
  }
}