code up

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Sass+compass 使い方

Sassやcompassで実践したことをまとめていく。

Sass+compassのインストールはこちら

compass

Box Shadow

ブロック要素(block element)に対してinset(内側)あるいはdrop(ドロップ; 外側)の影をつけることができる。

デモ(このサイト) | デモ(compass内)

設定可能なデフォルト値 (Configurable Variables)

$default-box-shadow-color: #333333
影の色
$default-box-shadow-h-offset: 0
水平方向の位置(px)。プラスで右方向
$default-box-shadow-v-offset: 0
垂直方向の位置(px)。プラスで下方向
$default-box-shadow-blur: 5px
影のぼやけ・にじみ具合の半径サイズ。マイナスは不可
$default-box-shadow-spread: 0
影の輪郭を広げる半径サイズ。プラスでぼやけていない影の量が増え、マイナスでぼやけている部分を含めて縮める。薄い影を作りたい場合など、ぼやけ(第3引数)を大きく設定して、この値をマイナスに設定することで影の先端だけを残すということもできる
shadow spread lengthをマイナスにする例

@include box-shadow(20px 20px 100px -30px green);
Mixin

Mixinはふたつ用意されている。

@include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
引数なしで呼び出された場合は、デフォルト値が使用されるが、それ以外の場合はCSS3のbox-shadowプロパティのSyntaxに従って指定する。
single-box-shadow($color, $hoff, $voff, $blur, $spread, $inset)
@include single-box-shadow($hoff:10px);というように、引数も省略が可能。省略した場合はデフォルト値が使用される。

Sticky Footer

下に張り付くフッターを作成できる。レイアウト制限があるため向き・不向きがあるだろう。

デモ(このサイト) | デモ(compass内)

CSSリセット、レイアウトにはCSS Grids - YUI Library - YUI 3を利用している。

demo-sf.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta http-equiv="Content-Script-type" content="text/javascript">  
	<meta http-equiv="Content-Style-type" content="text/css">

	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.4.1/build/cssreset/cssreset-min.css&3.4.1/build/cssfonts/cssfonts-min.css&3.4.1/build/cssbase/cssbase-min.css&3.4.1/build/cssgrids/cssgrids-min.css" />
	<link rel="stylesheet" type="text/css" href="demo-sf.css" media="screen, projection" />

	<title>sticky-footer demo</title>
	
</head><body>
<div id="layout">
	<div id="root">
		<div id="header" class="yui3-g">
			<div class="yui3-u">
				ヘッダー
			</div>
		</div>
		<div id="content" class="ui-helper-clearfix yui3-g">
			<div class="yui3-u">
				<p>ページコンテンツ</p>
				<p>ページコンテンツ</p>
				<p>ページコンテンツ</p>
				<p>ページコンテンツ</p>
				<p>ページコンテンツ</p>
				<p>ページコンテンツ</p>
				<p>ページコンテンツ</p>
				<p>ページコンテンツ</p>
				<p>ページコンテンツ</p>
				<p>ページコンテンツ</p>
			</div>
		</div>
		<div id='root_footer'><!-- レイアウト用 空としておく --></div>
	</div>
	<div id="footer" class="yui3-g">
		<div class="yui3-u copyright">
			©<a href="http://frmmpgit.blog.fc2.com/">code up</a> All Rights Reserved.
		</div>
	</div>
</div>
</body></html>

demo-sf.scss

@charset "utf-8";

@import "compass/layout/sticky-footer";

html, body, #layout {
	height: 100%;
}

html {
	body{
		#layout {
			#root {
				background-color: lightgreen;

				#header {
					background-color: blue;
					color: white;
				}

			} // #root
	
			#footer {
				background-color: red;
				color: white;
			} // #footer

			@include sticky-footer(60px);
		} // #layout
	} // body	
} // html

demo-sf.css

html, body, #layout {
  height: 100%;
}

html body #layout #root {
  background-color: lightgreen;
}
html body #layout #root #header {
  background-color: blue;
  color: white;
}
html body #layout #footer {
  background-color: red;
  color: white;
}
html body #layout html, html body #layout body {
  height: 100%;
}
html body #layout #root {
  clear: both;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin-bottom: -60px;
}
html body #layout #root #root_footer {
  height: 60px;
}
html body #layout #footer {
  clear: both;
  position: relative;
  height: 60px;
}

使用方法は@include sticky-footer(54px)もしくは@include sticky-footer(54px, "#my-root", "#my-root-footer", "#my-footer")となる。

今回はデフォルトのidを指定しているので、前者の構文を使用した。

公式サイトに書かれている使用上の説明:

  • 呼び出し(Mix in; @include)はスタイルシートのトップレベルに書くこと。正確には#rootの親要素以上の位置。今回は#layoutの下に置いた
  • フッター要素(#footer)はルート(#root)外になければならない。例では#rootと#footerを同レベルに配置している。#root #footerのように子孫関係として配置できない
  • footerは固定の高さを指定しなければならない。Mix-in時の第1引数がそれに該当するため別途指定する必要はない

リファレンスにない補足説明:

  • #root, #root_footer, #footerは全て指定しなければいけない。#root_footerはなくても一見うまく表示できるが、高さを狭めたときにフッターのサイズ分、本文の下が隠れてしまう
  • フッター要素はルート外になければならない。例では#rootと#footerを同レベルに配置している。#root #footerのように子孫要素関係には配置できない
  • html { height: 100%; }がないとChromeでうまく動作しない
  • body { height: 100%; }がないとIE6でうまく動作しない

Stretching

デモページにあるように、ある要素をそのコンテナのサイズに合わせて引き延ばすMixin。IE6ではうまく動作しない。

Lists

Horizontal List, Inline-Block List

どちらもリスト要素を水平に配置する。水平配置のために、floatを使うかinline-blockを使うかの違い。IE6ではどちらも動いた。

Horizontal Listは右寄せができる。Inline-Block Listはli同士にHTMLレベルでスペースや改行があるとIE9では隙間ができる。

基本Horizontal Listでいいかな。

.css

.nav {
	ul {
		@include horizontal-list-container;
		
		li {
			@include horizontal-list-item(false, right);
		}
	}
}

.nav2 {
	ul {
		@include inline-block-list-container;
		
		li {
			@include inline-block-list-item;
		}
	}
}

.html

<p>.nav</p>
<div class="nav">
	<ul>
		<li><a href="foobar.html">nav</a></li>
		<li><a href="foobar.html">nav</a></li>
		<li><a href="foobar.html">nav</a></li>
		<li><a href="foobar.html">nav</a></li>
		<li><a href="foobar.html">nav</a></li>
		<li><a href="foobar.html">nav</a></li>
		<li><a href="foobar.html">nav</a></li>
	</ul>
</div>
<hr />

<p>.nav2</p>
<div class="nav2">
	<ul>
		<li><a href="foobar.html">nav2</a></li><li><a href="foobar.html">nav2</a></li>
		<li><a href="foobar.html">nav2</a></li><li><a href="foobar.html">nav2</a></li>
		<li><a href="foobar.html">nav2</a></li>
	</ul>
</div>

こんな感じで表示される。上段がHorizontal List、下段がInline-Block List

Opacity

透明、半透明、不透明にする。

.foo {
  @include opacity(0.1); // 0から1までの間の数値。0が透明、1が不透明
  @include transparent; // 完全なる透明
  @include opaque; // 完全なる不透明
}

Sass

@charset

scssファイルに@charsetを書いても中身がアスキー文字のみの場合(日本語等が含まれない場合)、cssファイルに@charsetが出力されない。

強制的に出力させるためにはコメントを利用して何かしらのutf-8文字を入力しておく必要がある。その場合、/*! */コメントを利用する。参考 (Sass - forcing @charset - Google Group)。このコメント記法によって出力先のcssにもコメントが残るため、文字コードの設定が出力されるようだ。
/*! あ */

バージョンアップ(Compass 0.11.7/Sass 3.1.12)したせいか、次のエラーが出るようになった。

error sass/screen.scss (Line 3: Invalid Windows-31J character "\xE3")

解決方法はふたつ。まずはエラーの通り、scssファイルのエンコーディングがWindows-31J(Shift-JIS)ではないので、scssファイルのエンコーディングをShift-JISにする。ただしこれを行うと、@charsetも'Windows-31J'としなければいけない。

もう一つの解決方法は環境変数LANGにUTF-8を指定する。

set LANG=ja_JP.UTF-8

全てをUTF-8で統一しておきたいので、私はふたつめの方法で行った。

Windowsの方法だが、おそらくLinux系でも通用する。Eclipse環境だがコマンドラインでも同様でしょう。またen_US.UTF-8でも大丈夫っぽい。

Eclipseの設定例。詳しくは前回の記事を。

Eclipseで環境変数を設定してbuild.xml(Ant)を実行するには分離されたJREじゃなければいけないので、それも設定。

コメント

SassではコメントとしてCSS標準の/* */(ブロックコメント; Block Comments)の他にも//(1行コメント; Single Line Comments)が書ける。

例えばコピーライトなど、CSSに残しておきたいコメントもあるだろう。@charsetの部分でさらっと書いているが、コメントの最初に!(ビックリマーク)を加えておくことで、圧縮出力(compressed)してもコメントが残るようになる(loud-commentと呼ぶ)。

使うと警告が出るので分かるが1行コメントでloud-commentは推奨されなくなっている。参考 (Sass Changelog - sass-lang.com)

output-style: expanded

demo.scss

@charset "utf-8";
/*! あ */
//! い *警告(`//` comments will no longer be allowed to use the `!` flag in Sass 3.2. Please change to `/*` comments.)が出る
/* う *compressedでは出力されない */
// え *cssには出力されない

demo.css

@charset "UTF-8";
/* あ */
/* い *警告(`//` comments will no longer be allowed to use the `!` flag in Sass 3.2. Please change to `/*` comments.)が出る */
/* う */

output-style: compressed

demo.scss

@charset "utf-8";
/*! あ */
//! い *警告(`//` comments will no longer be allowed to use the `!` flag in Sass 3.2. Please change to `/*` comments.)が出る
/* う *compressedでは出力されない */
// え *cssには出力されない

demo.css

@charset "UTF-8";/* あ *//* い *警告(`//` comments will no longer be allowed to use the `!` flag in Sass 3.2. Please change to `/*` comments.)が出る */

ネストしつつも要素を引き継ぐ

例えばli要素があって、それをhoverしたときのスタイルを定義する場合。なんとなくliにネストさせて書きたくなる。そんな時は&(アンパサンド)を使用するとその親要素名に置換してくれる。Referencing Parent Selectors: & (Sassのドキュメント)というらしい。

ul {
	li {
		background-color: darken(red, 20%);

		&:hover {
			background-color: lighten(red, 20%);
		}
	}
}

これは次の書き方と同義。

ul {
	li {
		background-color: darken(red, 20%);
	}
	li:hover {
		background-color: lighten(red, 20%);
	}
}
関連記事
タグ:CSS Sass compass
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。