常連

### 現状

題名の通り、
iOS/Safariでplaceholderの文字が真ん中より上にずれてしまうバグがありました。

そこで、ネットで色々検索をし、
[ここ](http://www.al-designs.jp/wordpress/2016/03/04/iphone%E3%81%A8android%E3%81%AE%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AB%E3%82%88%E3%82%8Bplaceholder%E3%81%AE%E4%B8%8A%E4%B8%8B%E4%BD%8D%E7%BD%AE/)や[ここ](https://www.tomotanuki.com/entry/web-placeholder-position)を参考にし、なんとか以下の実装でバグは解決しました。

```
input::-webkit-input-placeholder {
    padding-top: 0.2em;
}

```

### 質問したいこと

疑問は、
どうして、 **webkit** と指定をしているのにiOS/Safariのみのバグがなおり、
Chrome（Android）ではpadding-topが上にずれるなどのバグが発生しないのでしょうか？

webkitとはSafari・Chromeのことなので、
上記のソースだと、Chromeにも反映されるはずです。
ところが、Chromeではもともとバグは起きていないこともあり、
上記の実装をする前と後で何も変わりませんでした。


バグが直ったことは嬉しいのですが、
本当にバグをあのソースで直すべきかどうかが疑問でモヤモヤしていたため質問させていただきました。
どうぞよろしくお願いいたします。

iOS/Safariでplaceholderの文字が真ん中より上にずれる件について

フォームでセレクトが選択されてたら、色が変わるというのを下記で記載したのですが、複数selectがフォームの場合ですと、うまく挙動しません。
１つ選択するとページ内全てのselectの色がｇｒｅｅｎに変わります
どなたか分かるかたいらっしゃいますでしょうか。

```
function hoge() {

  if($('select').prop("selectedIndex") == 0) {
    $('select').css({'color': 'red'});
  }
 
  $('select').on('change', function(){
    if($('select').prop("selectedIndex") == 0) {
      $('select').css({'color': 'red'});
    } else {
      $('select').css({'color': 'green'});
    }
  });
}
hoge();

```

html
```
<select name="ccc" id="bbb" class="aaa">
<option value="">選択してください</option>
<option value="">aaaa</option>
<option value="">aaaa2</option>
<option value="">aaaa3</option>
</select> 誕生日
<select name="" id="bbb" class="aaa">
<option value="----">選択してください</option>
<option value="1980">2017</option>
<option value="1981">2016</option>
</select> 年
<select name="ccc" id="bbb" class="aaa">
<option value="0">選択してください</option>
<option value="1">1</option>
<option value="2">2</option>
</select> 月
<select name="ccc" id="bbb" class="aaa">
    <option value="0">選択してください</option>
<option value="1">1</option>
</select> 日
```

フォームで入力されたら色が変わる

create-react-appで作成したアプリケーションを勉強用に色々書き換えたりしているのですが
reactではない別のアプリケーションで使用していたcssをそのまま使いまわそうとしたのですが、
上手くスタイルが反映されませんでした。


例えば下記のようなCSSがあったとして
```css
.my .app .my_style {
    font-size: 100px;
    color: blue;
}
```


下記のcssの読み方だと
上手くスタイルが反映されません。
```js
import './MyApp.css';

<div className="my_style" >count : {this.props.count}回</div>
```

このような書き方で書かれているcssファイルはreactでは使えないのでしょうか。
react始めたばかりであまり知識がないので、どなたか詳しい方教えていただけるとありがたいです。



ちなみに、cssを下記のように書き換えると上手く反映されます。
```css
.my_style {
    font-size: 100px;
    color: blue;
}
```

reactでcssのスタイルが上手く適用できない。

様々なサイトでSASSに関する記事を調べていると、拡張子が.sassではなく.scssの方の書き方をされているのを良くみかけます。
.scssのほうが後発らしいのですが、なぜこちらのほうが流行っているのかよくわかりません。

```lang-sass
/* sass */
div
	p
		font-size: 16px
	span
		color: #f00
```

```lang-scss
div {
	p {
		font-size: 16px;
	}
	span {
		color: #f00;
	}
}
```

両者の書き方を比較すると、.sassはカッコやセミコロン抜きで書くことが出来てすっきりしたコードになるのに対し、.scssのほうは通常のcssと同じようにカッコやセミコロンをいちいちつけないといけないのが面倒に感じます。
.scssはインデントがずれていてもコンパイル可能という利点がありますが、そもそもインデントがずれていると読みづらいので、それならはじめからインデントを整える必要のある.sassで良いのではと思います。
さらに、includeやextendなどの特有な機能は、.sassでも.scssでも両者問題なく使えますし、ますます.scssを使う必要性がわかりません。

.scssはどういう点で.sassよりも優れているのでしょうか？
それとも、単に.sassが大勢に知られていないだけでしょうか？

なぜ.sassよりも.scssの方が主流なのかわからない

複数の.scssファイルをひとつのcssファイルに圧縮した状態で出力変換したいのですが、下記のような構成の場合どのようなライブラリを利用すれば可能でしょうか？前任者がいなくなってしまいどのようにしていたのかわからず・・・アバウトですいません。

↓rootフォルダ内
_all.scss
components/

```ここに言語を入力
//_all.scss
@import "./components/all";
```

↓componentsフォルダ内
_all.scss
about/

```ここに言語を入力
//_all.scss
@import "./about/all";
```


↓aboutフォルダ内
_all.scss
_about.scss

```ここに言語を入力
//_all.scss
@import "about";
//_about.scss
body {
 h1 {/**/}
}
```

■階層構造
```ここに言語を入力
root/
　├ _all.scss
　└ components/
　　　├ _all.scss
　　　└　about/
　　　　　├ _all.scss
　　　　　└ _about.scss

```


■cssフォルダ内（出力先フォルダ）
style.css←出力されているものはこれだけのようです・・・

style.cssにscssフォルダにあるものすべてが
集約されてひとつのcssファイルになるようです。

gulp,gulp-sassだけでは上記のような出力はできず、
gulp-sass-globなど試してみたのですがうまくいかず・・
他にどんなライブラリが考えられますでしょうか？

複数のscssファイルをひとつのcssファイルにする

初めまして。rails初心者です。

さっそくなのですが、railsでapplication.cssにコードを書き、
<%= stylesheet_link_tag    ‘application’, media: ‘all’, ‘data-turbolinks-track’: ‘reload’ %>
も、htmlに記述したのですが、反映されませんでした。


試しに拡張子を.cssから.scssに変えたところ反映されたのですが、
なぜcssだと反映されなかったのでしょうか？

知識不足で申し訳ありません。
モヤモヤしているのでどなたかご教授いただけないでしょうか。

内容は下の画像の通りです。
![イメージ説明](0887262ca5393618f30b7275925b7078.png)