Q&A
質問タグにSASSを追加してください
前提・実現したいこと
各sectionごとに交互に代わるデザインで、@mixinを用いてスタイルをまとめて定義。
さらにその中で、「sectionが偶数（番目）であればAのスタイル、sectionが奇数（番目）であればBのスタイル」を適用できるようにしたいと考えております。
しかし、掲示の通りにすると、以下のコンパイルエラーが出てしまいます。
ひとつずつ指定すれば動作的には問題ないですが、先々のためにも身につけたいと思っていますので、なにとぞご教授よろしくお願いいたします。
質問の仕方も至らぬ点があるかと思いますので、不備に関しましてはすぐにご返信致します。
発生している問題・エラーメッセージ
expected "{".
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1"> 7 <link rel="preconnect" href="https://fonts.gstatic.com"> 8 <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&family=Noto+Serif:wght@700&display=swap" rel="stylesheet"> 9 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 10 <link rel="stylesheet" href="css/reset.css"> 11 <link rel="stylesheet" href="css/style.css"> 12 <link rel="stylesheet" href="css/_va.scss"> 13 <link rel="stylesheet" href="css/responsive.css"> 14 15 <title>テイク2</title> 16</head> 17 18<body> 19 <header> 20 21 <div class="header-wrapper"> 22 <h1 class="header-left"><a href="#">Cresta Design</a></h1> 23 <ul class="header-nav"> 24 <li class="header-item"><a href="#">Concept</a></li> 25 <li class="header-item"><a href="#">Service</a></li> 26 <li class="header-item"><a href="#">Works</a></li> 27 <li class="header-item"><a href="#">Contact</a></li> 28 </ul> 29 30 <button class="burger-btn"> 31 <span></span> 32 <span></span> 33 <span></span> 34 </button> 35 36 </div> 37 38 39 40 41 </header> 42 <main> 43 <div id="fv"> 44 <div class="main-wrapper"> 45 <p class="main-copy">Design for Smile.</p> 46 <p class="main-text">快適なオフィスをデザインする</p> 47 </div> 48 </div> 49 50 <section id="concept"> 51 <div class="wrapper"> 52 <h2 class="section-title left">Consept</h2> 53 <h3 class="sub-title">“働きたくなる空間”をデザインすることで 人々を幸せにする。</h3> 54 <div class="concept-item"> 55 <div class="sub-text">私たちは、オフィスに特化した空間デザイン専門としております。その理由は、「働きたくなる空間で仕事ができれば多くの人を幸せにできるのではないか」と考えるためです。そんな想いの株式会社Cresta Designだからこそできる空間デザインを提供させていただきます。</div> 56 <img src="img/concept-image@2x.jpg" alt="会議場所"> 57 </div> 58 59 </div> 60 <p class="message-right">Our Concept</p> 61 </section> 62 63 <section id="works"> 64 <div class="wrapper"> 65 <h2 class="section-title right">Works</h2> 66 67 <ul class="works-list"> 68 <li class="works-card"> 69 <img class="works-img" src="img/card-img01@2x.jpg" alt="ひろいオフィス"> 70 <p class="works-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p> 71 </li> 72 <li class="works-card center"> 73 <img class="works-img" src="img/card-img02@2x.jpg" alt="日が差し込む"> 74 <p class="works-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p> 75 </li> 76 <li class="works-card"> 77 <img class="works-img" src="img/card-img03@2x.jpg" alt="くつろぎ"> 78 <p class="works-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p> 79 </li> 80 </ul> 81 <input class="btn" type="submit" value="View more"> 82 </div> 83 <p class="message-left">Our works</p> 84 </section> 85 86 <section id="service"> 87 <div class="wrapper"> 88 <h2 class="section-title left">Service</h2> 89 <ul class="service-wrapper"> 90 <li class="service-item"> 91 92 <h3 class="sub-title">Hearing</h3> 93 <img class="service-img" src="img/service-img01@2x.jpg" alt=""> 94 </li> 95 <li class="service-item"> 96 97 <h3 class="sub-title">Planning</h3> 98 <img class="service-img" src="img/service-img02@2x.jpg" alt=""> 99 </li> 100 <li class="service-item"> 101 102 <h3 class="sub-title">Direction</h3> 103 <img class="service-img" src="img/sevice-img03@2x.jpg" alt=""> 104 </li> 105 </ul> 106 </div> 107 <p class="message-right">Our Service</p> 108 </section> 109 110 <section id="contact"> 111 <div class="wrapper"> 112 <h2 class="section-title right">Contact</h2> 113 114 <div class="sub-text">お気軽にご相談ください。</div> 115 <input class="btn" type="submit" value="Contact"> 116 </div> 117 118 <p class="message-left">Contact us</p> 119 </section> 120 121 122 </main> 123 <footer><small>©︎cresta.design all rights reserved</small></footer> 124</body></html> 125
スタイルシート
SCSS
1.section-title { 2 @include title; 3 }
定義シート
SCSS
1@mixin title { 2/*sectionが偶数番目の時に以下Aスタイルを適用*/ 3 @if section:nth-chid(even){ 4 font-size: 6rem; 5 font-style: italic; 6 font-weight: bold; 7 margin-bottom: 73px; 8 color: $white; 9 10 &::after { 11 content: ""; 12 border: none; 13 width: 200px; 14 height: 5px; 15 vertical-align: middle; 16 display: inline-block; 17 background-color: red; 18 margin-left: 30px; 19 } 20 } 21/*sectionが偶数番目以外に以下Bスタイルを適用*/ 22 @else { 23 font-size: 6rem; 24 font-style: italic; 25 font-weight: bold; 26 margin-bottom: 73px; 27 color: $black; 28 29 &::after { 30 content: ""; 31 border: none; 32 width: 200px; 33 height: 5px; 34 vertical-align: middle; 35 display: inline-block; 36 background-color: $black; 37 margin-right: 30px; 38 } 39 40 } 41} 42
試したこと
①どこにエラーの原因があるのか
→試しに条件の「section:nth-chid(even)」を「section」にしてみるとエラーは発生しないので、疑似クラスの部分が影響していると思われます。
②「何番目」の指定方法「:nth-child(2n)」などに変える
→特に変化なし
③{}の過不足の確認
→特に過不足はなかったと認識しております。
補足情報（FW/ツールのバージョンなど）
OS:Windows
エディタ:Brackets
ブラウザ:クローム
閲覧サイト様
回答1件
0
ベストアンサー
@if のパラメータ？にセレクタを渡すことはできません。式を渡してください。
The @if rule is written @if <expression> { ... }, and it controls whether or not its block gets evaluated (including emitting any styles as CSS).
An expression is anything that goes on the right-hand side of a property or variable declaration.
投稿2021/02/24 03:00
総合スコア36928
ご回答ありがとうございます！
セレクタだから駄目だったのですね！そうなると、どのような条件を用いたらよいのでしょうか？
sectionの偶数番目と奇数番目でそれぞれ異なるクラス名を追加で持たせ、そのクラス名を持っているかどうかで条件分岐することも考えたのですが、セレクタ自体がダメとなるとそれも難しそうです。。
@if で書くのは難しいように思います。普通にセレクタで書く方法以外は思いつきません。
そうなんですね????
ifでまとめられたらとても便利だろうなと思っていたのですが、こういうケースでは使えないのですね。勉強になりました。迅速なご対応ありがとうございました。
あなたの回答
tips
プレビュー
