解説

background-positionの指定でCalcを使用可能にする関数。
更新日:2017年3月13日

使用方法

使用方法


@include background-position( '100% - ' + 2rem, 3rem);

変換結果


background-position: : -ms-calc(100% - 2rem) -ms-calc( 3rem );
background-position: : -webkit-calc(100% - 2rem) -ms-calc( 3rem );
background-position: : -moz-calc(100% - 2rem) -ms-calc( 3rem );
background-position: : -o-calc(100% - 2rem) -ms-calc( 3rem );
background-position: : calc(100% - 2rem) calc( 3rem );

実装サンプル

パラメタ

$f1
横方向のcalcで演算左折ための値
$f2
縦方向のcalcで演算左折ための値

戻り値

なし。

コード

Calc代用関数


	/*----------------------------------------------------------------------------------------------------------
	background-position代用関数
		説明:
			background-positionの指定でCalcを使用可能にするもの。
			
		参照: https://inside-research.com/5988/sass-background-position%E4%BB%A3%E7%94%A8%E9%96%A2%E6%95%B0
	----------------------------------------------------------------------------------------------------------*/
	@mixin background-position( $f1, $f2 )
	{
		@each $pre in -ms-, -webkit-, -moz-, -o-
		{
			background-position: $pre + calc(#{$f1}) + ' ' + $pre + calc(#{$f2});
		}
		background-position: calc(#{$f1}) + ' ' + calc(#{$f2});		
	}

必須要素

  • Compassを用いること。

注意事項

  • 引数には、キーワード「top, bottom, left, right)のような指定はしないこと!

更新履歴

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.