質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.06%

SCSSでのif文について

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 90

score 1

前提・実現したいこと

検索ボタンの虫眼鏡などをクリックしたときに入力バーが伸び、下にulでキーワードの候補を表示しようとしています。
現状は入力バーはきちんと伸ばせています。その下に候補を表示したいのですが私のif文の書き方が間違っているようで表示されません。

発生している問題・エラーメッセージ

Invalid CSS after "@if": expected expression(e.g. 1px, bold)

該当のソースコード

    <form method="get" class="search" action="">
      <input type="search" placeholder="キーワード入力" value="" name="key" class="search-text" />
      <ul class="checkbox">
        <li class="example">季節
          <ul class="specific">
            <li><input type="checkbox" name="test" id="test1" value="1"><label for="test1">aaa</label></li>
            <li><input type="checkbox" name="test" id="test2" value="2"><label for="test2">bbb</label></li>
          </ul>
        </li>      </ul>
      <input type="submit" value="Search">
    </form>
    .search-text {
      border: solid 1px $main;
      opacity: 0;
      outline: 0;
      z-index: 200;
      height: 80px;
      transition: .5s;
      background: url('../images/search.png') no-repeat right/contain;
    }
    .search-text:focus {
      opacity: 1;
      width: 60%;
      cursor: text;
    }
    @if .search-text:focus{
      .checkbox{
        opacity: 1;
        width: 60%;
      }
    }

試したこと

自分なりに書き方を変えたり書く場所を変えたりしてみたのですが、
そもそもif文で違うクラスにCSSを当てることが出来るのか分かりません。
何かいい方法をご存じの方がいらっしゃったら教えていただきたいです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2021/05/04 06:11 編集

    SCSS詳しくないですけど、ちょっと見た感じ、何にもifで判断すべき条件式がないですね。
    エラーメッセージにも「どういう表記が期待されるか」書かれてるのでそれは参考になりませんか?

    キャンセル

  • maisumakun

    2021/05/04 08:06

    > そもそもif文で違うクラスにCSSを当てることが出来るのか分かりません。

    ifで「どういう場合」だけ分岐させたいのでしょうか?

    キャンセル

  • Kisaragi_

    2021/05/04 16:01

    キーワードを入力するためにinputをクリックしたときに表示させたいです。
    なので.search-text:focusになっているときに.checkboxを出そうとしています。

    キャンセル

回答 1

checkベストアンサー

+1

私のif文の書き方が間違っているようで

はい、その通りです。
そして、SCSSにおいての@ifの使い方がそもそも間違っています。
SCSSにおいての@ifは、あくまでもSCSS上の変数などに対して適用されるものであるため、CSSにコンパイルされた後の動作に関する挙動を制御するものではありません。
よって、クリックした時に〇〇をする、といったことをするためのものではありません。
SCSS上の変数などの条件によって、ネストされたSCSS構文を適用させる、させないといった用法になります。

なので、そこを勉強されたほうがよいかと思います。

コメントのやりとりなどを参照して追記

質問者の挙動を実現するには、
質問者さんが、SCSSより前に、CSSの基礎をまず学ぶべきかと。

まず、CSSでどうなるかを記載します。

.search-text:focus + .checkbox{
  opacity: 1;
  width: 60%;
}

+は隣接セレクターと言い、
その次に記載しているセレクタが示すHTML要素を指定することができます。
以上を踏まえ、SCSSでは下記のように記載することができます。

.search-text {
  border: solid 1px $main;
  opacity: 0;
  outline: 0;
  z-index: 200;
  height: 80px;
  transition: .5s;
  background: url('../images/search.png') no-repeat right/contain;
  // &は、そのブロックの親を指すことができる
  &:focus {
    opacity: 1;
    width: 60%;
    cursor: text;
    & + .checkbox{
      opacity: 1;
      width: 60%;
    }
  }
}

以上のように、CSSの基礎を理解すれば、より効率的に記載が可能になるのが、
SCSSの最大のメリットとなります。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/05/04 15:48

    なので、今回のような、
    クリックした時に適用させる、は、
    SCSSの@ifは使う必要がありません。

    :focusのセレクタのみで実装できるかと思われます。

    キャンセル

  • 2021/05/04 16:23

    .search-text:focusの時のみ.checkboxのCSSを変更する場合でも:focusセレクタのみで実装できるのでしょうか?

    キャンセル

  • 2021/05/04 17:22 編集


    checkboxはクラスですか?
    つまり、
    .search-textと.checkbox、両方のクラスがついたものの:focusということでしょうか?

    キャンセル

  • 2021/05/04 17:26

    あぁ、HTMLを見てようやっと理解しました。
    ul.checkboxに対して、ということですね。
    回答に追記しますが、
    本質問要件から越えた範疇の部分には回答しませんので、
    SCSSより、まずCSSの基本からやっていったほうがよいかと。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.06%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る