Vue.js scssのあて方

Question

vue.jsを使ってフロントを構築しています。
下記のところのスタイルだけ丸く変更したいのですがclass="detail_title"やclass="detail_content"は違うところでも多用されておりスタイルを変更することはできません。
下記のスタイルだけ変更したい場合はどう書けばいいのでしょうか？
知識ある方ご教授ください。よろしくお願いいたします

   <div v-if="user.interests.length > 0" class="detail_content">
          <p v-for="interest user.interests">・{{ interest.name }}</p>
        </div>
        <p v-else class="detail_content">
          空欄です
        </p>
      </div>

      <div class="detail">
        <p class="detail_title">興味</p>
        <div v-if="user.interests.length > 0" class="detail_content">
          <p v-for="interest user.interests">・{{ interest.name }}</p>
        </div>
        <p v-else class="detail_content">
          空欄です
        </p>
      </div>


============================
scss
<style lang="scss" scoped>
.detail{
  padding: 8px 0px;
  margin: 0 24px;
  &_title {
    font-style: normal;
    font-weight: 600;
    font-size: 10px;
    color: red;
    margin-bottom: 8px;
  }
  &_content {
    background: #f0f2f5;
    border-radius: 4px;
    padding: 8px;
    font-style: normal;
    font-size: 15px;
    color: #4d4452;
  }
}

Answer 1

ああ、やっと問題と答えが見えてきました。一旦今までの話は忘れてもらっていいです。クラス名に複数の名前を設定できるのはご存知ですか？こんなふうに

      <div class="detail interest">
        <p class="detail_title interest">興味</p>
        <div v-if="user.interests.length > 0" class="detail_content interest">
          <p v-for="interest user.interests">・{{ interest.name }}</p>
        </div>
        <p v-else class="detail_content interest">
          空欄です
        </p>
      </div>

interestが付加されているのがお分りかと思います。これをCSS上で

.detail.interest {
    border-radius: 4px;
}

とすればdetailとinterest両方のクラスを持つ要素にのみ角丸が適用されます。セレクターにスペースがないのに注意してください。クラスセレクターの仕様です。
クラスセレクター - CSS: カスケーディングスタイルシート | MDN
これを使えば多分のぞんだことができるでしょう。

Comments

[kakedashidesu]

返信ありがとうございます
以下のエラーになるのですがどうしてなのでしょうか？
.detail.interest {
border-radius: 4px;
}を付け足した時に以下のエラーになるのですがどうしてなのでしょうか？
✖ 2 problems (2 errors, 0 warnings)
2 errors and 0 warnings potentially fixable with the `--fix` option.

[A_kirisaki]

エラー全文をいただければ何かわかるかもしれません。それしか出ていませんか？

[kakedashidesu]

空欄がありエラーになっていました！！エラーは治りましたがスタイルが変わらないです！！

[A_kirisaki]

例に出したのはdetailなのでdetail_titleなどに適宜変えてみてください。

[kakedashidesu]

どこを変えればいいのでしょうか？

[A_kirisaki]

CSSの.detail.interestの部分です

[kakedashidesu]

cssのdetail.interestをdeteil.titleに変更しました

[kakedashidesu]

border-radius　が適応されてないみたいです

[kakedashidesu]

colorを指定してあげたところ変わったのですがどうしてなのでしょうか？

[A_kirisaki]

,detail_title.interestですよ。落ち着きましょう。

[kakedashidesu]

あと <p class="detail_title interest">興味</p>にはスタイルは適応させたくなく
下記だけスタイルを変更させたいです
<div v-if="user.interests.length > 0" class="detail_content interest">
<p v-for="interest user.interests">・{{ interest.name }}</p>
</div>
<p v-else class="detail_content interest">
空欄です
</p>

[kakedashidesu]

すいません。全くわかりません。

[kakedashidesu]

色々ごちゃごちゃになってしましました

[kakedashidesu]

まずcssの指定なのですが
.detail.interest {
border-radius: 4px;
}
上記の意味はdiv(detai)の中にあるinterestのスタイルを変更させるという意味であってますか？

[A_kirisaki]

いえ、divにあるdetailとinterest両方かかっているものにのみスタイルが当たります

[kakedashidesu]

1 <div class="detail interest"> は　 ○
2 <div class="detail_conterest interest"> は　○
3 <div class="detail">
<div class= "interest"> ✖️　という認識であっていますか？

[A_kirisaki]

1.のみ○です

[kakedashidesu]

ありがとうございます！！！納得できました！！！！！

[kakedashidesu]

うまくいきました！！！
とても勉強になりまいした！！！！！
ありがとうございました！！！！

Answer 2

Vue.jsであれば単一ファイルコンポーネントと言うHTML、JavaScript、CSSをまとめたファイルをWebpackでコンパイルすることが一般的です。
単一ファイルコンポーネント — Vue.js
この中でかぶらないのあれば他のファイルとクラス名が被ってもコンパイル時によしなに名前がかぶらないようにやってくれます。この例ではCSSしか使っていませんが、どうしてもscssが使いたい場合はscssを使うこともできるようですので調べてみるのも良いかもしれません。

Comments

[kakedashidesu]

他のファイルとクラス名はかぶっていないです。上記のファイルと同じファイルに直接scssを書いています。

[kakedashidesu]

ファイル内でclass = "detail_content"を多用しており、上記のとこだけ変更したいのです。
質問の仕方が悪くてすいません

[A_kirisaki]

その場合はコンポーネントの分け時かもしれません。あまり大きなコンポーネントを作らず、小さく分けるよう心がけてみてください。
```
<div class="detail">
<p class="detail_title">興味</p>
<div v-if="user.interests.length > 0" class="detail_content">
<p v-for="interest user.interests">・{{ interest.name }}</p>
</div>
<p v-else class="detail_content">
空欄です
</p>
</div>
```
このくらいの単位をコンポーネントにまとめられそうではなさそうでしょうか

[kakedashidesu]

ん？？？
この興味のブロックだけ違うコンポーネントにするということですか？
なぜ違うコンポーネントにする必要があるのでしょうか？
スタイルはほぼ同じで興味だけ少し丸くしたいだけなのですが

Answer 3

スコープ付き CSSを使えばいいのでは

<style lang="sass" scoped>
.detail{
  padding: 8px 0px;
  margin: 0 24px;
  &_title {
    font-style: normal;
    font-weight: 600;
    font-size: 10px;
    color: red;
    margin-bottom: 8px;
  }
  &_content {
    background: #f0f2f5;
    border-radius: 4px;
    padding: 8px;
    font-style: normal;
    font-size: 15px;
    color: #4d4452;
  }
}
</style>

Comments

[kakedashidesu]

ん？？？どういうことでしょうか？？？
他で使っているclass= detail_cantentにも影響するような