Screen-Readers

Config


  // key(do not edit) : class(you can edit)
  $s-screen-readers: (
    'normal-class': 'sr-only',
    'focusable-class': 'sr-only-focusable',
  );
  

Placeholder Selectors

With this configuration, the classes sr-only and sr-only-focusable will be available. But if you want to add the style from a screen-reader class to an existing element, without using theses classes in html, you can use @extend.

Example :


  // use style from sr-only without code duplication
  .my-element {
    @extend %sr-only; // (or your classes name if you change default config)
  }