youkantoe

pugでクラスを状況によってクラスを使い分ける

2020 / 4 / 8

.c-button.u-rds--main(
  class=`
    ${ typeArray.includes('arrow') ? "c-button--arrow" : "" } 
    ${ typeArray.includes('thick') ? "c-button--thick" : "" } 
    ${ type === "tel" ? "c-button--tel" : "" } 
    ${ type === "button" ? "c-button--button" : "" } 
  `
)

こういう感じでクラスを追加しているのだけども、なんだか可読性もわるいし、""でクラスを出さないようにしているので、ちょっとあれですが、動くので使っている。

もしかしたら、もっと良くできるかもしれん…。

pugはES6のシンタックスが効くのでそれは良いですね..。

p.c-button__text.u-bold(
  class = `
    ${ type === 'button' && !typeArray.includes('font-size-semi-large') && !typeArray.includes('font-size-large') ? "u-font-size__s" : "" } 
  `
)

また、こんな感じで、複数の条件に当てはまるかどうかを検索するときは、記述が複雑になって、可読性が下がりがちなので、　https://stackoverflow.com/questions/37896484/multiple-conditions-for-javascript-includes-method このページみたいな、someとincludesを両方使用した方法を試してみると良いのかもしれない(要検証）

可読性が悪くなったら普通にif文かいてもいいのかな？