Skip to main content

annotate ()

Enables a fixed annotation displaying the active breakpoints of the viewport.

Parameters​

$direction
The breakpoint categories to annotate.
Type
'horizontal' | 'vertical' | 'both'
Default
'both'
$position
The location in the viewport where the annotation will be positioned.
Type
'top right' | 'top left' | 'bottom right' | 'bottom left'
Default
'bottom right'
$color
The primary color of the annotation.
Type
Color
Default
#f3afe6
$size
The font size of the annotation.
Type
Number
Default
12px

Output​

Styles a single ::before pseudo-element to a fixed position, with content that describes the active horizontal and/or vertical breakpoints.

Example​

@use '@sass-fairy/break' with (
  $vertical-sizes: (
    x-small: 0,
    medium: 680px,
    large: 960px,
    x-large: 1200px
  )
);

body.annotate-example {
  @include break.annotate($position: 'bottom left', $size: 14px) {
    z-index: 300;
  }
}
info

This page enables the breakpoint annotation as defined in the example above.