解説

ボックスサイズの算出方法を「border-box」にすることで、padding, marginのサイズに関係なく、全てのwidth, heightで指定した値をボックスのサイズとさせる関数。
この関数を最初に読み込ませることで、ボックス配置時のサイズ調整を簡単にする。
更新日:2018年6月21日

使用方法

使用方法


@include more_reset();

変換結果


*, *:before, *:after
{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

パラメタ

なし。

戻り値

なし。

コード

リセット補助関数


/*----------------------------------------------------------------------------------------------------------
リセット補助関数
	説明:
		ボックスサイズの算出方法を「border-box」にすることで、padding, marginのサイズに関係なく、
		width, heightで指定した値をボックスのサイズとする。

	引数:
		なし。

	参照: https://inside-research.com/6082/sass-%E3%83%AA%E3%82%BB%E3%83%83%E3%83%88%E8%A3%9C%E5%8A%A9%E9%96%A2%E6%95%B0
----------------------------------------------------------------------------------------------------------*/
@mixin more_reset()
{ 
	*, *:before, *:after
	{
	    // パディングとボーダーを幅と高さに含める
	    @include box-sizing( border-box );
	    // Box外のはみ出しを禁止
	    overflow: hidden;

	}
}

必須要素

情報
  • Compassを用いること。

注意事項

なし。

更新履歴

2017/03/12 … 浅野 利博
新規作成
2018/06/21 … 浅野 利博
Box外のはみ出しを禁止を追加

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.