【Sass】新規でサイトを作るのに使えそうなの一式。Ver 1

2012年1月29日（日）
CSSテンプレート, Sass, レイアウト

シリーズっぽくやってたSassを覚えようですが、今回は今までご紹介したSassに関する知識が有れば、直ぐにでも使えそうな一式をご用意しました。

まぁ、HTMLとかは過去の新規でサイトを作るのに使えそうなの一式。とそんなに変わってないので、SCSSファイルだけ有れば良いと思いますがHTMLとかあった方が確認もそのまま出来るので良いかなーと。

ページを見ても、あんまり意味が無いっすね。えぇ。

いつもの新規セットに比べると、ボク自身がSassはまだ全然使いこなせて無いですし、開発中と言うかベータな感じが否めないので、コレをベースにSassを色々試したりするのに良いかなと思います。
なので、一つの参考までにって感じでしょうか。

んでは、続きにて中身の説明なんぞをしていきます。

中身のご説明

zipを解凍すると「newsite_sass_ver01」ってフォルダができます。
中身はそこまで過去のと変わりませんが、SassをWindowsでささっと始める様のバッチファイルと、「html」「sass」フォルダが有ります。

バッチファイルに関しては「バッチファイルを使ってカンタンに黒い画面でSassを利用する」を参考にして下さい。

各SCSSファイルの概要

sassフォルダに入ってる、各SCSSファイルについてカンタンに。
各SCSSファイル名をクリックすると、ファイルがダウンロード出来ます。

_layout.scss: ヘッダーとかフッターとかレイアウト関係用。
_main.scss: メインコンテンツ等のスタイル用です。一番ガツガツ書いていくファイル。
_mixin.scss: ミックスインとか@extendなどが定義されてます。
_print.scss: 印刷用で使うSCSSファイル。
_reset.scss: XHTMLとHTML5のリセットスタイル、フォントサイズの相対指定が書かれているファイル。
_setting.scss: なんか、色々を設定する為のファイル。
style.scss: style.cssに変換するファイルで、上記すべてをインポートするファイル。

後は、ページ固有のスタイルが必要な場合に、SCSSファイルを追加していく感じになるかなーと思います。
ちなみにあと味さんでも使ってるSCSSファイルを紹介しているので、そちらも参考になると思います。

最近の案件でのSassの運用 - あと味

設定の変更

色々を設定する為の_setting.scssファイルは、一部の値をちょっと変えたりするだけで、ガラっとスタイルを変更したり出来ます。
んでは、この_setting.scssファイルを、実際どんな感じで使うのかをいくつかご説明するです。

リセットCSSの切り替え

リセットCSSをHTML5に切り替えたい場合は、$use_html5 の値を「false」から「true」にすればOKです。
実際どんな風に切り替わるかをSass使ってない人も分かるように動画にしてみた！

値を変更するだけで、ガラっと吐き出されるCSSが変わるのが面白いかなーと。

付与するベンダープレフィックスの変更

$set_prefix の値を変更すれば、次のように付与されるベンダープレフィックスが変更されるので、同じようにインポートして使ってる他のスタイルも一瞬で変更できます。

余白調整用のスタイルを吐き出す

あまり使いたくはないけど、やはり状況に寄っては余白を調整するためだけのクラスが用意されてると便利だったりしますよね。
なので、そう言ったクラスが直ぐに吐き出せるようにしています。

デフォルトでは、これらのクラスは吐き出されないようにしていますが、これも値を「false」から「true」に変更することで吐き出されるので必要に応じて使い分けが出来る感じです。

なお、この余白調整用のクラスは「_mixin.scss」に定義されてますので、変更したい場合は次の部分を変えてもらえれば良いかと。

	// 余白調整用のクラス
	@if $use_spacing_classes {
		@for $i from 0 through 20 {
			.mt#{$i * 5} { margin-top: 5px * $i !important; }
			.mb#{$i * 5} { margin-bottom: 5px * $i !important; }
			.pt#{$i * 5} { padding-top: 5px * $i !important; }
			.pb#{$i * 5} { padding-bottom: 5px * $i !important; }
		}
	}

今は、5px刻みにしているので、10pxにしたい場合は 5 ん所を10にするだけでOKです。また、今は0から20回繰り返されるので100 までの各クラスが吐き出されますが、多すぎたり少ないって思う場合は、この20を変えればOKです。

他にも、paddingの調整はいらない場合は、コメントアウトか消してしまえばOKです。

試しに、10px刻みにして繰り返し回数を20から10に。paddingは吐き出さない様にした場合は次のような感じです。

	// 余白調整用のクラス
	@if $use_spacing_classes {
		@for $i from 0 through 10 {
			.mt#{$i * 10} { margin-top: 10px * $i !important; }
			.mb#{$i * 10} { margin-bottom: 10px * $i !important; }
			//.pt#{$i * 5} { padding-top: 5px * $i !important; }
			//.pb#{$i * 5} { padding-bottom: 5px * $i !important; }
		}
	}

こんな風に、色んな設定が出来たり、ちょっと数値を変えるだけで吐き出されるCSSを大幅に変更できます。

色々試して、遊んでみるのが良いのかなーと！

各SCSSファイル

最後に、ちょっと長いけど各SCSSファイルのコードをそのまま貼っておきます。

_layout.scss

@charset "utf-8";
// ===================================================================
// レイアウト関係のスタイル
// ===================================================================


/*----------------------------------------------------
	#page
----------------------------------------------------*/
#page {
	width: $base_width;
	margin: 0 auto;
	padding: 10px;
	background: $sub_color;
	font-size: fz(12);
}


/*----------------------------------------------------
	#contents
----------------------------------------------------*/
#contents {
	@extend .clearfix;
	width: $base_width - 20px;
	padding: 10px;
	margin-bottom: $base_margin_bottom;
	background: #ccc;
	
	.pageTop {
		clear: both;
		margin: 0;
		text-align: right;
	}
}


/*----------------------------------------------------
	ヘッダー
----------------------------------------------------*/
#header {
	width: $base_width;
	margin-bottom: $base_margin_bottom;
	background: #fff;
	
	#nav {
		@extend .clearfix;
		li {
			float: left;
		}
	}
}


/*----------------------------------------------------
	フッター
----------------------------------------------------*/
#footer {
	@extend .clearfix;
	width: $base_width;
	background: #ccc;
	
	.copyright {
		text-align: center;
	}
}

_main.scss

@charset "utf-8";
// ===================================================================
// メイン - このファイルにメインコンテンツ部分のスタイルをガツガツ書いていく。
// ===================================================================

/* TEST */
.test {
	@include border_radius;
	@include border_radius(5px 10px 2px 12%);
	@include bg_size(100px);
	@include min_height(777px);
	@extend .clearfix;
	@extend .box_size;
	background: url(#{$img_path}share/bg_test.gif);
	font-size: fz(18);
}
.opTest img:hover {
	@extend .opacity;
}


/*----------------------------------------------------
	element style
----------------------------------------------------*/
body {
	background: $main_color;
	border-top: 4px solid $accent_color;
	color: $font_color;
	font-family: $base_font;
}

input, textarea {
	font-family: $base_font;
}

// for IE6
* html {
	body, input, textarea {
		font-family: $base_font_ie;
	}
}

// 外部リンクアイコン
.externalIcon {
	margin: 0 3px;
	vertical-align: middle;
}

// リンク
a {
	&:link {
		color: $link_color;
	}
	&:visited {
		color: $link_color_visited;
	}
	&:hover {
		text-decoration: none;
		color: $link_color_hover;
	}
	&:active {
		color: $link_color_active;
	}
}


// レイアウト関係のスタイル読み込み
@import "layout";


/*----------------------------------------------------
	#main
----------------------------------------------------*/
#main {
	float: left;
	width: 600px;
	background: $main_color;
	@include border_radius;
	
	table, ol, ul, dl, blockquote, pre, p {
		margin-bottom: $base_margin_bottom;
	}
	
}


/*----------------------------------------------------
	#sub
----------------------------------------------------*/
#sub {
	float: right;
	width: 310px;
	background: $main_color;
}

_mixin.scss

@charset "utf-8";
// ===================================================================
// mixinやらCSS3やら、extendも。
// ===================================================================


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


// background-size
@mixin bg_size($w, $h: auto) {
	@each $prefix in $set_prefix {
		#{$prefix}background-size: $w $h;
	}
}


// min-height
@mixin min_height($value) {
	min-height: $value;
	_height: $value;
}


// ===================================================================
// extend
// ===================================================================
@if $use_extend_object {
/* 汎用クラス */

	// リストマーカー
	[class^="mark"] {
		padding-left: 15px;
		background: no-repeat left .5em;
	}
	@for $i from 1 through 5 {
		.mark#{$i} {
			background-image: url(#{$img_path}share/mark_#{$i}.gif);
		}
	}

	// 簡易ロールオーバー
	@if $opacity_value {
		.opacity {
			opacity: $opacity_value;
			-moz-opacity: $opacity_value;
			filter: alpha(opacity=#{$opacity_value * 100});
			-ms-filter: "alpha(opacity=#{$opacity_value * 100})";
		}
	}

	// inline-block
	.inline_block {
		display: inline-block;
		*display: inline;
		*zoom: 1;
	}

	// table-cell
	.table_cell {
		display: table-cell;
		*display: inline;
		*zoom: 1;
		vertical-align: middle;
	}

	// float: right
	.fr,
	.imgR {
		float: right;
		margin-left: 10px;
	}

	// float: left
	.fl,
	.imgL {
		float: left;
		margin-right: 10px;
	}

	// text-align: center
	.imgC,
	.tC,
	.btn {
		text-align: center;
	}

	// img Centering
	.imgC {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	// text-align: right
	.tR,
	.sign {
		text-align: right;
	}

	// box-sizing
	.box_size {
		@each $prefix in $set_prefix {
			#{$prefix}box-sizing: border-box;
		}
	}

	// text-shadow none
	.ts_none {
		@each $prefix in $set_prefix {
			#{$prefix}text-shadow: none !important;;
		}
	}

	// box-shadow none
	.bs_none {
		@each $prefix in $set_prefix {
			#{$prefix}box-shadow: none !important;;
		}
	}


	// 余白調整用のクラス
	@if $use_spacing_classes {
		@for $i from 0 through 20 {
			.mt#{$i * 5} { margin-top: 5px * $i !important; }
			.mb#{$i * 5} { margin-bottom: 5px * $i !important; }
			.pt#{$i * 5} { padding-top: 5px * $i !important; }
			.pb#{$i * 5} { padding-bottom: 5px * $i !important; }
		}
	}

}


/* clearfix */
.clearfix {
	*zoom: 1;
	&:after {
		content: ".";
		display: block;
		clear: both;
		height: 0;
		visibility: hidden;
	}
}

_print.scss

@charset "utf-8";
// ===================================================================
// 印刷用
// ===================================================================

/*----------------------------------------------------
	印刷用スタイル
----------------------------------------------------*/
@media print {
	
	* html body {
		zoom: .7;
	}

}

_reset.scss

@charset "utf-8";

// ===================================================================
// リセット用CSS
// ===================================================================

/* Reset Style */
html {
	overflow-y: scroll;
}
body {
	line-height: 1;
	color: #000;
}

@if $use_html5 {
	/* html5doctor.com Reset Stylesheet v1.6.1
	Last Updated: 2010-09-17 Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark */

	html, body, div, span, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	abbr, address, cite, code,
	del, dfn, em, img, ins, kbd, q, samp,
	small, strong, sub, sup, var,
	b, i,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section, summary,
	time, mark, audio, video {
		margin:0;
		padding:0;
		border:0;
		outline:0;
		font-size:100%;
		vertical-align:baseline;
		background:transparent;
	}

	article,aside,details,figcaption,figure,
	footer,header,hgroup,menu,nav,section { 
		display:block;
	}

	nav ul {
		list-style:none;
	}

	blockquote, q {
		quotes:none;
	}

	blockquote:before, blockquote:after,
	q:before, q:after {
		content:'';
		content:none;
	}

	a {
		margin:0;
		padding:0;
		font-size:100%;
		vertical-align:baseline;
		background:transparent;
	}

	// change colours to suit your needs
	ins {
		background-color:#ff9;
		color:#000;
		text-decoration:none;
	}

	// change colours to suit your needs
	mark {
		background-color:#ff9;
		color:#000; 
		font-style:italic;
		font-weight:bold;
	}

	del {
		text-decoration: line-through;
	}

	abbr[title], dfn[title] {
		border-bottom:1px dotted;
		cursor:help;
	}

	table {
		border-collapse:collapse;
		border-spacing:0;
	}

	// change border colour to suit your needs
	hr {
		display:block;
		height:1px;
		border:0;
		border-top:1px solid #cccccc;
		margin:1em 0;
		padding:0;
	}

	input, select {
		vertical-align:middle;
	}

} @else {

	body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
		margin: 0;
		padding: 0;
	}
	address,caption,cite,code,dfn,em,strong,th,var {
		font-style: normal;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	caption,th {
		text-align: left;
	}
	q:before,q:after {
		content: '';
	}
	img,
	object,
	embed {
		vertical-align: top;
	}
	hr,legend {
		display: none;
	}
	h1,h2,h3,h4,h5,h6 {
		font-size: 100%;
	}
	img,abbr,acronym,fieldset {
		border: 0;
	}
	li {
		list-style-type: none;
	}
}

/* YUI 3.4.1 (build 4118) Copyright 2011 Yahoo! Inc. All rights reserved.
Licensed under the BSD License. http://yuilibrary.com/license/ */
// Percents could work for IE, but for backCompat purposes, we are using keywords.
// x-small is for IE6/7 quirks mode.
body {
	font:13px/1.231 arial,helvetica,clean,sans-serif;
	*font-size:small; // for IE
	*font:x-small; // for IE in quirks mode
}

// Nudge down to get to 13px equivalent for these form elements
select, input, button, textarea {
	font:99% arial,helvetica,clean,sans-serif;
}

// To help tables remember to inherit
table {
	font-size:inherit;
	font:100%;
}

// Bump up IE to get to 13px equivalent for these fixed-width elements
pre, code, kbd, samp, tt {
	font-family:monospace;
	*font-size:108%;
	line-height:100%;
}


// ===================================================================
// フォントサイズ
// ===================================================================
$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);
}

フォントサイズを利用するには「font-size: fz(14)」とかってすればOKです。
コレに関しては、えどさんの記事で紹介されてるのをそのまま流用していますので、そちらも合わせて読んで頂ければと。

最後の方に書かれてる「@functionを使って何度も記述することをまとめる」ん所です。

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

_setting.scss

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


// HTML5の場合は値を「false」から「true」にする
$use_html5: false;


// 汎用クラスを使用するか
$use_extend_object: true;

	// 簡易ロールオーバーの値
	$opacity_value: .55;

	// 余白調整用のクラスを使用するか
	$use_spacing_classes: false;


// 画像のパス
$img_path: "../img/";


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


// ページ全体の横幅
$base_width: 940px;


// 要素の基本下マージン
$base_margin_bottom: 15px;


// メインカラー（ベースカラー）
$main_color: #fff;

// サブカラー
$sub_color: #eee;

// アクセントカラー
$accent_color: #e73562;


// ベーステキストカラー
$font_color: #333;


// ベースリンクカラー
$link_color: #06f;
$link_color_visited: #39f;
$link_color_hover: #00f;
$link_color_active: #00f;


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


// 角丸の初期値
$br_value: 3px;

style.scss

@charset "utf-8";
// ===================================================================
// 各SCSSファイルのインポート
// ===================================================================

// 設定用
@import "setting";

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

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

// メインスタイル - layout.scssはメイン内でインポート
@import "main";

// 印刷用スタイル
@import "print";

ながいなー！
では、良きSassライフを～ (・∀・)ノ