Sassの記法

Sassの記法

hirasawaさんのブログ【Sassを覚えよう！Vol.4】Sassの基本的な記述方法を参考にSassの記法をなぞっていきます。

bonesの理解が目標なので、Bonesのサイト　で使用しているLESS or Sass CompilerのWinLESSを使います。

使用方法は、松風さんのブログMach3.laBlogを参照してください。

cssとlessのフォルダーを作成

c:\
└─CSSフォルダー
　　 └─lessフォルダー

lessファイルコンパイル

@charset #main {
	width: 600px;
	p {
		margin-bottom: 1.5em;
	}
}

としたmain.lessファイルを作成しlessフォルダーに入れる。

Winlessツールにlessフォルダーを登録する。
右下のCompileボタンを押す。
cssフォルダー内にmain.cssファイル(下記)が作成される。

@charset "utf-8";#main{width:600px}#main p{margin-bottom:1.5em}

例１

#header {
	width: 940px;
	h1 {
		float: left;
	}
	ul#nav {
		height: 50px;
		li {
			float: left;
			a {
				float: left;
				width: 80px;
			}
		}
	}
}

上をheader.lessとしてCompileすると、下記header.cssが作成される。

#header{width:940px}#header h1{float:left}#header ul#nav{height:50px}#header ul#nav li{float:left}#header ul#nav li a{float:left;width:80px}

例２　&親セレクタの参照

a {
	font-weight: bold;
	&:hover {
		color: red;
	}
}

Compileすると下のcssが出力される（minify offの場合）

a {
  font-weight: bold;
}
a:hover {
  color: red;
}

例３　&親セレクタの参照

#sub {
	float: right;
	width: 200px;
	background: #ccc;
	.body-top & {
		background: #fff;
	}
}

Compileすると下のcssが出力される（minify offの場合）

#sub {
  float: right;
  width: 200px;
  background: #ccc;
}
.body-top #sub {
  background: #fff;
}

例４コメント

//メインコンテンツ
#main {
	width: 600px;
	// p要素
	p {
		margin-bottom: 1.5em;
	}
	// ul要素
	ul {
		margin: 0 0 1.5em 20px;
		li {
			margin-bottom: 5px;
		}
	}
}

Compileすると下のcssが出力される（minify offの場合）

#main {
  width: 600px;
}
#main p {
  margin-bottom: 1.5em;
}
#main ul {
  margin: 0 0 1.5em 20px;
}
#main ul li {
  margin-bottom: 5px;
}

例５変数 – Variables

@yokohaba: 250px;
#sub {
	width: @yokohaba;
	ul.bnrList {
		width: @yokohaba;
	}
}

Compileすると下のcssが出力される（minify offの場合）

#sub {
  width: 250px;
}
#sub ul.bnrList {
  width: 250px;
}

例６

// ベースフォント
@base_font: "メイリオ", "Meiryo", verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
 
// ベーステキストカラー
@font_color: #333;
 
// ベースリンクカラー
@link_color: #06f;
@link_color_hover: #00f;
 
 
body {
	color: @font_color;
	font-family: @base_font;
}
#main {
	a:link {
		color: @link_color;
	}
	a:hover {
		color: @link_color_hover;
	}
}

Compileすると下のcssが出力される（minify offの場合）

body {
  color: #333333;
  font-family: "メイリオ", "Meiryo", verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
}
#main a:link {
  color: #0066ff;
}
#main a:hover {
  color: blue;
}

前へ戻る　次へ進む

こちらの方のサイトがお勧めです。bonesの特徴を押さえるをよんだらよくわかりました。