第6章 Sassを更に便利にする Compass

6-5 Compassの関数（Image Helpers）

画像関連の関数

画像のパスを補完をする（URL Helpers）

.boxA {
	background-image: image-url("compass.png");
}

.boxA {
  background-image: url('../img/compass.png');
}

画像サイズを取得する（Image Dimension Helpers）

.boxB {
	width: image-width("compass.png");
	height: image-height("compass.png");
}

.boxB {
  width: 400px;
  height: 80px;
}

データURIスキームに変換する（Inline Data Helpers）

.boxC {
	background-image: inline-image("compass.png");
}

.boxC {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANS〜省略〜AAAABJRU5ErkJggg==');
}

色(Color Helpers)

$color:hsl(180, 50%, 50%);
$amount: 25%;
.color-helpers {
	/* adjust-lightness */	color: adjust-lightness($color, $amount);
	/* adjust-saturation */	color: adjust-saturation($color, $amount);
	/* scale-lightness */	color: scale-lightness($color, $amount);
	/* scale-saturation */	color: scale-saturation($color, $amount);
	/* shade */				color: shade($color, $amount);
	/* tint */				color: tint($color, $amount);
}

.color-helpers {
  /* adjust-lightness */
  color: #9fdfdf;
  /* adjust-saturation */
  color: #20dfdf;
  /* scale-lightness */
  color: #70cfcf;
  /* scale-saturation */
  color: #30cfcf;
  /* shade */
  color: #308f8f;
  /* tint */
  color: #6fcfcf;
}

セレクタで使う関数（Selector Helpers）

headings()関数

#{headings()} {
	font-family: "Source Code Pro";
}
#{headings(3)} {
	font-weight: bold;
}
#{headings(4, 5)} {
	font-weight: normal;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Source Code Pro";
}

h1, h2, h3 {
  font-weight: bold;
}

h4, h5 {
  font-weight: normal;
}

nest()関数 

#{nest(".grand", ".parent", ".child")} {
	font-family: "Source Code Pro";
}
#{nest(".brother, .sistar", ".child")} {
	font-weight: bold;
}
#{nest(".foo, .bar", "a, span")} {
	font-weight: normal;
}

.grand .parent .child {
  font-family: "Source Code Pro";
}

.brother .child, .sistar .child {
  font-weight: bold;
}

.foo a, .foo span, .bar a, .bar span {
  font-weight: normal;
}

elements-of-type()関数 

#{elements-of-type(html5)} {
	display: block;
}

article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, menu, meter, nav, output, progress, rp, rt, ruby, section, summary, time, video, wbr {
  display: block;
}