Screen-Readers

Configuration

config.css

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

_partial.scss

@use "sailorcss" as s;

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

Utility classes output

output.scss

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