第5章 現場で使える実践Sassコーディング

5-1 管理 / 運用・設計で使える

サンプルのダウンロードページへ

ネストが深すぎると生じる問題を把握して、バランスを見ながら利用する

#wrap {
	#wrapInner {
		#page {
			#contents {
				#contentsInner {
					#main {
						section {
							margin-bottom: 50px;
							.item {
								.image {
									float: left;
								}
								.text {
									overflow: hidden;
									p {
										margin: 0 0 1em;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

#wrap #wrapInner #page #contents #contentsInner #main section {
  margin-bottom: 50px;
}
#wrap #wrapInner #page #contents #contentsInner #main section .item .image {
  float: left;
}
#wrap #wrapInner #page #contents #contentsInner #main section .item .text {
  overflow: hidden;
}
#wrap #wrapInner #page #contents #contentsInner #main section .item .text p {
  margin: 0 0 1em;
}

CSSとは違うパーシャルによるSassファイルの分割

@charset "utf-8";
// ===================================================================
// 設定
// ===================================================================

// 使うリセットCSS
$resetCSS: HTML5;


// 幅
$base_width: auto;
$max_width: 960px;
$min_width: 300px;
$main_width: 640px;
$side_width: 280px;

// フォントカラー
$font_color: #555;
$title_color: #232323;

// リンクカラー
$link_color: #4775f5;
$link_color_visited: #333;
$link_color_hover: #4775f5 + #222;
$link_color_active: #000;


$base_color: #c69;
$sub_color: #7e9dd0;

// 章カラー
$chapter_color: #c69, #7e9dd0, #c69, #7e9dd0, #c69, #7e9dd0, #c69, #7e9dd0;


// 付与するベンダープレフィックス
$set_prefix: -webkit-, -moz-, -ms-, -o-, '';


// ベースフォント
$base_font: "Source Code Pro", "メイリオ", "Meiryo", "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif, verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;

// 角丸
@mixin border_radius($value: 3px) {
	@each $prefix in $setPrefix {
		#{$prefix}border-radius: $value;
	}
}

// 余白調整用
@if $use_spaceClass > 0 {
	@for $i from 0 through $space_endValue {
		.mt#{$i * 5} {
			margin-top: 5px * $i !important;
		}
		.mb#{$i * 5} {
			margin-bottom: 5px * $i !important;
		}
		@if $use_spacePadding > 0 {
			.pt#{$i * 5} {
				padding-top: 5px * $i !important;
			}
			.pb#{$i * 5} {
				padding-bottom: 5px * $i !important;
			}
		}
	}
}

// clearfix
%clearfix {
	@if $support_IE > 0 {
		*zoom: 1;
	}
	&:after {
		content: "";
		display: table;
		clear: both;
	}
}

...（略）...

// ===================================================================
// 各Sassファイルのインポート
// ===================================================================

// 設定用
@import "setting";

// リセットCSS、フォントサイズ
@import "reset";

// ミックスイン、@extend、CSS3など
@import "mixin";

// 共通モジュールやパーツ
@import "module";

// メインスタイル
@import "main";

sass --style expanded --watch sass:www/css

さまざまなリセットCSSを一つのファイルにまとめて使いまわす

$resetCSS: 1 !default;

@if $resetCSS == 1 or $resetCSS == HTML5 {
	/*! html5doctor.com Reset Stylesheet */
}
@else if $resetCSS == 2 or $resetCSS == Eric {
	/*! Eric Meyer's Reset CSS */
}
@else if $resetCSS == 3 or $resetCSS == YUI {
	/*! YUI 3 - reset.css */
}
@else if $resetCSS == 4 or $resetCSS == Normalize {
	/*! normalize.css */
}
@else if $resetCSS == 0 or $resetCSS == My {
	/*! My Reset CSS */
}
@else {
	/*! Universal Selector '*' Reset */
}

$resetCSS: YUI;

// 設定用
@import "setting";

// リセットCSS
@import "reset";

複数のリセットCSSをパーシャルファイルにして使いまわす

// リセットCSS
@import "reset/html5doctor";

CSSで制作したサイトをSassに切り替える

sass-convert --to scss style.css style.scss

#main {
  width: 600px;
}
#main p {
  margin: 0 0 10em;
}
#main p em {
  color: #f00;
}
#main small {
  font-size: small;
}

#main {
  width: 600px;
  p {
    margin: 0 0 10em;
    em {
      color: red;
    }
  }
  small {
    font-size: small;
  }
}

sass-convert -R --from css --to scss css

sass-convert -R --from css --to scss .

コメントを活用してソースを分かりやすくする

@charset "utf-8";
/*! ========================================
※※※※※※※※※※※※※※※※※※※※※※※※※※※
  このCSSファイルはSassから生成されていますので、
  編集しないようご注意ください。 by name
※※※※※※※※※※※※※※※※※※※※※※※※※※※
========================================= */
body {
	margin: 0
}

/*! ========================================
※※※※※※※※※※※※※※※※※※※※※※※※※※※
  このCSSファイルはSassから生成されていますので、
  編集しないようご注意ください。 by name
※※※※※※※※※※※※※※※※※※※※※※※※※※※
========================================= */
body {
  margin: 0;
}

常に同じ場所からモジュール用のSassファイルをインポートする

sass --watch sass:css --load-path パス

【Win】sass --watch sass:css --load-path C:¥sass¥mylibrary
【Mac】sass --watch sass:css --load-path /sass/mylibrary

Sassはオブジェクト指向設計と相性が良い

<ul class="fruitList">
	<li><a href="" class="orange">みかん</a></li>
	<li><a href="" class="apple">りんご</a></li>
	<li><a href="" class="banana">バナナ</a></li>
	<li><a href="" class="melon">メロン</a></li>
</ul>

ul.fruitList {
	list-style: none;
	li {
		margin: 0 0 10px;
		a {
			display: inline-block;
			padding: 10px 25px;
			border-radius: 5px;
			text-decoration: none;
			color: white;
			&.orange {
				background: orange;
			}
			&.apple {
				background: red;
			}
			&.banana {
				background: yellow;
				color: #333;
			}
			&.melon {
				background: green;
			}
		}
	}
}

<header>
	<ul>
		<li>2013/08/01</li>
		<li><a href="" class="banana">バナナ</a></li>
	</ul>
</header>

<p class="category"><a href="" class="orange">みかん</a></p>

<ul class="fruitList">
	<li><a href="" class="cateLabel orange">みかん</a></li>
	<li><a href="" class="cateLabel apple">りんご</a></li>
	<li><a href="" class="cateLabel banana">バナナ</a></li>
	<li><a href="" class="cateLabel melon">メロン</a></li>
</ul>

<header>
	<ul>
		<li>2013/08/01</li>
		<li><a href="" class="cateLabel banana">バナナ</a></li>
	</ul>
</header>

<p class="category"><a href="" class="cateLabel orange">みかん</a></p>

ul.fruitList {
	list-style: none;
	li {
		margin: 0 0 10px;
	}
}
.cateLabel {
	display: inline-block;
	padding: 10px 25px;
	background: gray;
	border-radius: 5px;
	text-decoration: none;
	color: white;
	&.orange {
		background: orange;
	}
	&.apple {
		background: red;
	}
	&.banana {
		background: yellow;
		color: #333;
	}
	&.melon {
		background: green;
	}
}

%cateLabel {
	display: inline-block;
	padding: 10px 25px;
	background: gray;
	border-radius: 5px;
	text-decoration: none;
	color: white;
	&.orange {
		background: orange;
	}
	&.apple {
		background: red;
	}
	&.banana {
		background: yellow;
		color: #333;
	}
	&.melon {
		background: green;
	}
}

header ul,
ul.fruitList {
	list-style: none;
	li {
		margin: 0 0 10px;
		a {
			@extend %cateLabel;
		}
	}
}
p.category {
	margin-bottom: 1.5em;
	a{
		@extend %cateLabel;
	}
}