常連

### 前提・実現したいこと
子要素の高さに応じて、親要素の高さを変更したいです。

###状況
メルカリのようなサイトを模写しているんですけど、サイドバー(左側)をクリックするとメイン(右側)部分の高さが子要素に応じて変更されるようにしたいです。

・現在の状況
![イメージ説明](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が反映されない

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要素の中にアイコンを追加したい

### 実現したいこと
現在、設問項目が動的に表示/非表示で切り替わるフォームを作成しています。
そこで、以下のような状況が発生し得るのですが、できれば「.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】兄弟要素のうち、特定のクラスを持たない要素を対象に、最初の要素を取得したい

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

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

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

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

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

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


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

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


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

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

```html
<ul>
    <li class="item">A</li>
    <li class="item blue">B</li>
</ul>
```
上記のclassにcssでプロパティーをつけると以下の様に　.item　を二回書かないといけないです。
```
.item {
    line-height : 150%;
    color       : #333;
}
 
.item.blue {
    color : blue;
}
```

sassでもっとスマートとに書く方法はありますか？

sassで複数クラスはどう書くのか？

node_modulesを追加したいのですが、以下エラーが出てしまい追加することができません。
エラーへの対処方法を教えていただきたいです。
gulp-cliまではインストールできていると思います。

```ここに言語を入力
C:\Users\user\Desktop\02_sample>npm install
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
npm ERR! code 1
npm ERR! path C:\Users\user\Desktop\02_sample\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: C:\Program Files\nodejs\node.exe C:\Users\user\Desktop\02_sample\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   'C:\\Program Files\\nodejs\\node.exe',
npm ERR! gyp verb cli   'C:\\Users\\user\\Desktop\\02_sample\\node_modules\\node-gyp\\bin\\node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using node-gyp@3.8.0
npm ERR! gyp info using node@16.14.2 | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` failed Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (C:\Users\user\Desktop\02_sample\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (C:\Users\user\Desktop\02_sample\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (C:\Users\user\Desktop\02_sample\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at C:\Users\user\Desktop\02_sample\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at C:\Users\user\Desktop\02_sample\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at C:\Users\user\Desktop\02_sample\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21)
npm ERR! gyp verb `which` failed  python2 Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (C:\Users\user\Desktop\02_sample\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (C:\Users\user\Desktop\02_sample\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (C:\Users\user\Desktop\02_sample\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at C:\Users\user\Desktop\02_sample\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at C:\Users\user\Desktop\02_sample\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at C:\Users\user\Desktop\02_sample\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21) {
npm ERR! gyp verb `which` failed   code: 'ENOENT'
npm ERR! gyp verb `which` failed }
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb `which` failed Error: not found: python
npm ERR! gyp verb `which` failed     at getNotFoundError (C:\Users\user\Desktop\02_sample\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (C:\Users\user\Desktop\02_sample\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (C:\Users\user\Desktop\02_sample\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at C:\Users\user\Desktop\02_sample\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at C:\Users\user\Desktop\02_sample\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at C:\Users\user\Desktop\02_sample\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21)
npm ERR! gyp verb `which` failed  python Error: not found: python
npm ERR! gyp verb `which` failed     at getNotFoundError (C:\Users\user\Desktop\02_sample\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (C:\Users\user\Desktop\02_sample\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (C:\Users\user\Desktop\02_sample\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at C:\Users\user\Desktop\02_sample\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at C:\Users\user\Desktop\02_sample\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at C:\Users\user\Desktop\02_sample\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21) {
npm ERR! gyp verb `which` failed   code: 'ENOENT'
npm ERR! gyp verb `which` failed }
npm ERR! gyp verb could not find "python". checking python launcher
npm ERR! gyp verb could not find "python". guessing location
npm ERR! gyp verb ensuring that file exists: C:\Python27\python.exe
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
npm ERR! gyp ERR! stack     at PythonFinder.failNoPython (C:\Users\user\Desktop\02_sample\node_modules\node-gyp\lib\configure.js:484:19)
npm ERR! gyp ERR! stack     at PythonFinder.<anonymous> (C:\Users\user\Desktop\02_sample\node_modules\node-gyp\lib\configure.js:509:16)
npm ERR! gyp ERR! stack     at callback (C:\Users\user\Desktop\02_sample\node_modules\graceful-fs\polyfills.js:306:20)
npm ERR! gyp ERR! stack     at FSReqCallback.oncomplete (node:fs:198:21)
npm ERR! gyp ERR! System Windows_NT 10.0.19044
npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\user\\Desktop\\02_sample\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd C:\Users\user\Desktop\02_sample\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.14.2
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\user\AppData\Local\npm-cache\_logs\2022-04-19T22_49_00_195Z-debug-0.log
```