SCSSでの画像の挿入とサイズの指定

1.SCSSとは

　SCSSとはウェブページのスタイルを指定するCSSより効率よく記述するためのものです。
cssはよく聞くと思いますが、scssはあまり聞かないのじゃないかと思い今回記事を書かさせていただきました。

2.SCSSでの画像挿入

　1)まずcssファイルがscssファイルになっていない場合、scssファイルに変更しましょう。名前の変更で語末のcssをscssに変えるだけです。

2)そして次に以下のように画像の挿入ですまずapp/asset/imagesのフォルダの中に写真を用意しましょう。

3)用意したscssファイルを開き画像を用意します。以下が書き方の例です。
htmlで用意したクラス名contentsを使い指定していきます。
　まずbackground-imageのなかに背景の画像としておきたいものをimage-urlの括弧の中に指定します。
これだけで写真は貼り付けられますが、何回も写真がリピートしてしまします。その時に使うのがbackground-repeatです。これにno-repeatをつけると一枚だけの写真にすることができます。そのほかはbackground-sizeで大きさを指定したり、heightやwidthでも大きさは指定できたり、位置をどうするかなどは基本的なcssの指定の仕方で大丈夫です。またこれは背景画像なので、この上にhtmlの文字を乗っけてデザインすることも可能です。

index.scss

  .contents {
  background-image: image-url("image_top.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

3.最後に

このようにscssならではの簡単な記述で指定できるものもたくさんあるので是非使ってみてください！！