前提・実現したいこと

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

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

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

該当のソースコード

html
1    <form method="get" class="search" action="">
2      <input type="search" placeholder="キーワード入力" value="" name="key" class="search-text" />
3      <ul class="checkbox">
4        <li class="example">季節
5          <ul class="specific">
6            <li><input type="checkbox" name="test" id="test1" value="1"><label for="test1">aaa</label></li>
7            <li><input type="checkbox" name="test" id="test2" value="2"><label for="test2">bbb</label></li>
8          </ul>
9        </li>      </ul>
10      <input type="submit" value="Search">
11    </form>

SCSS
1    .search-text {
2      border: solid 1px $main;
3      opacity: 0;
4      outline: 0;
5      z-index: 200;
6      height: 80px;
7      transition: .5s;
8      background: url('../images/search.png') no-repeat right/contain;
9    }
10    .search-text:focus {
11      opacity: 1;
12      width: 60%;
13      cursor: text;
14    }
15    @if .search-text:focus{
16      .checkbox{
17        opacity: 1;
18        width: 60%;
19      }
20    }
21

試したこと

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

m.ts10806

2021/05/03 21:11 編集

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

maisumakun

2021/05/03 23:06

> そもそもif文で違うクラスにCSSを当てることが出来るのか分かりません。 ifで「どういう場合」だけ分岐させたいのでしょうか？

Kisaragi_

2021/05/04 07:01

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

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

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

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

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

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

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

scss
1.search-text {
2  border: solid 1px $main;
3  opacity: 0;
4  outline: 0;
5  z-index: 200;
6  height: 80px;
7  transition: .5s;
8  background: url('../images/search.png') no-repeat right/contain;
9  // &は、そのブロックの親を指すことができる
10  &:focus {
11    opacity: 1;
12    width: 60%;
13    cursor: text;
14    & + .checkbox{
15      opacity: 1;
16      width: 60%;
17    }
18  }
19}