常連

### 実現したいこと
現在、設問項目が動的に表示/非表示で切り替わるフォームを作成しています。
そこで、以下のような状況が発生し得るのですが、できれば「.hiddenを持たない.item（②〜⑤）」を対象に「最初の要素（②）」を取得して、それ以外の.item（③〜⑤）にスタイルを指定したいと考えています。

```HTML
<ul class="items">
<li class="item hidden">①</li>
<li class="item">②</li>
<li class="item">③</li>
<li class="item">④</li>
<li class="item">⑤</li>
</ul>
```

### 発生している問題・分からないこと
最初は簡単そうに思いましたが、いざやってみると全然うまくいかずに困っています。



### 該当のソースコード

```
特になし
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
.item:not(.hidden):not(first-of-type) {〜} →これだと、結局.hiddenを含む.itemも対象にfirst-of-typeが決定されてしまいました。

:hasなども使ってみましたが、結局思い通りの挙動にたどり着くことができず、藁をも縋る思いでこちらに質問させていただいた次第です。

### 補足
【追記】
実際にやりたいことは、表示状態にある.itemの最初のborder-topを無くしたいことだったのですが、以下のコーディングで期待している結果は得られました。

```SASS
.items {
border-top: solid 1px black;

&:first-child,
&:first-child.hidden+* {
border-top: none !important;
}

&.hidden {
display: none;
}
}
```

ですが、コーディングが冗長に見えます。もっと簡潔に記述する方法があれば教えていただきたいです。

【CSS】兄弟要素のうち、特定のクラスを持たない要素を対象に、最初の要素を取得したい

### 前提・実現したいこと
子要素の高さに応じて、親要素の高さを変更したいです。

###状況
メルカリのようなサイトを模写しているんですけど、サイドバー(左側)をクリックするとメイン(右側)部分の高さが子要素に応じて変更されるようにしたいです。

・現在の状況
![イメージ説明](7837d8cb8ecbd3833c24cb1ef5e97639.png)

・実現したい状況
![イメージ説明](a96bc61fc471ef8b414f4baceb9f6433.png)

### 該当のソースコード
・左カラムと右カラム
```
// マイページ全体
.user-showPage {
  background-color: #f5f5f5;
  &__main {
    padding: 50px 120px;
    display: flex;
  }
}
// サイドバー上部
.sideBar-Top {
  width: 400px;
  background-color: #ffffff;
}
.sideBar-contents li {
  position: relative;
  height: 50px;
  border-bottom: groove 1px;
  background-color: #ffffff;
  a {
  text-decoration: none;
  font-size: 18px;
  color: black;
  line-height: 50px;
  padding-left: 15px;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: all 0.3s ease 0s;
  }
  a:hover {
    opacity: 0.6;
    background: #333;
    color: #fff;
  }
}

// サイドバー下部
.sideBar-Low {
  h2 {
  font-size: 24px;
  font-weight: bold;
  padding-top: 30px;
  }
}
```
親要素
```
.main-information
  - if current_page?(logout_index_path)
    .logout-btn
      = link_to "ログアウト", "/"
```

```
.main-information {
  width: 100%;
  height: auto;
  background-color: #ffffff;
  margin-left: 100px;
}
```
子要素
```
.user-showPage
  .user-showPage__main
    = render "users/side_bar"
    = render "users/main_information"
```
```
.logout-btn {
  position: relative;
  width: 300px;
  height: 50px;
  background-color: blue;
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 50px;
  border-radius: 10px;
  text-align: center;
  a {
    line-height: 50px;
    color: #ffffff;
    text-decoration: none;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
```

### 試したこと
親要素にheight: auto;をした
display: inline-blockを親要素に試したが実現できなかった

### 参考サイト
https://techacademy.jp/magazine/26588
親要素の高さを子要素にする

子要素の高さに合わせて親要素の高さを変更したい

### 前提・実現したいこと
progateでScss記法を学びました。
stylesheet.scssファイルでアウトプットしようとしたところ、内容がまったく反映されません。
（Scss記法を試す前段階で、すでに反映されません。）
.Scss記法は.scssファイルに記載すると認識していたのですが、違うのでしょうか？

### 発生している問題・エラーメッセージ

```HTML
 <link rel="stylesheet" href="stylesheet.css">
```
```scss
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p,
form, input, div {
  margin: 0;
  padding: 0;
}

@font-face {
	font-family: 'Noto Sans JP';
	src: url("/noto-sans-jp/NotoSansJP-Regular.otf");
}

body {
  font-family: "Noto Sans JP", sans-serif;
}

li {
  list-style: none;
}
```
### 該当のソースコード


### 試したこと

.cssファイルにcss記法で書けば反映される。


### 補足情報（FW/ツールのバージョンなど）

Windows10,vscode,Googlechrome

scssが反映されない

### 実現したいこと
LP制作にあたり、
・コンテンツトップ部分に背景画像を設定しているのですが、可変させるとレイアウトが崩れるため修正したい

### 発生している問題・分からないこと
・コンテンツトップ部分に背景画像を設定しているのですが、可変させるとレイアウトが崩れている



### 該当のソースコード

```sass
&-introduce {
  position: relative;
  width: 100vw;
  margin: 0 auto;
  padding-top: 49%;
  background: url("img/mv_bg_pc.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  @include mobile {
    background: url("img/mv_bg_sp.png");
    padding-top: 121%;
}
```

```HTML
<section class="p-content-introduce">
<div class="p-content-introduce__wrapper u-center">
  <div class="p-content-introduce__inner">
    <div class="p-content-introduce__left">
      <p class="p-content-introduce__text">個人事業主のための<br>お得な健康保険料削減サービス</p>
      <picture>
        <source media="(max-width: 750px)" srcset="img/mv_logo_sp.png">
        <img class="p-content-introduce__bgImg" src="img/mv_logo_pc.png" alt="セクション1の画像">
      </picture>
      <div class="p-content-introduce__imgBox">
        <div class="p-content-introduce__imgBoxInner">
          <picture>
            <source media="(max-width: 750px)" srcset="img/mv_icon_sp.png">
            <img class="p-content-introduce__logoImg" src="img/mv_icon_pc.png" alt="セクション1の画像">
          </picture>
          <picture>
            <source media="(max-width: 750px)" srcset="img/mv_icon_text_sp.png">
            <img class="p-content-introduce__logoImg" src="img/mv_icon_text_pc.png" alt="セクション1の画像">
          </picture>
        </div>
      </div>
    </div>
    <div class="p-content-introduce__right">
      <picture>
        <source media="(max-width: 750px)" srcset="img/mv_img_sp.png">
        <img class="p-content-introduce__logoImg" src="img/mv_img_pc.png" alt="セクション1の画像">
      </picture>
    </div>
  </div>
  <a href="#" class="p-content-introduce__link">
    <picture>
      <source media="(max-width: 750px)" srcset="img/mv_XXXX_btn_sp.png">
      <img class="p-content-introduce__btn" src="img/mv_XXXX_btn_pc.png" alt="セクション1の画像">
    </picture>
  </a>
</div>
</section>
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
可変した際、背景が縮む際に画像の挙動がおかしい

### 補足
自分で試したことは以下になります。
・padding-topで画像の(高さ / 横幅) * 100を設定
・画像を、imgタグを用いてHTMLに直接設定

LP制作にあたりレスポンシブ対応に関して

sassで記述すると
ファイル分けして、ヘッダー部分のコードは
例えば、_header.scssにコードを書きます。
そして、style.scssに@import"module/header";として記述するとstyle.cssにコンパイルされるかと存じます。
しかし、毎回自動読み込みならず、watching sassをクリックしてもstyle.cssに反映せず、
**@import"module/header";の部分を毎度書き直すと反映します。
そうゆうものでしょうか？**>< live server （ブラウザで変更を瞬時に見れる拡張機能）で変更を確認しつつコードを
書いているので、毎回@importの部分を書き直すのが手間で>< sassのメリットを感じれません。。

ちなみにlive sass compiler の拡張機能を使っています。

どなたかご存知でしたら教えていただきたいですm(_ _)m

sassでコンパイル（読み込み）が自動で反映されない。

### 前提・実現したいこと

input要素の中にアイコンを追加して右寄せにしたい。

### 発生している問題・エラーメッセージ

```
input要素の中にアイコンが追加できない
```

### 該当のソースコード

```html
 <form action="">
   <input type="text" role="search" method="get" placeholder="&#xf002; 検索する">
 </form>
```
```sass
 form{
                text-align: center;
                input{
                    background-color: $search;
                    border-radius: 5px;
                    border: 1px solid #EBEBEB;
                    padding: 5px;
                    margin:10px 0 ;
                    display: inline-block;
                    font-family: FontAwesome;
                    font-style: normal;
                    font-weight: normal;
                    line-height: 1;
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                }
                
            }    
```

### 試したこと

 placeholderでアイコンを追加しようとしたが解決しなかった。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

input要素の中にアイコンを追加したい

タイトル通りなのですが、SassやLESSを使う理由がいまいちわかりません。

変数、関数、四則演算、ファイル分割、mixinなどが使えて便利なのはわかりますが、それ以上にデメリットが多いように感じます。

例えば、他人(連絡が取れない人)がSassで作ったサイトのcss(見た目)を一行変更する場合を、自分のまっさらなpcで開発環境を作るためにnode.js、gulpなどインポートして、開発環境を一から作る作業が面倒です。

cssだけならftpでもsshでも一発で変更完了なのにです。

cssファイルに直接編集したら目的は達成されますが、それだと未編集のSassファイルと差分が出てしまい何か違う気がします。.mapで出力してる場合尚更違う気がします。

さらに、cssは変数が使えるのでさらに導入するメリットがあまり感じません


大規模サイトの場合、SassやLESSを使うメリットはわかりますが中、小規模サイトでSassを使うメリットと、デメリットを教えてください。

さらに、皆様が良く使ってるSassのコンパイル方法を教えてください。


すごく勘違いした質問かもしれませんが、初心者の疑問です。

他の人が作ったSassファイルを簡単にコンパイルする方法、そもそもなぜSassを使うのですか？

### 実現したいこと
Live Sass CompilerがコンパイルせずにCSSファイルをCSSフォルダへと作成したい

### 発生している問題・分からないこと
一度初期化したりと色々いじってしまってから使用できなくなりました。

エラーやsettings:jsonは下記の画像です。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-05-10/a23cb090-b512-40cd-bd72-c644a61afbbe.jpeg)

出力画面です。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-05-10/122f6774-a0f2-44bf-89ef-f605f403407d.jpeg)

setting:jsonに表示されていたエラー？画像です。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-05-10/e83bf1eb-bb5d-45ee-826d-2df3fccb528e.png)

5/10の14:20更新（".vscode/**"　を　"/.vscode/**" 　へと修正後 ）
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-05-10/e02ebac9-b2a2-4dd3-9452-40dd1150673d.jpeg)

### エラーメッセージ
```error
Must start with a path separator (`/` or `\`)
"autoprefix": Unknown word.（※5/10こちらは消えました）
```

### 該当のソースコード

```settings:json
{
"liveSassCompile.settings.formats": [
    {
      "format": "expanded", // 出力されるCSSの形式。"expanded"は通常の読みやすい形式。"compressed"は圧縮された形式。
      "extensionName": ".css", // 出力されるファイルの拡張子。通常は.css。
      "savePath": "/css" // .scssファイルからの相対的な出力先のフォルダを指定。nullだと同階層、'/'はルートディレクトリを意味する。
    }
  ],
  "liveSassCompile.settings.autoprefix": [
    "> 10%",          // 全体のユーザーの10%以上が使用しているブラウザバージョンに対応
    "last 2 versions" // 各ブラウザの最新2バージョンに対応
  ],
  "liveSassCompile.settings.excludeList": [
    ".vscode/**" // .vscodeフォルダ内のすべてのファイルやサブフォルダをコンパイルから除外
  ],
  "liveSassCompile.settings.generateMap": false, // ソースマップ(.map)ファイルの生成を無効にする。
  "workbench.editor.untitled.hint": "hidden",    // VS Codeの未命名エディタのヒントを非表示にする。
  "liveSassCompile.settings.includeItems": []    // 特定のアイテムをコンパイルに含めるリスト。現在は空。
}
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
Must start with a path separator (`/` or `\`)
"autoprefix": Unknown word.

が出てCSSファイルが作成されません。

### 補足
settings:jsonの最新Ver.が何故か使用できないため１つ前のVer.を使用しています。

ブラウザはgoogleChroomのバージョン: 124.0.6367.119（Official Build） （64 ビット）
Live Sass Compileのバージョンはv6.1.1です。

参考サイトは下記になります。
https://shogo-log.com/live-sass-compiler/
下部のWatch Sassを押してもずっとwatchingのままでCSSファイルが作成されません。
