CSS�ｿｽR�ｿｽ[�ｿｽf�ｿｽB�ｿｽ�ｿｽ�ｿｽO�ｿｽﾅ具ｿｽ�ｿｽ�ｿｽ�ｿｽﾈゑｿｽ�ｿｽ�ｿｽ�ｿｽﾟゑｿｽSass�ｿｽﾌ奇ｿｽb�ｿｽm�ｿｽ�ｿｽ�ｿｽ�ｿｽ10�ｿｽﾌ暦ｿｽ�ｿｽ_�ｿｽF�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽI WordPress�ｿｽe�ｿｽ[�ｿｽ}�ｿｽ�成�ｿｽV�ｿｽ�ｿｽ�ｿｽ[�ｿｽg�ｿｽJ�ｿｽb�ｿｽg�ｿｽi3�ｿｽj�ｿｽi2/3 �ｿｽy�ｿｽ[�ｿｽW�ｿｽj

Sass�ｿｽﾌ暦ｿｽ�ｿｽ_1�ｿｽF�ｿｽﾏ撰ｿｽ�ｿｽ�ｿｽ�ｿｽg�ｿｽ�ｿｽ�ｿｽ�ｿｽ

�ｿｽ@Sass�ｿｽﾅは変撰ｿｽ�ｿｽ�利用�ｿｽﾅゑｿｽ�ｿｽ�ｿｽB�ｿｽ謔ｭ�ｿｽg�ｿｽ�ｿｽ�ｿｽF�ｿｽA�ｿｽ謔ｭ�ｿｽg�ｿｽ�ｿｽ�ｿｽt�ｿｽH�ｿｽ�ｿｽ�ｿｽg�ｿｽZ�ｿｽb�ｿｽg�ｿｽﾈどゑｿｽ�ｿｽ�ｿｽ�ｿｽ轤ｩ�ｿｽ�ｿｽ�ｿｽﾟ変撰ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽﾄゑｿｽ�ｿｽ�ｿｽ�ｿｽA�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽR�ｿｽﾉ呼び出�ｿｽ�ｿｽ�ｿｽﾄ暦ｿｽ�ｿｽp�ｿｽﾅゑｿｽ�ｿｽ�ｿｽB

�ｿｽ@�ｿｽﾏ撰ｿｽ�ｿｽﾍ、�ｿｽu$�ｿｽv�ｿｽﾌ鯉ｿｽﾉ抵ｿｽ`�ｿｽﾅゑｿｽ�ｿｽ�ｿｽ

$width:500px;
$color:#aa443f;
#maincontainer{
	width:$width;
	color:$color;
}

�ｿｽ�ｿｽ�ｿｽR�ｿｽ�ｿｽ�ｿｽp�ｿｽC�ｿｽ�ｿｽ

#maincontainer {
  width: 500 px;
  color: #aa443f;
}

Sass�ｿｽﾌ暦ｿｽ�ｿｽ_2�ｿｽFCSS�ｿｽﾌ継�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽl�ｿｽX�ｿｽg�ｿｽﾅまとめゑｿｽ�ｿｽ�ｿｽ

�ｿｽ@CSS�ｿｽﾌ継�ｿｽ�ｿｽ�ｿｽﾍネ�ｿｽX�ｿｽg�ｿｽ�ｿｽp�ｿｽ�ｿｽ�ｿｽﾄ簡鯉ｿｽ�ｿｽﾉ記�ｿｽq�ｿｽﾅゑｿｽ�ｿｽ�ｿｽB

#main{
	background-color:#000;
	.content{
		background-color:#aaa;
		color:#000;
		.sidebar{
			padding:10px;
		}
	}
}

�ｿｽ�ｿｽ�ｿｽR�ｿｽ�ｿｽ�ｿｽp�ｿｽC�ｿｽ�ｿｽ

#main {
  background-color: black;
}
#main .content {
  background-color: #aaaaaa;
  color: black;
}
#main .content .sidebar {
  padding: 10px;
}

Sass�ｿｽﾌ暦ｿｽ�ｿｽ_3�ｿｽF�ｿｽl�ｿｽ[�ｿｽ�ｿｽ�ｿｽX�ｿｽy�ｿｽ[�ｿｽX�ｿｽﾅネ�ｿｽX�ｿｽg�ｿｽﾅゑｿｽ�ｿｽ�ｿｽ

�ｿｽ@�ｿｽ�ｿｽ�ｿｽ�ｿｽﾌネ�ｿｽ[�ｿｽ�ｿｽ�ｿｽX�ｿｽy�ｿｽ[�ｿｽX�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽﾂプ�ｿｽ�ｿｽ�ｿｽp�ｿｽe�ｿｽB�ｿｽﾍ、�ｿｽl�ｿｽ[�ｿｽ�ｿｽ�ｿｽX�ｿｽy�ｿｽ[�ｿｽX�ｿｽﾅネ�ｿｽX�ｿｽg�ｿｽﾅゑｿｽ�ｿｽ�ｿｽB

.fontnest{
	font:{
		family:family;
		size:1.2em;
		color:#fff;
	}
}

�ｿｽ�ｿｽ�ｿｽR�ｿｽ�ｿｽ�ｿｽp�ｿｽC�ｿｽ�ｿｽ

.fontnest {
  font-family: family;
  font-size: 1.2em;
  font-color: white;
}

Sass�ｿｽﾌ暦ｿｽ�ｿｽ_4�ｿｽF�ｿｽC�ｿｽ�ｿｽ�ｿｽ|�ｿｽ[�ｿｽg�ｿｽ�ｿｽCSS�ｿｽt�ｿｽ@�ｿｽC�ｿｽ�ｿｽ�ｿｽ�ｿｽ1�ｿｽﾂにまとめゑｿｽ�ｿｽ�ｿｽ

�ｿｽ@Sass�ｿｽﾅゑｿｽCSS�ｿｽﾌよう�ｿｽﾉ「@import�ｿｽv�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽp�ｿｽﾅゑｿｽ�ｿｽ�ｿｽBCSS�ｿｽ�ｿｽSass�ｿｽﾌ鯉ｿｽ�ｿｽ�ｿｽI�ｿｽ痰｢�ｿｽﾆゑｿｽ�ｿｽﾄ、Sass�ｿｽﾍ最終�ｿｽI�ｿｽﾉ撰ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽCSS�ｿｽt�ｿｽ@�ｿｽC�ｿｽ�ｿｽ�ｿｽ�ｿｽ1�ｿｽﾂゑｿｽ�ｿｽ�ｿｽ�ｿｽﾉなゑｿｽﾆゑｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ_�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽﾌゑｿｽ�ｿｽB

�ｿｽ@CSS�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ鼾��ｿｽﾅゑｿｽ�ｿｽS�ｿｽﾌで使�ｿｽ�ｿｽ�ｿｽ�ｿｽCSS�ｿｽﾆ難ｿｽ�ｿｽ�ｿｽy�ｿｽ[�ｿｽW�ｿｽﾅ使�ｿｽ�ｿｽCSS�ｿｽﾈど、�ｿｽ�ｿｽﾂゑｿｽ�ｿｽﾌフ�ｿｽ@�ｿｽC�ｿｽ�ｿｽ�ｿｽﾉ包ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽﾄ搾ｿｽ驍ｱ�ｿｽﾆゑｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽB�ｿｽﾆゑｿｽ�ｿｽ�が�ｿｽA�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ驍ｱ�ｿｽﾆゑｿｽHTTP�ｿｽ�ｿｽ�ｿｽN�ｿｽG�ｿｽX�ｿｽg�ｿｽﾌ撰ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽﾄゑｿｽ�ｿｽﾜゑｿｽ�ｿｽB

�ｿｽ@Sass�ｿｽﾅはフ�ｿｽ@�ｿｽC�ｿｽ�ｿｽ�ｿｽ�分奇ｿｽ�ｿｽ�ｿｽ�ｿｽﾄ作成�ｿｽ�ｿｽ�ｿｽﾄゑｿｽ�ｿｽﾄゑｿｽ�ｿｽA@import�ｿｽ�利用�ｿｽ�ｿｽ�ｿｽ驍ｱ�ｿｽﾆで最終�ｿｽI�ｿｽﾈフ�ｿｽ@�ｿｽC�ｿｽ�ｿｽ�ｿｽ�ｿｽ1�ｿｽﾂにまとめるこ�ｿｽﾆゑｿｽ�ｿｽﾅゑｿｽ�ｿｽA�ｿｽT�ｿｽ[�ｿｽo�ｿｽ[�ｿｽﾌ包ｿｽ�ｿｽﾗゑｿｽ�ｿｽy�ｿｽ�ｿｽ�ｿｽﾅゑｿｽ�ｿｽ�ｿｽﾌゑｿｽ�ｿｽB

Sass�ｿｽﾌ暦ｿｽ�ｿｽ_5�ｿｽF�ｿｽ~�ｿｽb�ｿｽN�ｿｽX�ｿｽC�ｿｽ�ｿｽ�ｿｽﾆイ�ｿｽ�ｿｽ�ｿｽN�ｿｽ�ｿｽ�ｿｽ[�ｿｽh�ｿｽﾅス�ｿｽ^�ｿｽC�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽg�ｿｽ�ｿｽ�ｿｽ�せゑｿｽ

�ｿｽ@Sass�ｿｽﾌミ�ｿｽb�ｿｽN�ｿｽX�ｿｽC�ｿｽ�ｿｽ�ｿｽﾍ、�ｿｽ�ｿｽ�ｿｽ�ｿｽﾜとまゑｿｽ�ｿｽ�ｿｽ�ｿｽX�ｿｽ^�ｿｽC�ｿｽ�ｿｽ�ｿｽ�ｿｽﾏ撰ｿｽ�ｿｽﾌよう�ｿｽﾉパ�ｿｽb�ｿｽP�ｿｽ[�ｿｽW�ｿｽ�ｿｽ�ｿｽﾄゑｿｽ�ｿｽ�ｿｽ�ｿｽA�ｿｽ�ｿｽ�ｿｽR�ｿｽﾉ呼び出�ｿｽ�ｿｽ�ｿｽﾄ暦ｿｽ�ｿｽp�ｿｽﾅゑｿｽ�ｿｽ�ｿｽ@�ｿｽ\�ｿｽ�ｿｽ�ｿｽB�ｿｽX�ｿｽ^�ｿｽC�ｿｽ�ｿｽ�ｿｽV�ｿｽ[�ｿｽg�ｿｽﾌテ�ｿｽ�ｿｽ�ｿｽv�ｿｽ�ｿｽ�ｿｽ[�ｿｽg�ｿｽ@�ｿｽ\�ｿｽﾆゑｿｽ�ｿｽ�ｿｽ�ｿｽ驍ｾ�ｿｽ�う�ｿｽB�ｿｽﾏ撰ｿｽ�ｿｽﾌ場合�ｿｽﾍ単�ｿｽ�ｿｽﾌ値�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽﾄゑｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽA�ｿｽ~�ｿｽb�ｿｽN�ｿｽX�ｿｽC�ｿｽ�ｿｽ�ｿｽﾍ単�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽﾍ包ｿｽ�ｿｽ�ｿｽ�ｿｽﾌス�ｿｽ^�ｿｽC�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽB

�ｿｽ@�ｿｽ�ｿｽ`�ｿｽ�ｿｽ=�ｿｽiSASS�ｿｽL�ｿｽ@�ｿｽj�ｿｽ�ｿｽ@mixin�ｿｽiSCSS�ｿｽL�ｿｽ@�ｿｽj�ｿｽﾅ行�ｿｽ�ｿｽ�ｿｽﾄ、�ｿｽﾄび出�ｿｽ�ｿｽ�ｿｽ�ｿｽ+�ｿｽiSASS�ｿｽL�ｿｽ@�ｿｽj�ｿｽ�ｿｽ@include�ｿｽiSCSS�ｿｽL�ｿｽ@�ｿｽj�ｿｽ�ｿｽ�ｿｽg�ｿｽ�ｿｽ�ｿｽB

@mixin maintext {
	font:{
		family: Arial;
		size: 20px;
		weight: bold;
	}
	color: #ff0000;
}
.mainmix{
	@include maintext;
	background-color:#fff;
}

�ｿｽ�ｿｽ�ｿｽR�ｿｽ�ｿｽ�ｿｽp�ｿｽC�ｿｽ�ｿｽ

.mainmix {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  background-color: #fff;
}

Sass�ｿｽﾌ暦ｿｽ�ｿｽ_6�ｿｽF�ｿｽ~�ｿｽb�ｿｽN�ｿｽX�ｿｽC�ｿｽ�ｿｽ�ｿｽﾅは茨ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽg�ｿｽ�ｿｽ�ｿｽ�ｿｽ

�ｿｽ@�ｿｽﾜゑｿｽ�ｿｽA�ｿｽ~�ｿｽb�ｿｽN�ｿｽX�ｿｽC�ｿｽ�ｿｽ�ｿｽﾅは、�ｿｽﾏ撰ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽﾉ使�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽﾆゑｿｽ�ｿｽﾅゑｿｽ�ｿｽ�ｿｽB

@mixin border-radius($radius) {
	-webkit-border-radius: $radius;
	-moz-border-radius: $radius;
	-ms-border-radius: $radius;
	-o-border-radius: $radius;
	border-radius: $radius;
}
.box { @include border-radius(10px); }

�ｿｽ�ｿｽ�ｿｽR�ｿｽ�ｿｽ�ｿｽp�ｿｽC�ｿｽ�ｿｽ

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

Sass�ｿｽﾌ暦ｿｽ�ｿｽ_7�ｿｽF�ｿｽZ�ｿｽp�ｿｽ�ｿｽ�ｿｽZ�ｿｽq�ｿｽﾅ値�ｿｽﾌ会ｿｽ�ｿｽ�ｿｽ�ｿｽ謠懶ｿｽ�ｿｽ�ｿｽﾅゑｿｽ�ｿｽ�ｿｽ

�ｿｽ@Sass�ｿｽﾅは、+�ｿｽA-�ｿｽA*�ｿｽA/�ｿｽA%�ｿｽ�ｿｽ�ｿｽg�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽA�ｿｽl�ｿｽﾌ会ｿｽ�ｿｽZ�ｿｽ�ｿｽ�ｿｽﾂ能�ｿｽ�ｿｽ�ｿｽB�ｿｽ�ｿｽ�ｿｽl�ｿｽﾍゑｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽA�ｿｽF�ｿｽﾜでゑｿｽ�ｿｽ�ｿｽ�ｿｽZ�ｿｽﾅゑｿｽ�ｿｽ�ｿｽﾌで、�ｿｽu�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽA�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽﾆ搾ｿｽ�ｿｽ�ｿｽ�ｿｽv�ｿｽﾈゑｿｽﾄゑｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽﾆゑｿｽGUI�ｿｽi�ｿｽV�ｿｽﾅ趣ｿｽ�ｿｽs�ｿｽﾅゑｿｽ�ｿｽ�ｿｽB�ｿｽu�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽA�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽﾆ搾ｿｽ�ｿｽ�ｿｽ�ｿｽv�ｿｽ�ｿｽSass�ｿｽI�ｿｽﾉ表�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽﾈゑｿｽA�ｿｽ�ｿｽ�ｿｽ�ｿｽﾈ奇ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽB

.coloradd{
	color:#ff44aa - #555;
}

�ｿｽ�ｿｽ�ｿｽR�ｿｽ�ｿｽ�ｿｽp�ｿｽC�ｿｽ�ｿｽ

.coloradd {
  color: #aa0055;
}

Sass�ｿｽﾌ暦ｿｽ�ｿｽ_8�ｿｽF�ｿｽﾊの単�ｿｽﾊ難ｿｽ�ｿｽm�ｿｽﾅ会ｿｽ�ｿｽZ�ｿｽﾅゑｿｽ�ｿｽ�ｿｽ

�ｿｽ@�ｿｽﾜゑｿｽ�ｿｽA�ｿｽﾊの単�ｿｽﾊ難ｿｽ�ｿｽm�ｿｽﾅ会ｿｽ�ｿｽZ�ｿｽ�ｿｽ�ｿｽ驍ｱ�ｿｽﾆゑｿｽ�ｿｽﾅゑｿｽ�ｿｽ�ｿｽB

.widthadd{
	width:40px + 2in;
}

�ｿｽ�ｿｽ�ｿｽR�ｿｽ�ｿｽ�ｿｽp�ｿｽC�ｿｽ�ｿｽ

.widthadd {
  width: 232px;
}