解説
ボックスサイズの算出方法を「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外のはみ出しを禁止を追加