Negative

ネガティブマージンを付与するユーティリティ CSS。

Table of Contents

• Basic
• Compatible
• Variables
• Import

Basic

• .is-margin-{way}-minus-{size} で各方向にマイナスの margin を付与します
• .is-margin-minus-{size} は全方向（※.is-n-{size} に短縮可能）
• .is-margin-top-minus-{size} は上方向（※.is-nt-{size} に短縮可能）
• .is-margin-right-minus-{size} は右方向（※.is-nr-{size} に短縮可能）
• .is-margin-bottom-minus-{size} は下方向（※.is-nb-{size} に短縮可能）
• .is-margin-left-minus-{size} は左方向（※.is-nl-{size} に短縮可能）
• .is-margin-vertical-minus-{size} は上下方向（※.is-ny-{size} に短縮可能）
• .is-margin-horizontal-minus-{size} は上下方向（※.is-nx-{size} に短縮可能）
• {size} は最大 xxl から最小 xxs まで

<div>ネガティブマージンテスト</div>
<div class="box is-nt-md">ネガティブマージンテスト</div>
<div>ネガティブマージンテスト</div>

Compatible

推奨のクラス名と同様の効果を互換のあるクラス名で得ることもできます。

Variables

上書きできる変数は以下の通りです。

/* None */

Import

PostCSS で読み込む場合の各パスは以下となります。

@import "musubii/src/utilities/negative/main.css";