scssに触れたので詰まったりしたとこまとめてみる

SCSSとは

CSSをわかりやすい表記にしたものです。主に以下のメリットがあります

1.スタイルを簡略化できる

入れ子構造にできるので、コードがぱっと見も見やすいです。

2.スタイルのテンプレ化ができる

何度も必要な表記をテンプレ化して使用できます。

3.管理しやすい

上記の理由から保守が楽になります

導入

xcodeにLive Sass Compilerを導入

scssをまとめてcssに自動変換してくれる

ファイル構造

変換後にHTMLに反映させる.cssファイル

書かれたscssを反映させるためにcssファイルに変換せねばなりません。
Live Sass Compilerはこの変換を自動でしてくれます。

自動で変換されstyle.cssファイルが爆誕

scssをまとめておくstyle.scssファイル

全てのscssファイルをstyle.cssで変換するために、scssをリスト化して読み込んでいるscssファイルが必須です。

作法

scssファイルの名前の前に_を付ける

style.scssとその他scssファイルとわかりやすいように、ファイルにはファイル名の冒頭に『_』をつけます。