article {
	width: 560px - 14px;
	padding: 7px;
}

article {
  width: 546px;
  padding: 7px;
}

// 足し算
.example01 {
	width: 500px + 8;
}
// 掛け算
.example02 {
	width: 500px * 8;
}
// 割り算
.example03 {
	width: (500px / 8);
}

.example01 {
  width: 508px;
}
.example02 {
  width: 4000px;
}
.example03 {
  width: 62.5px;
}

article {
	width: 300px + 5cm;
}

article {
  width: 488.97638px;
}

$main_width: 560px;

article {
	width: $main_width - 7 * 2;
	padding: 0 7px;
}

article {
  width: 546px;
  padding: 0 7px;
}

$main_width: 560px;

article {
	$padding: 7px;
	width: $main_width - $padding * 2;
	padding: 0 $padding;
}

a {
	color: #000 + #111;
}

a {
  color: #111111;
}

$font_color: #333;

a.sample01:hover {
	// 変数 + rgb() 関数
	color: $font_color + rgb(51,51,51);
}
a.sample02:hover {
	// キーワード + 変数
	color: blue + $font_color;
}
a.sample03:hover {
	// 変数 - 数値
	color: $font_color - 3;
}
a.sample04:hover {
	// rgb() 関数 - 数値
	color: rgb(255,255,255) - 10;
}

a.sample01:hover {
  color: #666666;
}
a.sample02:hover {
  color: #3333ff;
}
a.sample03:hover {
  color: #303030;
}
a.sample04:hover {
  color: whitesmoke;
}

p:after {
	content: "今日は、" + 寒いです。;
	font-family: sans- + "serif";
}

p:after {
  content: "今日は、寒いです。";
  font-family: sans-serif;
}

.division01 {
	$value: 50px;
	width: $value / 2;
}
.division02 {
	width: (50px / 2);
}
.division03 {
	width: 50px - 50 / 2;
}