吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

演算について

2014年2月28日 / category : reference-sass, sass

Sassで使える演算について紹介します。

加算について

Sass
.classA{
	width: 10px + 10px;
}

.classB{
	width: 10px + 10;
}

.classC{
	width: 10px + 10%;
}

.classD{
	width: 10px + 10cm;
}

.classE{
	$value: 10;
	width: 10px + $value;
}

.classF{
	width: 10px + 10px + 10px;
}
CSS – コンパイル後
.classA {
	//同じ単位での演算
	width: 20px;
}

.classB {
	//片方が単位なしの演算は単位のある方に合わせて演算
	width: 20px;
}

.classC{
	//エラーが発生します。
	//単位の違う演算はNGのようです。
}

.classD {
	//単位の違う演算はNGですが、なぜか大丈夫なものもあるようです・・・
	width: 387.95276px;
}

.classE {
	//変数も使用可能
	width: 20px;
}

.classF {
	//2つ以上の数値演算も可能
	width: 30px;
}

減算については、加算と同じルールです。

Sass
.classA{
	width: 10px - 10px;
}

.classB{
	width: 10px - 10;
}

.classC{
	width: 10px - 10%;
}

.classD{
	width: 10px - 10cm;
}

.classE{
	$value: 10;
	width: 10px - $value;
}

.classF{
	width: 10px - 10px - 10px;
}

.classG{
	width: 10px-10px
}
CSS – コンパイル後
.classA {
	width: 0px;
}

.classB {
	width: 0px;
}

.classC{
	//エラーが発生します。
}

.classD {
	width: -367.95276px;
}

.classE {
	width: 0px;
}

.classF {
	width: -10px;
}

.classG {
	//計算されない・・・
	//減算の場合は、「-」(ハイフン)の前後に半角スペースを入れる必要があります。
	width: 10px -10px;
}

乗算については

Sass
.classA{
	width: 10px * 10px;
}

.classB{
	width: 10px * 10;
}

.classC{
	$value: 10;
	width: 10px * $value;
}

.classD{
	width: 10px * 10 * 10;
}
CSS – コンパイル後
.classA {
	//エラーが発生します。
	//単位通しの乗算はNGのようです。
}

.classB {
	width: 100px;
}

.classC{
	width: 100px;
}

.classD{
	width: 1000px;
}

除算については、演算の記述方法として()丸括弧で囲う必要があります。

Sass
.classA{
	width: (10px / 10px);
}

.classB{
	width: (10px / 10);
}

.classC{
	width: (10px / 10cm);
}

.classD{
	$value: 10;
	width: 10px / $value;
}

.classE{
	width: (10px / 10 / 10);
}

.classG{
	width: 10px + 10 / 10;
}
CSS – コンパイル後
.classA {
	//単位同士の除算だと、単位も消える・・・
	width: 1;
}

.classB {
	width: 1px;
}

.classC {
	//乗算の場合エラーでしたが、除算の場合は大丈夫でした・・・
	width: 0.02646;
}

.classD {
	//変数を使用する場合は、()丸括弧は必要ないみたいです。
	width: 1px;
}

.classE {
	width: 0.1px;
}

.classG {
	//除算と一緒に、加算などがあれば、()丸括弧は必要ないみたいです。
	width: 11px;
}

剰余については、乗算と同じルールのようです。

Sass
.classA{
	width: 10px % 3px;
}

.classB{
	width: 10px % 3;
}

.classC{
	$value: 3;
	width: 10px % $value;
}

.classD{
	width: 10px % 3 % 3;
}
CSS – コンパイル後
.classA {
	//エラーが発生します。
	//単位通しの乗算はNGのようです。
}

.classB {
	width: 1px;
}

.classC {
  width: 1px;
}

.classD {
  width: 1px;
}

色の演算について

Sass
.colorA{
	color: #000 + #111;
}

.colorB{
	color: #000 + 1;
}

.colorC{
	color: #0f0 * #00f;
}

.colorC{
	color: #0ef * #e0e;
}

.colorD{
	color: #123 * 1.5;
}

.colorE{
	color: rgb(12, 12, 12) + 12;
}

.colorF{
	color: rgb(12, 12, 12) + red;
}

.colorG{
	color: red + #0f0;
}

.colorH{
	color: red + blue;
}
CSS – コンパイル後
.colorA {
	// #RGB + #RGB
	color: #111111;
}

.colorB {
	// #RGB + 数値
	color: #010101;
}

.colorC {
	// #RGB * #RGB
	//演算結果が正しいのか??あやしい・・・
	color: blue;
}

.colorD {
	// #RGB * 数値
	color: #19334c;
}

.colorE {
	// rgb関数 + 数値
	color: #181818;
}

.colorF {
	// rgb関数 + キーワード
	color: #ff0c0c;
}

.colorG {
	// キーワード + #RGB
	color: yellow;
}

.colorH {
	// キーワード + キーワード
	color: magenta;
}