Удаление радиуса границы из хлебных крошек Bootstrap 4 — Sass
В Bootstrap 4 есть переменная Sass под названием $enable-rounded, которая
"Enables predefined
border-radiusstyles on various components."
(https://getbootstrap.com/docs/4.1/getting-started/theming/#sass-options)
У меня есть требование удалить закругленные углы на Компонент хлебной крошки, но я не хочу удалять их с каких-либо других компонентов. Поэтому я не могу использовать $enable-rounded, чтобы делать то, что мне нужно.
Однако я не знаю, какой оптимальный способ сделать это.
Sass для _breadcrumb.scss содержит это:
.breadcrumb {
display: flex;
flex-wrap: wrap;
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
margin-bottom: $breadcrumb-margin-bottom;
list-style: none;
background-color: $breadcrumb-bg;
@include border-radius($border-radius);
}
Как переопределить @include border-radius($border-radius); без изменения _breadcrumb.scss?
Весь CSS для моего приложения сжат в 1 файл (app.css), который создан из файла Sass (app.scss), который сначала включает соответствующие файлы Bootstrap 4 Sass. Итак, я мог бы сделать что-то вроде этого:
// app.scss
@import breadcrumb;
@import // other_bootstrap_sass_files
// CSS specific to my app
.breadcrumb {
border-radius: 0;
}
Это кажется слишком похожим на Bootstrap 3, где вам приходилось переопределять то, что вам не нужно.
Есть ли более разумный способ сделать это с помощью Sass для Bootstrap 4?
Ответы 2
Я думаю, что для вашего конкретного случая, когда вам нужны только панировочные сухари без радиуса границы, а все остальные компоненты все еще имеют его, ваше единственное решение - это то, что вы упомянули в своем вопросе:
.breadcrumb { border-radius: 0; }This seems a bit too similar to Bootstrap 3 where you had to override what you didn't want.
Лично я другого решения не вижу, только потому что не хочется редактировать оригинал _breadcrumb.scss
Если вы посмотрите на файл _variables.scss, вы увидите все переменные, установленные с помощью !default — думайте об этом как о файле настроек. Когда SCSS компилируется, ваши новые значения заменяются значениями по умолчанию без необходимости перезаписывать CSS.
Похоже, $breadcrumb-border-radius: $border-radius !default; это то, что вы хотите.
Два способа сброса этого значения:
1) Сделать копию файла _variables.scss и поместите его в каталог вашего проекта (мне нравится изменить имя, скажем, на _myvariables.scss ), найдите эту переменную, удалите !default и измените ее на $breadcrumb-border-radius: 0;ИЛИ
2) Создайте файл, скажем, _myvariables.scss, который содержит $breadcrumb-border-radius: 0; (и любые другие значения по умолчанию, которые вы хотите изменить позже).
Затем импортируйте этот новый файл ДО в ваш bootstrap scss. В вашем примере это будет ваш файл app.scss:
// app.scss
@import myvariables.scss; //no underscore because it's a partial
@import // other_bootstrap_sass_files including the breadcrumb component
Теперь, когда SCSS скомпилирован, радиус хлебных крошек будет установлен на 0 без каких-либо изменений или перезаписи css.
Спасибо. Я не хочу редактировать
_breadcrumb.scss, потому что, если я обновлю Bootstrap, мои изменения будут перезаписаны. Вот собственно к чему вопрос.