このブログのCSSをSassで書き直しました。

既存のCSSをSassのファイルに変換できるサイトを使って作ったソースを参考に、移植しつつ、書き直しつつという感じ。
リセットCSSなど含め、全て「style.css」の1ファイルにまとめました。

Sassのインストール

いざやってみるとSassのインストールも簡単だったので、もっと早く使ってみれば良かった。
僕の環境はWindowsなので以下の記事を参考にしてRubyのインストールからやりました。

• SassをWindowsにインストールする
• Windows PC に Ruby と Sass を導入する方法

CSSビフォーアフター

アフターのほうではSassの機能である「セレクタのネスト」や「mixin」などを使ってます。

ビフォー（既存のCSS）

/* wp-pagenavi ===============================*/
.wp-pagenavi{
	padding:0 0 5px 0;
}
.wp-pagenavi .pages{
	font-size:0.8em;
	margin:0 10px 0 0;
}
.wp-pagenavi a{
	border:1px solid #ccc;
	color:#666;
	margin:3px;
	padding:5px 10px;
	text-decoration:none;
	-webkit-transition:all 0.2s ease;
	-moz-transition:all 0.2s ease;
	-o-transition:all 0.2s ease;
}
.wp-pagenavi a:hover{
	background:#7296DF;
	border:1px solid #7296DF;
	color:#fff;
}
.wp-pagenavi .current{
	border:1px solid #7296DF;
	color:#fff;
	background:#7296DF;
	margin:3px;
	padding:5px 10px;
}
.wp-pagenavi .extend{
	margin:0 5px;
}

アフター（Sass）

/* wp-pagenavi ===============================*/
.wp-pagenavi {
	padding: 0 0 5px 0;

	.pages {
		font-size: 0.8em;
		margin: 0 10px 0 0;
	}

	a {
		border: 1px solid #ccc;
		color: #666;
		margin: 3px;
		padding: 5px 10px;
		text-decoration: none;
		@include transition(all 0.2s ease);

		&:hover {
			background: #7296DF;
			border: 1px solid #7296DF;
			color: #fff;
		}
	}

	.current {
		border: 1px solid #7296DF;
		color: #fff;
		background: #7296DF;
		margin: 3px;
		padding: 5px 10px;
	}

	.extend {
		margin: 0 5px;
	}
}

アフターのコードを人が読みやすいようにコンパイルすると以下のようになる。
当然、ビフォーのコードとほぼ同じものが出来上がる。

アフターのコードをコンパイル

/* wp-pagenavi ===============================*/
.wp-pagenavi {
  padding: 0 0 5px 0;
}
.wp-pagenavi .pages {
  font-size: 0.8em;
  margin: 0 10px 0 0;
}
.wp-pagenavi a {
  border: 1px solid #ccc;
  color: #666;
  margin: 3px;
  padding: 5px 10px;
  text-decoration: none;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.wp-pagenavi a:hover {
  background: #7296DF;
  border: 1px solid #7296DF;
  color: #fff;
}
.wp-pagenavi .current {
  border: 1px solid #7296DF;
  color: #fff;
  background: #7296DF;
  margin: 3px;
  padding: 5px 10px;
}
.wp-pagenavi .extend {
  margin: 0 5px;
}

使いこなせるかどうかはまだまだこれから。