頭のいい人のSASSテクニック集。

本当は別の記事を用意していたのですが、
サンプル作るのに思ったより時間がかかったため、急遽別のネタに差し替えることになりました松井です。
来月ちゃんとプレゼンできるか心配です。

SASSはとっても便利なのですが、
mixinやextendをある程度うまく使いこなすにはそれなりの技術とセンスがいるような気がします・・・
実際作ろうとしてみてもさっぱりだったので、
ネットに落ちてる良さげなのをいくつかまとめました。

グリッドデザイン向けレイアウト

SASS

$column-width: 60px;    // 12 columns = 720px
$gutter-width: 20px;    // 11 gutters = 220px
@mixin grid-unit($span) {
  float: left;
  margin-right: $gutter-width;
  width: ($column-width * $span) + ($gutter-width * ($span - 1));
}

使い方

.container {
  @include grid-unit(12);
}

.main {
  @include grid-unit(8);
}

.side {
  @include grid-unit(4);
}

CSS

.container {
  float: left;
  margin-right: 20px;
  width: 940px;
}

.main {
  float: left;
  margin-right: 20px;
  width: 620px;
}

.side {
  float: left;
  margin-right: 20px;
  width: 300px;
}

参考: Sassでいこう!

12カラムのグリッドを
幅 = (カラムの幅 × 数) + (間隔の幅 × (数 – 1))
とSASS側で計算させてます。

サポートブラウザの設定

//サポートブラウザの設定
$support-ie6: false;
$support-ie7: true;
$support-ie8: true;
$support-ie9: true;
$support-mozilla: true;
$support-webkit : true;
$support-opera  : true;

こんなかんじで対応ブラウザごとの変数を作っといて作成しておくと、
後になって変更があった場合も対応しやすいです。
例えばclearfixをつくるとき

SASS

@mixin clearfix {
		@if $support-ie6 or $support-ie7 {
			*zoom: 1;
		}
		&:after {
			content: "."; 
			display: block;
			clear: both;
			height: 0; 
			visibility: hidden;
		}
}

使い方

.sample {
	@include clearfix;
}

CSS

.sample:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

IE6,7の値をtrueにするだけでIE向けにサクっと対応することができます。
(clearfixの場合はmixinよりも@extendの方がいいんでしょうけど・・・)

ベンダープレフィックス

めんどくさいベンダープレフィックスも似たような形でさくっとできます。

SASS

$set_prefix: -webkit-, -moz-, -ms-, -o-, '';

@mixin border_radius($br_value) {
     @each $prefix in $set_prefix {
          #{$prefix}border-radius: $br_value;
     }
}

使い方

.border_radius {
     @include border_radius(3px);
}

CSS

.border_radius {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}

たった一行でめんどくさい記述も吐き出してくれます。

フォントファミリー

フォントの設定も細かくできます。

SASS

@mixin font-family($type, $important: false) {
		@if $important == 'important' or $important == true {
			$important: ' !important';
		} @else {
			$important: '';
		}
		@if $type == sans-serif {
			font-family: sans-serif#{$important};
			@if $support-ie6 {
				_font-family: 'MS PGothic', sans-serif#{$important};
			}
		} @else if $type == serif {
			font-family: serif#{$important};
			@if $support-ie6 {
				_font-family: 'MS Gothic', serif#{$important};
			}
		} @else if $type == meiryo {
			font-family: Meiryo, 'MS PGothic', sans-serif#{$important};
		} @else if $type == monospace {
			font-family: monospace#{$important};
			@if $support-ie6 {
				_font-family: 'MS Gothic', monospace#{$important};
			}
		} @else if $type == hiragino {
			font-family: 'Hiragino Kaku Gothic Pro', Meiryo, 'MS PGothic', sans-serif#{$important};
		} @else if $type == verdana {
			font-family: Verdana, Arial, Helvetica, sans-serif#{$important};
		} @else if $type == tahoma {
			font-family: Tahoma, Arial, Helvetica, sans-serif#{$important};
		}
	}

使い方

selectorA {
    @include font-family("hiragino");
}
selectorB {
    @include font-family("verdana", "important");
}

CSS

selectorA {
  font-family: "Hiragino Kaku Gothic Pro", Meiryo, "MS PGothic", sans-serif;
}
selectorB {
  font-family: Verdana, Arial, Helvetica, sans-serif !important;
}

参考 NAVERでのSassの使い方

フォントサイズの変換(px→%)

計算がめんどくさい%指定もサクっとやってくれます。

SASS

$fontSizeList: 62%, 70%, 77%, 85%, 93%, 100%, 108%, 116%, 124%, 131%, 139%, 147%, 154%, 162%, 170%, 177%, 185%, 193%, 200%, 208%, 216%, 224%, 231%, 239%, 247%, 254%, 262%, 270%, 277%, 285%, 293%, 300%, 308%;

@function fz($size) {
    @if $size < 8 {
        $size: 8;
    }
    @if $size > 40 {
        $size: 40;
    }
    @return nth($fontSizeList, $size - 7);
}

.sample {
    font-size: fz(10);
}

CSS

.sample {
    font-size: 77%;
}

参考: sassを使ってCSSのめんどくさい繰り返し部分を楽に記述する | CSS-EBLOG

罪と罰シリーズでもSASSでフォントサイズを変換する方法がありましたが、
こういう書き方もできるのか!とかなり衝撃的だったのであげときました。

まとめ

こういうイケテルSASSテクニックをまとめて、
新規サイト作成用のひな形を作ったりしてるのですが、なかなか難しいです。
ここぐらいファイルを分割してやってみたりもしたんですが、
実際使ってみると逆に使いづらかったり・・・
あれの変数名何にしたっけ的な・・・
CSSでは出力されないことをいいことに
SASSでアホみたいなコメントアウトばっかして逆にカオスになったり・・・
そんなわけで、もっとガンガン使って実務でも問題なく使えるようにがんばろうと思います。

「頭のいい人のSASSテクニック集。」への1件のフィードバック

コメントは停止中です。