CSSをSASS(SCSS)に書き換えてみて思ったこと

はじめに

勉強のためhtml->haml、css->sassをやって見ようと思いまして今自分で作っているサイトを試しに単純な変換をしてみました。という話をメモ代わりに書きます。

ビルドはsublime textでやっています。

事前設定

sassの事前設定ですが、他に更に詳しく説明してくれてるSO NICEな記事がたくさんありますのでここでは割愛します。私は以下を参考にして設定しました。

http://book.scss.jp/about/c7/editor/st.html
※ちなみにこちらの本わたくしkindleで買いました。HTMLを書くデザイナーの方々もわかり易い内容になってるんじゃないかと思います。
※謎なんですが、私の環境だとpackage installerにcompassがなくて困ってる。でもなんか動いてるけど。

CSSからSASSのコンバートするサイトがあります

単純にcssをscssに書き換えるだけであれば、以下のサイトがあるためめっちゃ便利です。

CSS2SASS

今回は既存のCSSをこちらで変換したものと見比べてみてSASSがどんなものか見ていくという方法をとりました。

引っかかった部分

Sass::SyntaxError: Invalid US-ASCII character "\xE5"

sublime textで保存時自動ビルドした時に上記のエラーが出る。
こちらは.scssファイルの一行目に下記の記述を入れることで解決しました。

@charset "UTF-8";

&の存在

今回はsassを機能的に使うというよりかは時間がなかったので、sassの中の記述をHTMLタグでネストすることをしていました。その中で気づいたのですが、CSSの中で

div .all {
  width: 100%;
  margin: 0px 0px 0px 0px;
  padding: 20px 0px 0px 0px;
  border: 0px #333333 solid;
  background-color: transparent; }

と

div.all {
  width: 100%;
  margin: 0px 0px 0px 0px;
  padding: 20px 0px 0px 0px;
  border: 0px #333333 solid;
  background-color: transparent; }

いうのは意味が変わっちゃうんですね。divと.allの間の空白の話なんですが、div.allと divの中にある.allということでサイトが崩れちゃったので少し迷いました。上記の二つはそれぞれ、以下のように書くことでかき分けることができます。

div{
  .all{
	  width:100%;
	  margin:0px 0px 0px 0px;
	  padding:20px 0px 0px 0px;
	  border:0px #333333 solid;
	  background-color:transparent;
	}
}

を

div{
  &.all{
	  width:100%;
	  margin:0px 0px 0px 0px;
	  padding:20px 0px 0px 0px;
	  border:0px #333333 solid;
	  background-color:transparent;
	}
}

とかく必要がありました。&のところですね。

最後に

やっぱり変数は手軽かつコードの集約ができるので便利そうです。しかしながら私レベルのサイトだとmixinみたいな機能はあまり実用的ではなくて、場合によってはいままでどおりCSSで書き続けたほうが良いパターンもあるのかなとおもいました。

今回は完全にタグ単位でネストしたため自分ルールで整理するにはめっちゃ良かったです。