Sassを試してみる

Sassを使う上での基本的なことを色々試してみたいと思います。
サンプルの出力後のCSSはこちら

ファイル分割

実際のコードの書き方の前に、ファイルの分割を行ってみます。

コンパイルを行うファイルをstyle.scss、style.scssに読み込ませるファイルを_sample.scssとします。
分割するSCSSファイルは頭文字に「_」を付けて、コンパイルを行われないようにします。

Sass(style.scss)

/* sample01 */
@import "sample/_sample01";

@import “filename”; で分割ファイルを読み込みます。
読み込む際は「.scss」を省略できます。

Sass(_sample01.scss)

#page {
	width: 100%;

	.inner {
		width: 960px;
		margin: 0 auto;
	}
}

分割先のファイルは通常のSCSSで記述します。

CSS(style.css)

/* sample01 */
#page {
  width: 100%;
}
#page .inner {
  width: 960px;
  margin: 0 auto;
}

コンパイルを実行すると、_sample01.scssはstyle.scss内に読み込まれ、まとめてstyle.cssとして出力されます。
style.scssのサンプル
style.cssのサンプル
　

Sample01(ネスト)

入れ子でCSSを記述する事ができます。

Sass(_sample01.scss)

#page {
	width: 100%;

	.inner {
		width: 960px;
		margin: 0 auto;
	}
}

CSS

#page {
  width: 100%;
}
#page .inner {
  width: 960px;
  margin: 0 auto;
}

_sample01.scssのサンプル
　

Sample02(参照)

「&」を使うことで親セレクタを参照できます。
「&:after」のようにして疑似要素や疑似クラスを使用する方法、ページ毎にclass名を付けておき、「.class名 &」のようにして特定のページだけ別にスタイルを指定したい場合などに便利です。

Sass(_sample02.scss)

.header {
	width: 100%;

	&:after {
		content: "";
		display: block;
		clear: both;
	}
	.top & {
		margin-bottom: 20px;
	}
	& &-logo {
		float: left;
	}
}

CSS

.header {
  width: 100%;
}
.header:after {
  content: "";
  display: block;
  clear: both;
}
.top .header {
  margin-bottom: 20px;
}
.header .header-logo {
  float: left;
}

「& &-logo」のように複数回使用することもできます。
_sample02.scssのサンプル
　

Sample03(変数)

「$変数名: 値;」とすることで変数として扱えます。
画像パスなどを扱う場合、変数とそうでない部分の区別がつかなくなるので、「#{$変数名}」のようにして変数とそうでない部分を分かるようにします。

Sass(_sample03.scss)

$font_color: #333;
$img_path: "img/common/";
.footer {
	color: $font_color;
	background: url(#{$img_path}sample.jpg);
}

CSS

.footer {
  color: #333;
  background: url(img/common/sample.jpg);
}

_sample03.scssのサンプル
　

Sample04(media query)

media queryを使用する場合、変数を使ってサイズ管理を行うと便利です。

Sass(_sample04.scss)

$pc_width: 960px;
#sub {
	width: auto;
	padding: 0 10px;

	@media screen and (min-width:$pc_width) {
		float: right;
		width: 220px;
		padding: 0;
	}
}

CSS

#sub {
  width: auto;
  padding: 0 10px;
}
@media screen and (min-width: 960px) {
  #sub {
    float: right;
    width: 220px;
    padding: 0;
  }
}

_sample04.scssのサンプル
　

Sample05(mixin)

プロパティのまとまりを「@mixin ミックスイン名{}」のようにまとめておくことで、指定したセレクタ内で読み込ませることができます。

Sass(_sample05.scss)

@mixin dib {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}
.list {
	text-align: center;

	li {
		@include dib;
		margin: 0 10px 10px 0;
	}
}

CSS

.list {
  text-align: center;
}
.list li {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  margin: 0 10px 10px 0;
}

_sample05.scssのサンプル
　

Sample06(extend)

「@extend セレクタ名」とすることで、一度使用したセレクタの記述をまとめることができます。

Sass(_sample06.scss)

.clearfix {
	*zoom: 1;

	&:after {
		content: "";
		display: block;
		clear: both;
	}
}
.photo {
	@extend .clearfix;
}

CSS

.clearfix, .photo {
  *zoom: 1;
}
.clearfix:after, .photo:after {
  content: "";
  display: block;
  clear: both;
}

_sample06.scssのサンプル
　

Sample07(演算)

数値の演算を行えます。

Sass(_sample07.scss)

$contents_width: 960px;
#contents {
	width: $contents_width - 20;
	padding: 0 10px;
}

CSS

#contents {
  width: 940px;
  padding: 0 10px;
}

_sample07.scssのサンプル
　

【参考サイト】

• 【Sassを覚えよう！】もくじ的なのと参考リンク – CSS HappyLife