ホームページのCSS管理を変更(1)

バタイユゲーム情報班ホームページのCSSは、テキストエディタ
(ATOM)を使って手作りしていた。しかし、データが800行になり、
どこをどう直せばよいか、分かり難くなった。

 そこで、SASSというツールを使うように変えようと思う。
その場合のメリットと問題点、対策を以下に纏める。
下記のWEBページにお世話になりました。ありがとうございます。
これからはcssはSassで書こう。
Sassを使った効率的CSSコーディング術

1.個人的なSASSのメリット
(1)ファイルを分割管理できる。(どこに何があるか分かり易くなる)
   例1)分割したファイルは、下図のような纏めファイルでimportすれば統合できる。

(2)変数が使える。(色、サイズなどを一括変更できる)
   例2)色コードは、変数にして1つのファイルに纏めた。(下図)

例3)ページ全体の背景色や、文字色を変数(先頭が$の文字列)で指定する。(下図)

(3)入力が簡略化できる。({ };の3文字を省略できる)
   例4)上記例3をコンパイルしてCSSにすると下図のようになる。
      変数が数値に代わり、pageの指定範囲を示す{ }と、各行の区切りを示す;が付加される。

2.問題点
(1)既存のCSSからSASSファイルには自動変換できるが、そのままでは効果がない。
   →手動でSASSを変更する必要がある。

(2)SASSのコンパイラの出力文字コードはUTF-8固定である。
   →HTML文はShift-JISで統一しているので、合わない。

 

次回へつづく

 

<個人的な感想>
現在の文字コードは、UTF-8が主流との事。自分がホームページを始めた時に
よく調べれば良かった。参考にしたサイトがShift-JISでHTML,CSSを作成
していたので、それを無条件に真似したのが悪かったか・・・。

 

<リンク>

ブログのトップページは、こちら

バタイユゲーム情報班のホームページは、こちら