learncss
12/10/2018 - 12:05 AM
Bootstrap 4 Sass Mixins [Cheat sheet with examples] #BS4
Bootstrap 4 Sass Mixins [Cheat sheet with examples] #BS4
/* -------------------------------------------------------------------------- */
// All Bootstrap 4 Sass Mixins [Cheat sheet]
// @author http://anschaef.de
// @see https://github.com/twbs/bootstrap/tree/v4-dev/scss/mixins
/* -------------------------------------------------------------------------- */
// Grid variables
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
/* -------------------------------------------------------------------------- */
// Breakpoint viewport sizes and media queries.
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
@include media-breakpoint-up($name, $breakpoints: $grid-breakpoints)
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
// Makes the @content apply to the given breakpoint and narrower.
@include media-breakpoint-down($name, $breakpoints: $grid-breakpoints)
// Media that spans multiple breakpoint widths.
// Makes the @content apply between the min and max breakpoints
@include media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints)
// Media between the breakpoint's minimum and maximum widths.
// No minimum for the smallest breakpoint, and no maximum for the largest one.
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
@include media-breakpoint-only($name, $breakpoints: $grid-breakpoints)
// Example usage
.some-class {
@include media-breakpoint-up(sm) {
// Larger than sm: 480px
display: inline;
}
@include media-breakpoint-down(md) {
// Smaller than md: 768px
display: block;
}
}
/* -------------------------------------------------------------------------- */
// Grid system
// @see https://getbootstrap.com/docs/4.0/layout/grid/#sass-mixins
// Generate semantic grid columns with these mixins.
@include make-container()
// For each breakpoint, define the maximum width of the container in a media query
@include make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints)
// Creates a wrapper for a series of columns
@include make-row()
// Make the element grid-ready (applying everything but the width)
@include make-col-ready()
@include make-col($size, $columns: $grid-columns)
// Example usage
/*
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
*/
.example-container {
width: 800px;
@include make-container();
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
/* -------------------------------------------------------------------------- */
// 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