// Colors Black
@each $class, $color in ("black"          , $colorBlack),
                        ("black-light"    , $colorBlackLight),
                        ("black-lighten"  , $colorBlackLighten),
                        ("black-lightest" , $colorBlackLightest),
                        ("black-lightness", $colorBlackLightness) {
    .fc-#{$class} {
        color: $color;
    }
    .bg-#{$class} {
        background-color: $color;
    }
}
// Colors White
@each $class, $color in ("white"         , $colorWhite),
                        ("white-dark"    , $colorWhiteDark),
                        ("white-darken"  , $colorWhiteDarken),
                        ("white-darkest" , $colorWhiteDarkest),
                        ("white-darkness", $colorWhiteDarkness) {
    .fc-#{$class} {
        color: $color;
    }
    .bg-#{$class} {
        background-color: $color;
    }
}
// Colors Based
@each $class, $color in ("success", $colorSuccess),
                        ("danger", $colorDanger),
                        ("warning", $colorWarning),
                        ("info", $colorInfo),
                        ("first", $colorFirst),
                        ("second", $colorSecond),
                        ("third", $colorThird) {
    .fc-#{$class} {
        color: $color;
    }
    .bg-#{$class} {
        background-color: $color;
    }
}

// Header Size
@each $size, $var in ("xs", $hsXs), ("sm", $hsSm), ("md", $hsMd), ("lg", $hsLg), ("xl", $hsXl) {
    .hs-#{$size} {
        font-size: $var;
    }
}

// Paragraph Size
@each $size, $var in ("xs", $fsXs), ("sm", $fsSm), ("md", $fsMd), ("lg", $fsLg), ("xl", $fsXl) {
    .fs-#{$size} {
        font-size: $var;
    }
}

// Weight
$countW: $fontWeightMin;
@while $countW <= $fontWeightMax {
    .fw-#{$countW} {
        font-weight: $countW;
    };
    $countW: $countW + $fontWeightStep;
}
// Family
@each $class, $variable in ("first", $ffFirst), ("second", $ffSecond) {
    .ff-#{$class} {
        font-family: $variable;
    }
}