LoginSignup
3
2

More than 1 year has passed since last update.

CSSとSCSSの違い

Last updated at Posted at 2022-01-18

1. はじめに

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

2. CSSとSCSSの違い

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

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

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


備考
セレクタータグclass名id名のことを指します。
プロパティbackground-colortext-alignなどのを指します。
#000000100% などのプロパティを数値のことを指します。

プロパティや値が他に何があるのかを詳しく知りたい人はここの下のリンクから飛んで(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サイト上ではこういう風になります。

スクリーンショット 2021-11-28 23.31.20.png
では、ここからCSSで記述したパターンとSCSSで記述をした2つのパターンで見てみましょう。

2. CSSで記述します

index.css

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

スクリーンショット 2021-11-28 23.40.30.png

3. SCSSで記述します

index.scss

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

スクリーンショット 2021-11-28 23.41.55.png
2つの画像を見ての通り記述の仕方が違うだけで、デザインの表示は同じです。
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を使いこなしてより良いデザインをしていきましょう。

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2