clearfix mixin

clearfix.scss

@charset "UTF-8";

/// `$use-before` は `$collapse-margin` が `false` の場合のみ意味を持つ。引数なし（初期値）だと micro clearfix が生成される。
/// @group util
/// @param {Bool} $collapse-margin (false) - マージンの相殺を許可するかどうか
/// @param {Bool} $use-before (true) - `:before` 擬似要素を出力するかどうか
/// @link http://nicolasgallagher.com/micro-clearfix-hack/ A new micro clearfix hack – Nicolas Gallagher
/// @link http://kojika17.com/2013/06/clearfix-2013.html floatを解除する手法のclearfix と 次世代のレイアウトの話｜Web Design KOJIKA17
@mixin clearfix($collapse-margin: false, $use-before: true) {

    $pseudo-display: table;

    @if $collapse-margin == true {
        $pseudo-display: block;
    }

    @if $collapse-margin == false and $use-before == true {

        &:before,
        &:after {
            display: $pseudo-display;
            content: "";
        }

        &:after {
            clear: both;
        }

    } @else {

        &:after {
            display: $pseudo-display;
            clear: both;
            content: "";
        }
    }
}