[Proposal] CSS variables Phase 1
Created by: yordis
Goal
Replace static SASS variables to the identical representation using CSS variables.
Upside
- Easy to test
- Easy to code review
Downside
- More iterations
- Require more collaboration
What to avoid
- Modify more than one file at the time
- Update any code related to the usage of mixin
- Modify any code related to SASS specific functions
How to?
- Communication your intention about working in a particular file
- Duplicate in
_variables.scss
the SASS variable with the equivalent CSS variable in thescss/_root.scss
file. Use--b-
prefix for the variables names (subject to change the naming in the future). - Create a PR scoped to only one file, please tag this issue in the PR
- Repeat.
Tracking
scss
-
_alert.scss -
_badge.scss -
_breadcrumb.scss -
_button-group.scss -
_buttons.scss -
_card.scss -
_carousel.scss -
_close.scss -
_containers.scss -
_dropdown.scss -
_forms.scss -
_functions.scss -
_grid.scss -
_helpers.scss -
_images.scss -
_list-group.scss -
_mixins.scss -
_modal.scss -
_nav.scss -
_navbar.scss -
_pagination.scss -
_popover.scss -
_progress.scss -
_reboot.scss -
_root.scss -
_spinners.scss -
_tables.scss -
_toasts.scss -
_tooltip.scss -
_transitions.scss -
_type.scss #30495 -
_utilities.scss -
_variables.scss -
bootstrap-grid.scss -
bootstrap-reboot.scss -
bootstrap-utilities.scss -
bootstrap.scss
scss/forms
-
_form-check.scss -
_form-control.scss -
_form-file.scss -
_form-range.scss -
_form-select.scss -
_input-group.scss -
_labels.scss -
_validation.scss
scss/helpers
-
_background.scss -
_clearfix.scss -
_colored-links.scss -
_embed.scss -
_position.scss -
_screenreaders.scss -
_stretched-link.scss -
_text-truncation.scss
scss/mixins
-
_alert.scss -
_background-variant.scss -
_border-radius.scss -
_box-shadow.scss -
_breakpoints.scss -
_buttons.scss -
_caret.scss -
_clearfix.scss -
_container.scss -
_deprecate.scss -
_forms.scss -
_gradients.scss -
_grid.scss -
_image.scss -
_list-group.scss -
_lists.scss -
_pagination.scss -
_reset-text.scss -
_resize.scss -
_screen-reader.scss -
_table-row.scss -
_text-truncate.scss -
_transition.scss -
_utilities.scss
scss/utilities
-
_api.scss
scss/vendor
-
_rfs.scss