1. はじめに

Ruby on Railsでコントローラーとか作ったら出てくるコントローラー名.scssってなんだってなりますよね。
application.cssとの違いってなんだろって思ったと思います。
そんなみんなの助けになればな！っと思ってこの記事を書きます。

2.　CSSとSCSSの違い

CSSもSCSSのどちらもデザインをするために使う言語です。

この2つ(CSSとSCSS)の違いってわかりますか？

名前が違うくらいだろって思いますよね。
自分も最初はそのくらいだろって思ってましたが、実は結構違います。

備考
セレクターはタグ、class名、id名のことを指します。
プロパティはbackground-color、text-alignなどのを指します。
値は #000000 や 100% などのプロパティを数値のことを指します。

プロパティや値が他に何があるのかを詳しく知りたい人はここの下のリンクから飛んで(backgroud-sizeなどで)検索してみてください！
MDNサイト
↑ ここからサイトへ飛びます

CSSとは文字の大きさや背景の色、画像の配置を指定します
コードの書き方では、

index.css


セレクタ1　{
  プロパティ: 値;
}

セレクタ2　{
  プロパティ: 値;
}

のように記述します。
　

SCSSとは簡単に言ってしまえば、CSSの上位互換です
コードの書き方では、

index.scss


セレクタ1　{
  プロパティ: 値;
  セレクタ2 {
    プロパティ: 値;
  }
}

セレクタ3 {
  プロパティ: 値;
}

のように記述をします。
さらに、CSSのような記述の仕方もできます。

1.　HTMLを記述していきます。

index.html.erb


<!DOCTYPE html>
<html>
  <head>
    <title>Pra</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <div class="test"><br>
      <a href="#">テストです</a>
    </div>
  </body>
</html>

これを記述するとWebサイト上ではこういう風になります。

では、ここからCSSで記述したパターンとSCSSで記述をした2つのパターンで見てみましょう。

2.　CSSで記述します

index.css


.test {
  margin: 40px;
}
a {
  padding: 10px 20px;
  color: #000000; #黒色で表示
}

3. SCSSで記述します

index.scss


.test {
  margin: 40px;
  a {
     padding: 10px 20px;
     color: #ff0000;　　#赤色で表示
  }
}

２つの画像を見ての通り記述の仕方が違うだけで、デザインの表示は同じです。
scssならどれがどこを指定しているのかのわかりやすさが段違いです。

index.css


a{
  background: #939393;
}

a:hover {
  background: #939393:
　 opacity:0.7;
}

CSSでは、このように書かなければいけないのですが、SCSSなら

index.scss


a{
　　background: #939393;
  &:hover {
  　　background: #939393:
　   opacity:0.7;
 }

のように行を減らすことに加えて aと書かずに& だけで済ませることができte便利です。

3．これで以上です！

みなさんここまでお疲れ様でした！
CSSとSCSSを使いこなしてより良いデザインをしていきましょう。