解説

Compassでは単位違いの演算ができない。
そのため代用として、「calc」を定義する。
更新日:2017年3月13日

使用方法

使用方法


@include calc( width, '100% - ' + 40px );

変換結果


width: -ms-calc(100% - 40px);
width: -webkit-calc(100% - 40px);
width: -moz-calc(100% - 40px);
width: -o-calc(100% - 40px);
width: calc(100% - 40px);

実装サンプル

パラメタ

$property(セレクタ)
適用させるセレクタ
$expression(計算式)
通常のcalcに設定する計算式

戻り値

なし。

コード

Calc代用関数


/*----------------------------------------------------------------------------------------------------------
Calc代用関数
	説明:
		Compassにはclac相当のファンクションが機能しない。
		(単位の異なる演算ができない)
		そのための代用となる。
----------------------------------------------------------------------------------------------------------*/
@mixin calc( $property, $expression )
{ 
	@each $pre in -ms-, -webkit-, -moz-, -o-
	{
		#{$property}: $pre + calc(#{$expression});
	}
	#{$property}: calc(#{$expression});
}

必須要素

情報
  • Compassを用いること。

注意事項

なし。

更新履歴

2017/03/11 … 浅野 利博
新規作成

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.