Screen-Readers

Configuration

   // 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 the placeholder.

@use "sailorcss" as s;

.element {
   @include s.sr-only;
}

Utility classes output

.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   padding: 0;
   border: 0;
   white-space: nowrap;
   clip: rect(0, 0, 0, 0);
}