Перейти к основному содержанию

Утилиты API

Служебный API - это инструмент на основе Sass для создания служебных классов.

Содержание

Утилиты начальной загрузки создаются с помощью служебного API, который можно использовать для изменения или расширения служебных классов Bootstrap. Если вы не знаете, что такое карты Sass, вы можете обратиться к официальной документации, чтобы начать работу.

$utilitiesКарта содержит все утилиты и позже слилась с пользовательской $utilities картой , если она присутствует. Карта утилит содержит ключевой список групп утилит, которые принимают следующие параметры:

Добавление утилит в служебный API

Все служебные переменные добавляются к $utilities переменной. Пользовательские группы утилит могут быть добавлены следующим образом:

$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      100: 1,
    )
  )
 );

Выход:

.opacity-0 { 
  opacity: 0;
}
.opacity-25 { 
  opacity: .25;
}
.opacity-75 { 
  opacity: .75;
}
.opacity-100 { 
  opacity: 1;
}

Изменение префикса класса

С помощью class опции можно изменить префикс класса:

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      100: 1,
    )
  )
 );

Выход:

.o-0 { 
  opacity: 0;
}
.o-25 { 
  opacity: .25;
}
.o-75 { 
  opacity: .75;
}
.o-100 { 
  opacity: 1;
}

Адаптивные утилиты

С помощью этой responsive опции могут быть созданы адаптивные служебные классы:

$utilities: (
  "opacity": (
    property: opacity,
    responsive: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      100: 1,
    )
  )
 );

Выход:

.opacity-0 { 
  opacity: 0;
}
.opacity-25 { 
  opacity: .25;
}
.opacity-75 { 
  opacity: .75;
}
.opacity-100 { 
  opacity: 1;
}
@media (min-width: 576px) { 
  .opacity-sm-0 { 
    opacity: 0;
  }
  .opacity-sm-25 { 
    opacity: .25;
  }
  .opacity-sm-75 { 
    opacity: .75;
  }
  .opacity-sm-100 { 
    opacity: 1;
  }
}
@media (min-width: 768px) { 
  .opacity-md-0 { 
    opacity: 0;
  }
  .opacity-md-25 { 
    opacity: .25;
  }
  .opacity-md-75 { 
    opacity: .75;
  }
  .opacity-md-100 { 
    opacity: 1;
  }
}
@media (min-width: 992px) { 
  .opacity-lg-0 { 
    opacity: 0;
  }
  .opacity-lg-25 { 
    opacity: .25;
  }
  .opacity-lg-75 { 
    opacity: .75;
  }
  .opacity-lg-100 { 
    opacity: 1;
  }
}
@media (min-width: 1200px) { 
  .opacity-xl-0 { 
    opacity: 0;
  }
  .opacity-xl-25 { 
    opacity: .25;
  }
  .opacity-xl-75 { 
    opacity: .75;
  }
  .opacity-xl-100 { 
    opacity: 1;
  }
}

Changing утилиты

Отмена акцизных коммунальных услуг возможна с помощью того же ключа. Например, если вам нужны более отзывчивые служебные классы переполнения, вы можете сделать это:

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

Включение этого print параметра также приведет к созданию служебных классов для печати.

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    print: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      100: 1,
    )
  )
 );

Выход:

.o-0 { 
  opacity: 0;
}
.o-25 { 
  opacity: .25;
}
.o-75 { 
  opacity: .75;
}
.o-100 { 
  opacity: 1;
}

@media print { 
  .o-print-0 { 
    opacity: 0;
  }
  .o-print-25 { 
    opacity: .25;
  }
  .o-print-75 { 
    opacity: .75;
  }
  .o-print-100 { 
    opacity: 1;
  }
}

Удаление утилит

Утилиты также можно удалить, изменив групповой ключ на null:

$utilities: (
  "float": null,
);
Комментарии для сайта Cackle