blog

Octopressでbootstrap-themeにしたとき、sass/custom/_styles.scssが反映されなくなった件について

前回、Octopressのテーマをカスタマイズするという記事で、 Octopressにbootstrap-themeを導入しました。

If you want to add or override styles, edit sass/custom/_styles.scss. This stylesheet is imported last, so you can override styles with the cascade.

上の文はOctopressの公式からの引用で、本来であればsass/custom/_styles.scss に書いたSCSSが最終的にオーバーライドされて適用されるはずです。

しかし、このテーマを導入してから、sass/custom/_styles.scssに書いたSCSS(CSS)が反映されなくなってしまいました。

OctopressのCSS生成の仕組み

Octopressでは、sass以下のディレクトリにある.scssファイルを読み取り、 最終的なCSSを生成しているようです。(たぶん)

SCSSとは、CSSメタ言語のことで、要するにCSSを生成するための言語です。

本題のsass/custom/_styles.scssが反映されない原因は単純で、 sass/bootstrap/bootstrap.scssを見たら、sass/custom/_styles.scsがimportされていませんでした。

というわけで、sass/bootstrap/bootstrap.scssの最終行に次のような感じでimport文を追加することで解決します。

// Custom
@import "custom/colors";
@import "custom/fonts";
@import "custom/layout";
@import "custom/styles";

後は、sass/custom/_styles.scsに好きな設定を書けばOKです。ひとまず、こんな感じにしました。

// This File is imported last, and will override other styles in the cascade
// Add styles here to make changes without digging in too much

div.entry-content {
	h1, h2, h3, h4, h5, h6 {
		line-height: 2;
		margin-top: 30px;
		margin-bottom: 20px;
		padding-left: 10px;
	}
	h1 {
		font-size: 20px;
		background: #eee;  
		border-left: 7px solid #777;  
		margin-top: 50px;
	}
	h2 {
		font-size: 18px;
		border-left:7px solid #ccc;  
		border-bottom:1px solid #ccc;
		margin-top: 40px;
	}
	h3 {
		font-size: 15px;
		border-left:7px solid #ccc;  
	}
	h4 {
		line-height: 1.5;
		font-size: 14px;
		border-bottom:1px solid #ddd;
	}
	h5 {
		line-height: 1.5;
		font-size: 12px;
		border-bottom:1px dashed #ddd;
	}
	h6 {
		line-height: 1.5;
		font-size: 11px;
	}
}

まあ、せいぜいsubsubsectionくらいまでしか使いませんよね…

h1

h2

h3

h4
h5
h6