Skip to content

Instantly share code, notes, and snippets.

@anschaef

anschaef/bootstrap-4-sass-mixins-cheat-sheet.scss

Last active August 11, 2025 18:58
Show Gist options
  • Save anschaef/d7552885c0e1f127cf8830d3bbf6e4b1 to your computer and use it in GitHub Desktop.
Save anschaef/d7552885c0e1f127cf8830d3bbf6e4b1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. anschaef revised this gist Sep 2, 2021. 1 changed file with 7 additions and 0 deletions.
    7 changes: 7 additions & 0 deletions bootstrap-4-sass-mixins-cheat-sheet.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -5,6 +5,13 @@
    // @see https://github.com/twbs/bootstrap/tree/master/scss/mixins
    /* -------------------------------------------------------------------------- */

    /*
    // ########################################################################## */
    // New cheat sheet for Bootstrap 5:
    // https://gist.github.com/anschaef/09c5426ce1619b381b9c4297a6fc0914
    // ########################################################################## */
    */

    // Grid variables
    $grid-columns: 12;
    $grid-gutter-width: 30px;
  2. anschaef revised this gist Jun 8, 2020. 1 changed file with 9 additions and 9 deletions.
    18 changes: 9 additions & 9 deletions bootstrap-4-sass-mixins-cheat-sheet.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    /* -------------------------------------------------------------------------- */
    // All Bootstrap 4 Sass Mixins [Cheat sheet]
    // Updated to Bootstrap v4.4.x
    // Updated to Bootstrap v4.5.x
    // @author https://anschaef.de
    // @see https://github.com/twbs/bootstrap/tree/master/scss/mixins
    /* -------------------------------------------------------------------------- */
    @@ -58,7 +58,7 @@ xl: 1140px
    /* -------------------------------------------------------------------------- */

    // Grid system
    // @see https://getbootstrap.com/docs/4.4/layout/grid/#sass-mixins
    // @see https://getbootstrap.com/docs/4.5/layout/grid/#sass-mixins
    // Generate semantic grid columns with these mixins.
    @include make-container($gutter: $grid-gutter-width)
    // For each breakpoint, define the maximum width of the container in a media query
    @@ -126,7 +126,7 @@ xl: 1140px

    // Contextual backgrounds
    @include bg-variant($parent, $color, $ignore-warning: false)
    @include bg-gradient-variant($parent, $color)
    @include bg-gradient-variant($parent, $color, $ignore-warning: false)

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

    @@ -164,13 +164,13 @@ xl: 1140px
    /* -------------------------------------------------------------------------- */

    // Clearfix
    // @see https://getbootstrap.com/docs/4.4/utilities/clearfix/
    // @see https://getbootstrap.com/docs/4.5/utilities/clearfix/
    @include clearfix()

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

    // Float
    // @see https://getbootstrap.com/docs/4.4/utilities/float/
    // @see https://getbootstrap.com/docs/4.5/utilities/float/
    @include float-left()
    @include float-right()
    @include float-none()
    @@ -267,7 +267,7 @@ xl: 1140px
    /* -------------------------------------------------------------------------- */

    // Only display content to screen readers
    // @see https://getbootstrap.com/docs/4.4/utilities/screen-readers/
    // @see https://getbootstrap.com/docs/4.5/utilities/screen-readers/
    @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
    @@ -291,7 +291,7 @@ xl: 1140px
    /* -------------------------------------------------------------------------- */

    // CSS image replacement
    // @see https://getbootstrap.com/docs/4.4/utilities/image-replacement/
    // @see https://getbootstrap.com/docs/4.5/utilities/image-replacement/
    @include text-hide($ignore-warning: false)

    /* -------------------------------------------------------------------------- */
    @@ -308,7 +308,7 @@ xl: 1140px
    /* -------------------------------------------------------------------------- */

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

    /* -------------------------------------------------------------------------- */
    @@ -331,6 +331,6 @@ xl: 1140px
    /* -------------------------------------------------------------------------- */

    // New since v4.3: Responsive font-size mixin
    // @see https://getbootstrap.com/docs/4.4/content/typography/#responsive-font-sizes
    // @see https://getbootstrap.com/docs/4.5/content/typography/#responsive-font-sizes
    // Aliases: @include font-size($fs, $important: false), @include responsive-font-size($fs, $important: false)
    @include rfs($fs, $important: false)
  3. anschaef revised this gist Dec 14, 2019. 1 changed file with 29 additions and 11 deletions.
    40 changes: 29 additions & 11 deletions bootstrap-4-sass-mixins-cheat-sheet.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    /* -------------------------------------------------------------------------- */
    // All Bootstrap 4 Sass Mixins [Cheat sheet]
    // Updated to Bootstrap v4.3.x
    // Updated to Bootstrap v4.4.x
    // @author https://anschaef.de
    // @see https://github.com/twbs/bootstrap/tree/master/scss/mixins
    /* -------------------------------------------------------------------------- */
    @@ -58,7 +58,7 @@ xl: 1140px
    /* -------------------------------------------------------------------------- */

    // Grid system
    // @see https://getbootstrap.com/docs/4.3/layout/grid/#sass-mixins
    // @see https://getbootstrap.com/docs/4.4/layout/grid/#sass-mixins
    // Generate semantic grid columns with these mixins.
    @include make-container($gutter: $grid-gutter-width)
    // For each breakpoint, define the maximum width of the container in a media query
    @@ -67,8 +67,18 @@ xl: 1140px
    @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)
    // Add a `max-width` to ensure content within each column does not blow out
    // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
    // do not appear to require this.
    @include make-col($size, $columns: $grid-columns)
    // Reset earlier grid tiers
    @include make-col-auto()
    @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)

    // Example usage
    /*
    @@ -115,7 +125,7 @@ xl: 1140px
    /* -------------------------------------------------------------------------- */

    // Contextual backgrounds
    @include bg-variant($parent, $color)
    @include bg-variant($parent, $color, $ignore-warning: false)
    @include bg-gradient-variant($parent, $color)

    /* -------------------------------------------------------------------------- */
    @@ -154,13 +164,13 @@ xl: 1140px
    /* -------------------------------------------------------------------------- */

    // Clearfix
    // @see https://getbootstrap.com/docs/4.3/utilities/clearfix/
    // @see https://getbootstrap.com/docs/4.4/utilities/clearfix/
    @include clearfix()

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

    // Float
    // @see https://getbootstrap.com/docs/4.3/utilities/float/
    // @see https://getbootstrap.com/docs/4.4/utilities/float/
    @include float-left()
    @include float-right()
    @include float-none()
    @@ -170,7 +180,8 @@ xl: 1140px
    // 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-control-focus($ignore-warning: false)
    @include form-validation-state-selector($state)
    @include form-validation-state($state, $color, $icon)

    /* -------------------------------------------------------------------------- */
    @@ -229,7 +240,7 @@ xl: 1140px

    // Horizontal dividers
    // Dividers (basically an hr) within dropdowns and nav lists
    @include nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y)
    @include nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y, $ignore-warning: false)

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

    @@ -256,7 +267,7 @@ xl: 1140px
    /* -------------------------------------------------------------------------- */

    // Only display content to screen readers
    // @see https://getbootstrap.com/docs/4.3/utilities/screen-readers/
    // @see https://getbootstrap.com/docs/4.4/utilities/screen-readers/
    @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
    @@ -280,7 +291,7 @@ xl: 1140px
    /* -------------------------------------------------------------------------- */

    // CSS image replacement
    // @see https://getbootstrap.com/docs/4.3/utilities/image-replacement/
    // @see https://getbootstrap.com/docs/4.4/utilities/image-replacement/
    @include text-hide($ignore-warning: false)

    /* -------------------------------------------------------------------------- */
    @@ -297,7 +308,7 @@ xl: 1140px
    /* -------------------------------------------------------------------------- */

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

    /* -------------------------------------------------------------------------- */
    @@ -315,4 +326,11 @@ xl: 1140px
    // 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)
    @include deprecate($name, $deprecate-version, $remove-version, $ignore-warning: false)

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

    // New since v4.3: Responsive font-size mixin
    // @see https://getbootstrap.com/docs/4.4/content/typography/#responsive-font-sizes
    // Aliases: @include font-size($fs, $important: false), @include responsive-font-size($fs, $important: false)
    @include rfs($fs, $important: false)
  4. anschaef revised this gist Jul 22, 2019. 1 changed file with 36 additions and 20 deletions.
    56 changes: 36 additions & 20 deletions bootstrap-4-sass-mixins-cheat-sheet.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,25 +1,27 @@
    /* -------------------------------------------------------------------------- */
    // All Bootstrap 4 Sass Mixins [Cheat sheet]
    // Updated to Bootstrap v4.1.x
    // Updated to Bootstrap v4.3.x
    // @author https://anschaef.de
    // @see https://github.com/twbs/bootstrap/tree/v4-dev/scss/mixins
    // @see https://github.com/twbs/bootstrap/tree/master/scss/mixins
    /* -------------------------------------------------------------------------- */

    // Grid variables
    $grid-columns: 12 !default;
    $grid-gutter-width: 30px !default;
    $grid-columns: 12;
    $grid-gutter-width: 30px;

    $grid-breakpoints: (
    xs: 0,
    sm: 480px,
    sm: 576px,
    md: 768px,
    lg: 1024px
    lg: 992px,
    xl: 1200px
    );

    $container-max-widths: (
    sm: 420px,
    sm: 540px,
    md: 720px,
    lg: 960px
    lg: 960px,
    xl: 1140px
    );

    /* -------------------------------------------------------------------------- */
    @@ -44,7 +46,7 @@ lg: 960px
    // Example usage
    .some-class {
    @include media-breakpoint-up(sm) {
    // Larger than sm: 480px
    // Larger than sm: 576px
    display: inline;
    }
    @include media-breakpoint-down(md) {
    @@ -56,15 +58,15 @@ lg: 960px
    /* -------------------------------------------------------------------------- */

    // Grid system
    // @see https://getbootstrap.com/docs/4.0/layout/grid/#sass-mixins
    // @see https://getbootstrap.com/docs/4.3/layout/grid/#sass-mixins
    // Generate semantic grid columns with these mixins.
    @include make-container()
    @include make-container($gutter: $grid-gutter-width)
    // 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()
    @include make-row($gutter: $grid-gutter-width)
    // Make the element grid-ready (applying everything but the width)
    @include make-col-ready()
    @include make-col-ready($gutter: $grid-gutter-width)
    @include make-col($size, $columns: $grid-columns)
    @include make-col-offset($size, $columns: $grid-columns)

    @@ -114,6 +116,7 @@ lg: 960px

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

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

    @@ -123,11 +126,15 @@ lg: 960px
    /* -------------------------------------------------------------------------- */

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

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

    @@ -147,13 +154,13 @@ lg: 960px
    /* -------------------------------------------------------------------------- */

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

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

    // Float
    // @see https://getbootstrap.com/docs/4.0/utilities/float/
    // @see https://getbootstrap.com/docs/4.3/utilities/float/
    @include float-left()
    @include float-right()
    @include float-none()
    @@ -164,11 +171,12 @@ lg: 960px
    // 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)
    @include form-validation-state($state, $color, $icon)

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

    // Gradients
    @include gradient-bg($color)
    // 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%)
    @@ -248,7 +256,7 @@ lg: 960px
    /* -------------------------------------------------------------------------- */

    // Only display content to screen readers
    // @see https://getbootstrap.com/docs/4.0/utilities/screenreaders/
    // @see https://getbootstrap.com/docs/4.3/utilities/screen-readers/
    @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
    @@ -272,7 +280,7 @@ lg: 960px
    /* -------------------------------------------------------------------------- */

    // CSS image replacement
    // @see https://getbootstrap.com/docs/4.0/utilities/image-replacement/
    // @see https://getbootstrap.com/docs/4.3/utilities/image-replacement/
    @include text-hide($ignore-warning: false)

    /* -------------------------------------------------------------------------- */
    @@ -289,7 +297,7 @@ lg: 960px
    /* -------------------------------------------------------------------------- */

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

    /* -------------------------------------------------------------------------- */
    @@ -300,3 +308,11 @@ lg: 960px
    @include caret-right()
    @include caret-left()
    @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)
  5. anschaef revised this gist Jul 16, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion bootstrap-4-sass-mixins-cheat-sheet.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    /* -------------------------------------------------------------------------- */
    // All Bootstrap 4 Sass Mixins [Cheat sheet]
    // Updated to Bootstrap v4.1.x
    // @author http://anschaef.de
    // @author https://anschaef.de
    // @see https://github.com/twbs/bootstrap/tree/v4-dev/scss/mixins
    /* -------------------------------------------------------------------------- */

  6. anschaef revised this gist Jul 16, 2018. 1 changed file with 22 additions and 11 deletions.
    33 changes: 22 additions & 11 deletions bootstrap-4-sass-mixins-cheat-sheet.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,6 @@
    /* -------------------------------------------------------------------------- */
    // All Bootstrap 4 Sass Mixins [Cheat sheet]
    // Updated to Bootstrap v4.1.x
    // @author http://anschaef.de
    // @see https://github.com/twbs/bootstrap/tree/v4-dev/scss/mixins
    /* -------------------------------------------------------------------------- */
    @@ -65,6 +66,7 @@ lg: 960px
    // Make the element grid-ready (applying everything but the width)
    @include make-col-ready()
    @include make-col($size, $columns: $grid-columns)
    @include make-col-offset($size, $columns: $grid-columns)

    // Example usage
    /*
    @@ -137,8 +139,8 @@ lg: 960px
    // 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)
    @include button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%))
    @include button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color)
    // Button sizes
    @include button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius)

    @@ -169,15 +171,15 @@ lg: 960px
    // 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%)
    @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: #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)
    @include gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%)
    @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)

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

    @@ -219,7 +221,7 @@ lg: 960px

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

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

    @@ -271,7 +273,7 @@ lg: 960px

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

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

    @@ -289,3 +291,12 @@ lg: 960px
    // Visibility
    // @see https://getbootstrap.com/docs/4.0/utilities/visibility/
    @include invisible($visibility) // Options: collapse, hidden, visible

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

    // Carets
    @include caret-down()
    @include caret-up()
    @include caret-right()
    @include caret-left()
    @include caret($direction: down)
  7. anschaef revised this gist Sep 25, 2017. No changes.
  8. anschaef revised this gist Sep 25, 2017. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions bootstrap-4-sass-mixins-cheat-sheet.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,6 @@
    /* -------------------------------------------------------------------------- */
    // All Bootstrap 4 Sass Mixins [Cheat sheet]
    // @author http://anschaef.de
    // @see https://github.com/twbs/bootstrap/tree/v4-dev/scss/mixins
    /* -------------------------------------------------------------------------- */

  9. anschaef revised this gist Sep 25, 2017. 1 changed file with 6 additions and 6 deletions.
    12 changes: 6 additions & 6 deletions bootstrap-4-sass-mixins-cheat-sheet.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -40,13 +40,13 @@ lg: 960px
    @include media-breakpoint-only($name, $breakpoints: $grid-breakpoints)

    // Example usage
    @include media-breakpoint-up(sm) {
    .some-class {
    display: block;
    .some-class {
    @include media-breakpoint-up(sm) {
    // Larger than sm: 480px
    display: inline;
    }
    }
    @include media-breakpoint-up(xs) {
    .some-class {
    @include media-breakpoint-down(md) {
    // Smaller than md: 768px
    display: block;
    }
    }
  10. anschaef revised this gist Sep 25, 2017. 1 changed file with 102 additions and 33 deletions.
    135 changes: 102 additions & 33 deletions bootstrap-4-sass-mixins-cheat-sheet.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -3,6 +3,107 @@
    // @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
    @include media-breakpoint-up(sm) {
    .some-class {
    display: block;
    }
    }
    @include media-breakpoint-up(xs) {
    .some-class {
    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)

    @@ -18,9 +119,8 @@

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

    // Border-radius
    @include border-radius($radius: $border-radius)
    // 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)
    @@ -33,25 +133,6 @@

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

    // 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)

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

    // Button variants
    // Easily pump out default styles, as well as :hover, :focus, :active,
    // and disabled options for all buttons
    @@ -106,18 +187,6 @@

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

    /// 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)
    @include make-row()
    @include make-col-ready()
    @include make-col($size, $columns: $grid-columns)

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

    // Hover state
    @include hover()
    @include hover-focus()
  11. anschaef revised this gist Sep 23, 2017. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion bootstrap-4-sass-mixins-cheat-sheet.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -18,8 +18,9 @@

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

    // Single side border-radius
    // Border-radius
    @include border-radius($radius: $border-radius)
    // Single side border-radius
    @include border-top-radius($radius)
    @include border-right-radius($radius)
    @include border-bottom-radius($radius)
  12. anschaef revised this gist Sep 23, 2017. 1 changed file with 6 additions and 4 deletions.
    10 changes: 6 additions & 4 deletions bootstrap-4-sass-mixins-cheat-sheet.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -62,11 +62,13 @@
    /* -------------------------------------------------------------------------- */

    // 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()
    @@ -104,6 +106,7 @@
    /* -------------------------------------------------------------------------- */

    /// 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
    @@ -172,13 +175,10 @@
    /* -------------------------------------------------------------------------- */

    // Only display content to screen readers
    // See: http://a11yproject.com/posts/how-to-hide-content
    // See: http://hugogiraudel.com/2016/10/13/css-hide-and-seek/
    // @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
    // Credit: HTML5 Boilerplate
    @include sr-only-focusable()

    /* -------------------------------------------------------------------------- */
    @@ -199,6 +199,7 @@
    /* -------------------------------------------------------------------------- */

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

    /* -------------------------------------------------------------------------- */
    @@ -215,4 +216,5 @@
    /* -------------------------------------------------------------------------- */

    // Visibility
    // @see https://getbootstrap.com/docs/4.0/utilities/visibility/
    @include invisible($visibility) // Options: collapse, hidden, visible
  13. anschaef renamed this gist Sep 23, 2017. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.scss → bootstrap-4-sass-mixins-cheat-sheet.scss
    View file
    File renamed without changes.
  14. anschaef renamed this gist Sep 23, 2017. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → gistfile1.scss
    View file
    File renamed without changes.
  15. anschaef created this gist Sep 23, 2017.
    218 changes: 218 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,218 @@
    /* -------------------------------------------------------------------------- */
    // All Bootstrap 4 Sass Mixins [Cheat sheet]
    // @see https://github.com/twbs/bootstrap/tree/v4-dev/scss/mixins
    /* -------------------------------------------------------------------------- */

    // 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...)

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

    // 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)

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

    // 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
    @include clearfix()

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

    // 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)

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

    /// Grid system
    // 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)
    @include make-row()
    @include make-col-ready()
    @include make-col($size, $columns: $grid-columns)

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

    // 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: http://a11yproject.com/posts/how-to-hide-content
    // See: http://hugogiraudel.com/2016/10/13/css-hide-and-seek/
    @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
    // Credit: HTML5 Boilerplate
    @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
    @include text-hide()

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

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

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

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

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

    // Visibility
    @include invisible($visibility) // Options: collapse, hidden, visible