Использование миксина breakpoint

Breakpoints (mixin)

Медиа-запросы для основных размеров экрана. В миксинах, в качестве аргумента — приведенные ниже значения, либо количество пикселей.

Breakpoint	Value (px/rem)	Argument
Extra-Small	320 / 20	xs
Small	672 / 42	sm
Medium	1056 / 66	md
Large	1312 / 82	lg
Extra-Large	1584 / 99	xl

cds-breakpoint(breakpoint or px)

Миксин, генерирующий медиа-запрос min-width. Указывается минимальная ширина экрана.

@import '@cds/componenents/mixins/scss/layout/breakpoint';
 
@include cds-breakpoint('xs') {
   .elem {
     color: red;
   }
 }
 
 // Результат:
 @media (min-width: 20rem) {
   .elem {
     color: red;
   }
 }

cds-breakpoint-up(breakpoint or px)

Миксин, генерирующий медиа-запрос min-width. Указывается минимальная ширина экрана.

@import '@cds/componenents/mixins/scss/layout/breakpoint';

@include cds-breakpoint-up(672px) {
  .elem {
    color: red;
  }
}

// Результат:
@media (min-width: 672px) {
  .elem {
    color: red;
  }
}

cds-breakpoint-down(breakpoint or px)

Миксин, генерирующий медиа-запрос max-width. Указывается максимальная ширина экрана.

@import '@cds/componenents/mixins/scss/layout/breakpoint';

@include cds-breakpoint-up('md') {
  .elem {
    color: red;
  }
}

// Результат:
@media (max-width: 66rem) {
  .elem {
    color: red;
  }
}

cds-breakpoint-between(breakpoint form, breakpoint to or px)

Миксин, генерирующий медиа-запрос диапазон ширины, между минимальной и максимальной шириной, указанной в аргументе.

@import '@cds/componenents/mixins/scss/layout/breakpoint';

@include cds-breakpoint-between('xs', 1024px) {
  .elem {
    color: red;
  }
}

// Результат:
@media (min-width: 20rem) and (max-width: 1024px) {
  .elem {
    color: red;
  }
}