@mixinや@ifでレスポンシブなcssとそうでないcssで共通ファイルを作成する

偶々そういう案件に出くわしたので備忘録がてらに。

例えば
共通で読み込ませたいcss、common.cssを全ページに使用している。
けれど作成中のサイトにはレスポンシブなページと、そうでないページがある……でもデザインは同じ。
そういうときは以下のようにすれば一元管理が少しは容易になるかと。
以下は例。

まずはsettingで必要な変数を定義します。

_setting.scss

$baseWidth: 960px;
$spWidth: 768px;

次にmixinを作ります。

mq-desctop, mq-mobileなどはクラスメソッドさん謹製のmixinファイルを使ってます。

_parts.scss

@mixin common-main($value) {
	#main {
		@extend .clearfix;
		clear: both;
		margin: 0 auto;
		@if $value == dynamic {
			max-width: $baseWidth;
			width: 100%;

			@include mq-desctop {
				a:hover img {
					@include opacity(.6);
				}
			}
			@include mq-mobile {
				max-width: $spWidth;
			}
		} @else if $value == static {
			width: $baseWidth;

			a:hover img {
				@include opacity(.6);
			}
		}
	}
}

読み込ませたいファイルにincludeします。

common-dynamic.scss

.clearfix::after {
	content: "";
	display: table;
	clear: both;
}
@include common-main(dynamic);

common-static.scss

.clearfix::after {
	content: "";
	display: table;
	clear: both;
}
@include common-main(static);

こうなります

common-dynamic.css

.clearfix::after,
#main::after {
	content: "";
	display: table;
	clear: both;
}
#main {
	clear: both;
	margin: 0 auto;
	max-width: 960px;
	width: 100%;
}
@media screen and (min-width: 769px) {
#main a:hover img {
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
	opacity: 0.6;
}
}
@media screen and (max-width: 768px) {
#main {
	max-width: 768px;
}
}

common-static.css

.clearfix::after,
#main::after {
	content: "";
	display: table;
	clear: both;
}
#main {
	clear: both;
	margin: 0 auto;
	width: 960px;
}
#main a:hover img {
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
	opacity: 0.6;
}

common-dynamic.scssを修正して…あ、common-static.scssのほうも修正しなきゃ…なんて事がなくなるので、こういった場合は@ifを使わずとも@mixinは非常に便利ですね。
ただこのままだと、_parts.scssは@ifだらけになる可能性が無きにしも非ず。

こんなのレスポンシブなんてやめてスマホとPCサイトわけて作れよ！ってのは言わない約束だよ。もう遅いんだ。

もっと頭良い書き方あったら是非教えて下さい！