Sass based Feature Toggle Styles implementation.

README.md

Sass based Mixin that can be used to easily disable or hide features within your markup.

Basic usage:

<ul class="dropdown-menu" role="menu">
    <li role="menuitem" class="feature-toggle-disabled">
        <a class="dropdown-item">Coming Soon Feature</a>
    </li>
    <li role="menuitem" class="feature-toggle-hidden">
        <a class="dropdown-item">Feature Will Not Be Implemented Soon</a>
    </li>
    <li role="menuitem">
        <a class="dropdown-item">Really Great Feature</a>
    </li>
</ul>

In the above example, we have disabled one Menu Item, hidden another, while displaying one that is ready to go.

This feature toggle functionality is good for MVP solutions where you want to let the user know there is more to come soon, possibly setting expectations, while also providing placeholders for features not yet planned for immediate implementation.

Is this a perfect solution? No, but it is one that can grow to meet needs.

feature-toggle.scss

@import "~assets/stylesheets/bootstrap.scss";

$feature-hidden: 0;
$feature-disabled: 1;

$features: (
    hidden: $feature-hidden,
    disabled: $feature-disabled
);

@mixin feature-toggle($state) {
    @if $state == $feature-disabled {
        cursor: not-allowed !important;
        color:  $gray-light !important;
    } @else {
        @if $state == $feature-hidden {
            display: none !important;
        }
    }
}

@each $featureName, $feature in $features {
    .feature-toggle-#{$featureName},
    .feature-toggle-#{$featureName} > * {
        @include feature-toggle($feature);
    }
}