sebastiano-guerriero

@media only screen and (max-width: map-get($map: $breakpoints, $key: xs) - 0.05rem) {
  .display--xs, .display--sm, .display--md, .display--lg, .display--xl {
    display: none !important;
  }
}

@media only screen and (max-width: map-get($map: $breakpoints, $key: sm) - 0.05rem) {
  .display--sm, .display--md, .display--lg, .display--xl {
    display: none !important;
  }

sebastiano-guerriero

.is-visible {
  display: var(--display) !important;
}

.component {
  display: none;
  --display: flex;
}

sebastiano-guerriero

@mixin display($display-value) {
  --display: #{$display-value};
  display: var(--display);
}

.component div {
  @include display(inline-block);
}

sebastiano-guerriero

:root {
  --display: block;
}

[class^="display--"] {
  display: none !important;
}

@include breakpoint(xs) {
  .display--xs {

sebastiano-guerriero

[class^="display--"] {
  display: none !important;
}

sebastiano-guerriero

:root {
  --display: block;
}

// component code - not included in the _visibility.scss file
.component div {
  --display: inline-block;
  display: var(--display);
}

sebastiano-guerriero

@include breakpoint(xs) {
  .display--xs {
    display: block !important;
  }

  .hide--xs {
    display: none !important;
  }
}

sebastiano-guerriero

<div class="component">
  <div>One</div>
  <div class="display--md">Two</div>
  <div class="display--md">Three</div>
  <div class="display--lg">Four</div>
  <div>Five</div>
</div>

sebastiano-guerriero

<div>
  <div>One</div>
  <div class="hide block--md">Two</div>
  <div class="hide inline-block--md">Three</div>
  <div class="hide flex--lg">Four</div>
  <div>Five</div>
</div>

sebastiano-guerriero

.block {
  display: block !important;
}

.inline-block {
  display: inline-block !important;
}

.inline {
  display: inline !important;