scss Bootstrap 4 Mixins实用程序

Posted 2021-05-17

/* -------------------------------------------------------------------------- */

// Alerts
@include alert-variant($background, $border, $color);

/* -------------------------------------------------------------------------- */

// Contextual backgrounds
@include bg-variant($parent, $color);

/* -------------------------------------------------------------------------- */

// Badges
@include badge-variant($bg);

/* -------------------------------------------------------------------------- */

// Single side border-radius
@include border-radius($radius: $border-radius);
@include border-top-radius($radius);
@include border-right-radius($radius);
@include border-bottom-radius($radius);
@include border-left-radius($radius);

/* -------------------------------------------------------------------------- */

// Shadows
@include box-shadow($shadow...);

/* -------------------------------------------------------------------------- */

// Button variants
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
@include button-variant($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%));
@include button-outline-variant($color, $color-hover: #fff);
// Button sizes
@include button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius);

/* -------------------------------------------------------------------------- */

// Clearfix
// @see https://getbootstrap.com/docs/4.0/utilities/clearfix/
@include clearfix();

/* -------------------------------------------------------------------------- */

// Float
// @see https://getbootstrap.com/docs/4.0/utilities/float/
@include float-left();
@include float-right();
@include float-none();

/* -------------------------------------------------------------------------- */

// Form control focus state
// Generate a customized focus state and for any input with the specified color,
// which defaults to the `@input-border-color-focus` variable.
@include form-control-focus();
@include form-validation-state($state, $color);

/* -------------------------------------------------------------------------- */

// Gradients
// Horizontal gradient, from left to right
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@include gradient-x($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%);
// Vertical gradient, from top to bottom
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@include gradient-y($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%);
@include gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg);
@include gradient-x-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f);
@include gradient-y-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f);
@include gradient-radial($inner-color: #555, $outer-color: #333);
@include gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg);

/* -------------------------------------------------------------------------- */

// Framework grid generation
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `$grid-columns`.
@include make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints);

/* -------------------------------------------------------------------------- */

// Hover state
@include hover();
@include hover-focus();
@include plain-hover-focus();
@include hover-focus-active();

/* -------------------------------------------------------------------------- */

// Responsive image
// Keep images from scaling beyond the width of their parents.
@include img-fluid();

// Retina image
// Short retina mixin for setting background-image and -size.
@include img-retina($file-1x, $file-2x, $width-1x, $height-1x);

/* -------------------------------------------------------------------------- */

// List Groups
@include list-group-item-variant($state, $background, $color);

/* -------------------------------------------------------------------------- */

// Lists
// Unstyled keeps list items block level, just removes default browser padding and list-style
@include list-unstyled();

/* -------------------------------------------------------------------------- */

// Horizontal dividers
// Dividers (basically an hr) within dropdowns and nav lists
@include nav-divider($color: #e5e5e5);

/* -------------------------------------------------------------------------- */

// Navbar vertical align
// Vertically center elements in the navbar.
// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
// @include navbar-vertical-align($element-height)

/* -------------------------------------------------------------------------- */

// Pagination
@include pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius);

/* -------------------------------------------------------------------------- */

// Text reset
@include reset-text();

/* -------------------------------------------------------------------------- */

// Resize anything
@include resizable($direction); // Options: horizontal, vertical, both

/* -------------------------------------------------------------------------- */

// Only display content to screen readers
// @see https://getbootstrap.com/docs/4.0/utilities/screenreaders/
@include sr-only();
// Use in conjunction with .sr-only to only display content when it's focused.
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
@include sr-only-focusable();

/* -------------------------------------------------------------------------- */

// Sizing shortcuts
@include size($width, $height: $width);

/* -------------------------------------------------------------------------- */

// Tables
@include table-row-variant($state, $background);

/* -------------------------------------------------------------------------- */

// Typography
@include text-emphasis-variant($parent, $color);

/* -------------------------------------------------------------------------- */

// CSS image replacement
// @see https://getbootstrap.com/docs/4.0/utilities/image-replacement/
@include text-hide();

/* -------------------------------------------------------------------------- */

// Text truncate
// Requires inline-block or block for proper styling
@include text-truncate();

/* -------------------------------------------------------------------------- */

// Transitions
@include transition($transition...);

/* -------------------------------------------------------------------------- */

// Visibility
// @see https://getbootstrap.com/docs/4.0/utilities/visibility/
@include invisible($visibility); // Options: collapse, hidden, visible