そのミックスインや関数は本当に必要？手段の目的化に注意を。

150801_001

仕事で案件に関わっていると、特段必要がないにも関わらずSass機能を使っているファイルを見かけることがある。

例えば、

$font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", "Osaka", sans-serif;
$font-size: 87.5%;

body {
  font-family: $font-family;
  font-size: $font-size;
}

$font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳＰゴシック", "MS PGothic", "Osaka", sans-serif;

$font-size: 87.5%;

body {

font-family: $font-family;

font-size: $font-size;

}

一体何の意味が？　変数を使う必要がない。
実務におけるSassの使い方を見直す。

設定しているミックスイン

フォントサイズ

px or rem の場合は2行目と3行目を使用
% の場合は4行目のみを使用
16 はブラウザデフォルトのフォントサイズ
body でフォントサイズを指定する場合は、16 をその数字に修正

@mixin fs($num) {
	font-size: $num + px;
	font-size: ($num / 16) + rem;
	// font-size: percentage($num / 16);
}

p {
	@include fs(14);
}

@mixin fs($num) {

font-size: $num + px;

font-size: ($num / 16) + rem;

// font-size: percentage($num / 16);

}

p {

@include fs(14);

}

p {
  font-size: 14px;
  font-size: 0.875rem;
}

// %を使用した場合
p {
  font-size: 87.5%;
}

p {

font-size: 14px;

font-size: 0.875rem;

}

// %を使用した場合

p {

font-size: 87.5%;

}

テキストを画像置換

Compassの「replace-text」は -119988px なのでイマイチ。

@mixin hide {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

@mixin hide {

text-indent: 100%;

white-space: nowrap;

overflow: hidden;

}

リストのマーカー

_reset.scss でマーカーを削除しているため一部分で必要なときに便利
ブラウザのデフォルトスタイルを設定

@mixin ul($pd: 40, $marker: disc) {
	list-style-type: $marker;
	padding-left: $pd + px;
}
@mixin ol($pd: 40, $marker: decimal) {
	list-style-type: $marker;
	padding-left: $pd + px;
}

@mixin ul($pd: 40, $marker: disc) {

list-style-type: $marker;

padding-left: $pd + px;

}

@mixin ol($pd: 40, $marker: decimal) {

list-style-type: $marker;

padding-left: $pd + px;

}

ブレークポイント

この書き方が最も効率的。

@mixin min($width) {
	@media screen and (min-width: $width + px) {
		@content;
	}
}
@mixin max($width) {
	@media screen and (max-width: $width + px) {
		@content;
	}
}

@mixin min($width) {

@media screen and (min-width: $width + px) {

@content;

}

@mixin max($width) {

@media screen and (max-width: $width + px) {

@content;

}

clearfix

両方を用意するのは下記の理由から。

@include はショートカット（+ -> Tab）があるので楽
コンパイル後のコードが気になるなら@extend に一括置換すればOK

@mixin cf {
	zoom: 1;
	&:after {
		content: "";
		display: table;
		clear: both;
	}
}

.cf {
	zoom: 1;
	&:after {
		content: "";
		display: table;
		clear: both;
	}
}

@mixin cf {

zoom: 1;

&:after {

content: "";

display: table;

clear: both;

}

.cf {

zoom: 1;

&:after {

content: "";

display: table;

clear: both;

}

デフォルト機能で使っているもの

lighten() / darken()

先方からのリンクカラー指定がない場合に便利。

a {
	color: darkblue;

	&:hover {
		color: lighten(darkblue, 10%);
	}
}

a {

color: darkblue;

&:hover {

color: lighten(darkblue, 10%);

}

a {
  color: darkblue;
}
a:hover {
  color: #0000be;
}

a {

color: darkblue;

}

a:hover {

color: #0000be;

}

ベンダープレフィックスは？

gulp で自動化しちゃいましょう。

これじゃ少ないのでは？

と思う人がいるかもしれないので、絶対配置をミックスイン化してみる。

@mixin pos($num: 0 0 0 0) {
	position: absolute;

	$top: nth($num, 1);
	$bottom: nth($num, 2);
	$left: nth($num, 3);
	$right: nth($num, 4);

	@if not(unitless($top)) {
		top: $top;
	}
	@if not(unitless($bottom)) {
		bottom: $bottom;
	}
	@if not(unitless($left)) {
		left: $left;
	}
	@if not(unitless($right)) {
		right: $right;
	}
}

@mixin pos($num: 0 0 0 0) {

position: absolute;

$top: nth($num, 1);

$bottom: nth($num, 2);

$left: nth($num, 3);

$right: nth($num, 4);

@if not(unitless($top)) {

top: $top;

}

@if not(unitless($bottom)) {

bottom: $bottom;

}

@if not(unitless($left)) {

left: $left;

}

@if not(unitless($right)) {

right: $right;

}

順番変えた方がいいかな？　いや逆の方がいいかな？
試行錯誤している時にふと気がついた。

普通のCSSで書いた方が早い…

.item-ic {
	position: absolute;
	top: 0;
	right: 20px;
}

.item-ic {

position: absolute;

top: 0;

right: 20px;

}

普通に書いた方が楽ならそれに越したことはなく、無理をしてまでSassを使う必要はない。

普通に書いた方が楽なもの

上記の absolute 以外にも、ミックスインや関数を利用するより普通に書いた方が楽なものは意外と多い。

background-image

異なるディレクトリで画像ファイル名が被るかもしれないので、パス補完をしてくれる URL Helpers は使い難い。

border-radius

一行で終わる。

p {
	border-radius: 5px;
}

p {

border-radius: 5px;

}

box-sizing

Sassが不要。

* {
	box-sizing: border-box;
}

* {

box-sizing: border-box;

}

box-shadow

一行で終わる。

#container {
	box-shadow: 0 1px 0 white;
}

#container {

box-shadow: 0 1px 0 white;

}

linear-gradient

一行で終わる。

body {
	background: linear-gradient(left, #304352, #d7d2cc);
}

body {

background: linear-gradient(left, #304352, #d7d2cc);

}

text-shadow

一行で終わる。

p {
	text-shadow: 0 1px solid white;
}

p {

text-shadow: 0 1px solid white;

}

transition

一行で終わる。

a {
	color: darkblue;
	transition: 0.2s linear;

	&:hover {
		color: white;
		background: darkblue;
	}
}

a {

color: darkblue;

transition: 0.2s linear;

&:hover {

color: white;

background: darkblue;

}

Sass&Compass徹底入門 CSSのベストプラクティスを効率よく実現するために (DESIGN & WEB TECHNOLOGY)

posted with amazlet at 15.07.31

Wynn Netherland Nathan Weizenbaum Chris Eppstein Brandon Mathis
翔泳社
売り上げランキング: 252,728

Amazon.co.jpで詳細を見る

鼻ちょうちん

そのミックスインや関数は本当に必要？手段の目的化に注意を。

設定しているミックスイン

フォントサイズ

テキストを画像置換

リストのマーカー

ブレークポイント

clearfix

デフォルト機能で使っているもの

lighten() / darken()

ベンダープレフィックスは？

これじゃ少ないのでは？

普通に書いた方が楽なもの

background-image

border-radius

box-sizing

box-shadow

linear-gradient

text-shadow

transition

コメントを投稿する返信をキャンセル

そのミックスインや関数は本当に必要？ 手段の目的化に注意を。

設定しているミックスイン

フォントサイズ

テキストを画像置換

リストのマーカー

ブレークポイント

clearfix

デフォルト機能で使っているもの

lighten() / darken()

ベンダープレフィックスは？

これじゃ少ないのでは？

普通に書いた方が楽なもの

background-image

border-radius

box-sizing

box-shadow

linear-gradient

text-shadow

transition

コメントを投稿する 返信をキャンセル

そのミックスインや関数は本当に必要？手段の目的化に注意を。

コメントを投稿する返信をキャンセル