Add breakpoints in a pseudo-element on element with "data-breakpoint"

[antoine4livre]

Already used on other project, it gives the possibility to get the current breakpoint in JS scripts.

[data-breakpoint] {
  &::before {
    z-index: l('limbo');
    position: absolute;
    pointer-events: none;
    opacity: 0;
  }

  @each $breakpoint in $breakpoints {
    $key: nth($breakpoint, 1);

    @media #{md($key)} {
      &::before {
        content: '#{$key}';
      }
    }
  }
}

[antoine4livre]

Other way with the listing of all breakpoints:

[data-breakpoint] {
  &::before {
    z-index: l('limbo');
    position: absolute;
    pointer-events: none;
    opacity: 0;
  }

  @each $breakpoint in $breakpoints {
    $key: nth($breakpoint, 1);

    @media #{md($key)} {
      &::before {
        content: '{"list": ['+map-keys($breakpoints)+'], "current": "#{$key}"}';
      }
    }
  }
}

To get it with:

  function getBreakpoint() {
    var bp = window
      .getComputedStyle(document.querySelector('[data-breakpoint]'), '::before')
      .getPropertyValue('content')
      .replace(/\\/g, '');
    return JSON.parse(bp.substr(1, bp.length - 2));
  }

And this can be use for export any SCSS data in the DOM for getting them with JS. (For colors by example ?)

[perruche]

I prefer the first code exemple, second one seems overly complicated.

The scss rule should probably be wrapped in a @if statement to enable/disable the feature depending on projects needs.

[titouanmathis]

I like the second one very much, but I think that the first one is enough. I don't really see a use case where we would need the entire list of breakpoints at once.

As @perruche pointed out, we must be able to toggle this feature with a configuration variable.

I will open a PR about this soon ;)

[antoine4livre]

Great ! Thank you @titouanmathis !