Forked from anschaef/bootstrap-5-sass-mixins-cheat-sheet.scss
Created
October 25, 2021 20:27
-
-
Save figmentdragon/417156cf56cb5c7ae54aa7fe1004a2dd to your computer and use it in GitHub Desktop.
Revisions
-
anschaef revised this gist
Sep 2, 2021 . No changes.There are no files selected for viewing
-
Sep 2, 2021 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,378 @@ /* -------------------------------------------------------------------------- */ // All Bootstrap 5 Sass Mixins [ Cheat sheet ] // Updated to Bootstrap v5.1.x // @author https://anschaef.de // @see https://github.com/twbs/bootstrap/tree/main/scss/mixins // @see https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss /* -------------------------------------------------------------------------- */ // Options // @see https://getbootstrap.com/docs/5.1/customize/options/ $spacer: 1rem; $spacers: ( 0: 0, 1: $spacer * .25, 2: $spacer * .5, 3: $spacer, 4: $spacer * 1.5, 5: $spacer * 3, ); // Grid variables // Set the number of columns and specify the width of the gutters. // @see https://getbootstrap.com/docs/5.1/layout/grid/#variables $grid-columns: 12; $grid-gutter-width: 1.5rem; $grid-row-columns: 6; $gutters: $spacers; $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ); $container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1320px ); /* -------------------------------------------------------------------------- */ // Media queries // @see https://getbootstrap.com/docs/5.1/layout/breakpoints/#media-queries // Min-width // Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components. // No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { }` @include media-breakpoint-up($name, $breakpoints: $grid-breakpoints); // Examples @include media-breakpoint-up(sm) { } @include media-breakpoint-up(md) { } @include media-breakpoint-up(lg) { } @include media-breakpoint-up(xl) { } @include media-breakpoint-up(xxl) { } // Usage // Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint .custom-class { display: none; } @include media-breakpoint-up(sm) { .custom-class { display: block; } } // Max-width // We occasionally use media queries that go in the other direction (the given screen size or smaller);: // No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { }` @include media-breakpoint-down($name, $breakpoints: $grid-breakpoints); // Examples @include media-breakpoint-down(sm) { } @include media-breakpoint-down(md) { } @include media-breakpoint-down(lg) { } @include media-breakpoint-down(xl) { } @include media-breakpoint-down(xxl) { } // Example: Style from medium breakpoint and down @include media-breakpoint-down(md) { .custom-class { display: block; } } // Single breakpoint // There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths. @include media-breakpoint-only($name, $breakpoints: $grid-breakpoints); // Examples @include media-breakpoint-only(xs) { } @include media-breakpoint-only(sm) { } @include media-breakpoint-only(md) { } @include media-breakpoint-only(lg) { } @include media-breakpoint-only(xl) { } @include media-breakpoint-only(xxl) { } // Between breakpoints // Similarly, media queries may span multiple breakpoint widths: @include media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints); // Example @include media-breakpoint-between(md, xl) { } /* -------------------------------------------------------------------------- */ // Grid system // @see https://getbootstrap.com/docs/5.1/layout/grid/#sass-mixins // Creates a wrapper for a series of columns @include make-row($gutter: $grid-gutter-width); // Make the element grid-ready (applying everything but the width); @include make-col-ready($gutter: $grid-gutter-width); // Without optional size values, the mixin will create equal columns (similar to using .col); @include make-col($size: false, $columns: $grid-columns); @include make-col-auto(); // Offset with margins @include make-col-offset($size, $columns: $grid-columns); // Row columns // Specify on a parent element(e.g., .row) to force immediate children into NN // numberof columns. Supports wrapping to new lines, but does not do a Masonry // style grid. @include row-cols($count); // Container @include make-container($gutter: $container-padding-x); // 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> */ // Usage .example-container { @include make-container(); // Make sure to define this width after the mixin to override // `width: 100%` generated by `make-container()` width: 800px; } .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); } } /* -------------------------------------------------------------------------- */ // Utility generator // Used to generate utilities & print utilities // @see https://getbootstrap.com/docs/5.1/utilities/api/ @include generate-utility($utility, $infix, $is-rfs-media-query: false); /* -------------------------------------------------------------------------- */ // Alerts // @see https://getbootstrap.com/docs/5.1/components/alerts/#variant-mixin @include alert-variant($background, $border, $color); /* -------------------------------------------------------------------------- */ // Border-radius // @see https://getbootstrap.com/docs/5.1/utilities/borders/#mixins @include border-radius($radius: $border-radius, $fallback-border-radius: false); @include border-top-radius($radius: $border-radius); @include border-end-radius($radius: $border-radius); @include border-bottom-radius($radius: $border-radius); @include border-start-radius($radius: $border-radius); @include border-top-start-radius($radius: $border-radius); @include border-top-end-radius($radius: $border-radius); @include border-bottom-end-radius($radius: $border-radius); @include border-bottom-start-radius($radius: $border-radius); /* -------------------------------------------------------------------------- */ // Shadows // @see https://getbootstrap.com/docs/5.1/utilities/shadows/ @include box-shadow($shadow...); /* -------------------------------------------------------------------------- */ // Button variants // Easily pump out default styles, as well as :hover, :focus, :active, // and disabled options for all buttons // @see https://getbootstrap.com/docs/5.1/components/buttons/#mixins @include button-variant( $background, $border, $color: color-contrast($background), $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)), $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)), $hover-color: color-contrast($hover-background), $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)), $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)), $active-color: color-contrast($active-background), $disabled-background: $background, $disabled-border: $border, $disabled-color: color-contrast($disabled-background) ); @include button-outline-variant( $color, $color-hover: color-contrast($color), $active-background: $color, $active-border: $color, $active-color: color-contrast($active-background) ); // Button sizes @include button-size($padding-y, $padding-x, $font-size, $border-radius); /* -------------------------------------------------------------------------- */ // Form control focus state // @see https://getbootstrap.com/docs/5.1/forms/validation/#mixins // Generate a customized focus state and for any input with the specified color, // which defaults to the `@input-border-color-focus` variable. @include form-validation-state-selector($state); @include form-validation-state( $state, $color, $icon, $tooltip-color: color-contrast($color), $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity), $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity) ); /* -------------------------------------------------------------------------- */ // Gradients // @see https://getbootstrap.com/docs/5.1/utilities/background/#mixins @include gradient-bg($color: null); // 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: $gray-700, $end-color: $gray-800, $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: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null); @include gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg); @include gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red); @include gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red); @include gradient-radial($inner-color: $gray-700, $outer-color: $gray-800); @include gradient-striped($color: rgba($white, .15), $angle: 45deg); /* -------------------------------------------------------------------------- */ // Responsive image // Keep images from scaling beyond the width of their parents. // @see https://getbootstrap.com/docs/5.1/content/images/ @include img-fluid(); /* -------------------------------------------------------------------------- */ // List Groups // @see https://getbootstrap.com/docs/5.1/components/list-group/#mixins @include list-group-item-variant($state, $background, $color); /* -------------------------------------------------------------------------- */ // Lists // Unstyled keeps list items block level, just removes default browser padding and list-style // @see https://getbootstrap.com/docs/5.1/content/typography/#unstyled @include list-unstyled(); /* -------------------------------------------------------------------------- */ // Pagination // @see https://getbootstrap.com/docs/5.1/components/pagination/#mixins @include pagination-size($padding-y, $padding-x, $font-size, $border-radius); /* -------------------------------------------------------------------------- */ // Text reset @include reset-text(); /* -------------------------------------------------------------------------- */ // Resize anything @include resizable($direction); // Options: horizontal, vertical, both /* -------------------------------------------------------------------------- */ // Tables // @see https://getbootstrap.com/docs/5.1/content/tables/#how-do-the-variants-and-accented-tables-work @include table-variant($state, $background); /* -------------------------------------------------------------------------- */ // Text truncate // Requires inline-block or block for proper styling // @see https://getbootstrap.com/docs/5.1/helpers/text-truncation/ @include text-truncate(); /* -------------------------------------------------------------------------- */ // Transitions @include transition($transition...); /* -------------------------------------------------------------------------- */ // Visually hidden // @see https://getbootstrap.com/docs/5.1/helpers/visually-hidden/ @include visually-hidden(); @include visually-hidden-focusable(); /* -------------------------------------------------------------------------- */ // Carets // @see https://getbootstrap.com/docs/5.1/components/dropdowns/#mixins @include caret-down(); @include caret-up(); @include caret-end(); @include caret-start(); @include caret($direction: down); /* -------------------------------------------------------------------------- */ // Deprecate mixin // This mixin can be used to deprecate mixins or functions. // `$enable-deprecation-messages` is a global variable, `$ignore-warning` is a variable that can be passed to // some deprecated mixins to suppress the warning (for example if the mixin is still be used in the current version of Bootstrap); @include deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false); /* -------------------------------------------------------------------------- */ // New since v4.3: Responsive font-size mixin // Aliases: @include font-size($fs, $important: false), @include responsive-font-size($fs, $important: false); // @see https://getbootstrap.com/docs/5.1/content/typography/#responsive-font-sizes @include rfs($fs, $important: false); /* -------------------------------------------------------------------------- */ // Clearfix // @see https://getbootstrap.com/docs/5.1/helpers/clearfix/ @include clearfix(); /* -------------------------------------------------------------------------- */ // Shared between modals and offcanvases @include overlay-backdrop($zindex, $backdrop-bg, $backdrop-opacity); /* -------------------------------------------------------------------------- */ // Color schemes // A shorthand mixin for the prefers-color-scheme media query is available with support for light, dark, and custom color schemes. // @see https://getbootstrap.com/docs/5.1/customize/sass/#color-schemes @include color-scheme($name);