@hituji_post (ポストひつじ)posted at 2021-02-24

@mixinの中でifを用いて条件分岐をし、それぞれに適切なスタイルが適用されるようにしたい

Q&A

Closed

解決したいこと

各sectionごとに交互に代わるデザインで、@mixinを用いてスタイルをまとめて定義。
さらにその中で、「sectionが偶数（番目）であればAのスタイル、sectionが奇数（番目）であればBのスタイル」を適用できるようにしたいと考えております。
しかし、掲示の通りにすると、以下のコンパイルエラーが出てしまいます。

ひとつずつ指定すれば動作的には問題ないですが、先々のためにも身につけたいと思っていますので、なにとぞご教授よろしくお願いいたします。
質問の仕方も至らぬ点があるかと思いますので、不備に関しましてはすぐにご返信致します。

発生している問題・エラー

expected "{".

該当するソースコード

<!DOCTYPE html>
<html lang="ja">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <link rel="preconnect" href="https://fonts.gstatic.com">
 <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&family=Noto+Serif:wght@700&display=swap" rel="stylesheet">
 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
 <link rel="stylesheet" href="css/reset.css">
 <link rel="stylesheet" href="css/style.css">
 <link rel="stylesheet" href="css/_va.scss">
 <link rel="stylesheet" href="css/responsive.css">

 <title>テイク2</title>
</head>

<body>
 <header>
（略）
 </header>
 <main>
  <div id="fv">
   （略）
    </div>

   </div>
  </section>

  <section id="works">
   <div class="wrapper">
    <h2 class="section-title right">Works</h2>

    （略）
   </div>

  </section>

  <section id="service">
   <div class="wrapper">
    <h2 class="section-title left">Service</h2>
    （略）
   </div>

  </section>

  <section id="contact">
   <div class="wrapper">
    <h2 class="section-title right">Contact</h2>
    （略）
   </div>


  </section>


 </main>
</body></html>

スタイルシート

@charset "UTF-8";
/*カラー*/
/*mixin*/

* {
  box-sizing: border-box;
}



html body .right {
  text-align: right;
  color: #FFFFFF;
}
html body .left {
  text-align: left;
}

}
html body .section-title {
  font-size: 6rem;
  font-style: italic;
  font-weight: bold;
  margin-bottom: 73px;
  color: #FFFFFF;
}
html body .section-title::after {
  content: "";
  border: none;
  width: 200px;
  height: 5px;
  vertical-align: middle;
  display: inline-block;
  background-color: red;
  margin-left: 30px;
}

定義シート

@mixin title {
 @if section {
  font-size: 6rem;
  font-style: italic;
  font-weight: bold;
  margin-bottom: 73px;
  color: $white;

  &::after {
   content: "";
   border: none;
   width: 200px;
   height: 5px;
   vertical-align: middle;
   display: inline-block;
   background-color: red;
   margin-left: 30px;
  }
 }

 @else {
  font-size: 6rem;
  font-style: italic;
  font-weight: bold;
  margin-bottom: 73px;
  color: $black;

  &::after {
   content: "";
   border: none;
   width: 200px;
   height: 5px;
   vertical-align: middle;
   display: inline-block;
   background-color: $black;
   margin-right: 30px;
  }

 }
}

自分で試したこと

①どこにエラーの原因があるのか
→試しに条件の「section:nth-chid(even)」を「section」にしてみるとエラーは発生しないので、疑似クラスの部分が影響していると思われます。

②「何番目」の指定方法「:nth-child(2n)」などに変える
→特に変化なし

③{}の過不足の確認
→特に過不足はなかったと認識しております。

Are you sure you want to delete the question?