Skip to content

Instantly share code, notes, and snippets.

@anthonyholmes
Created October 10, 2014 08:13
Star You must be signed in to star a gist
Save anthonyholmes/b397e8a95ce2aca71f8e to your computer and use it in GitHub Desktop.
Bootstrap Sass Mixin Cheatsheet
// Alerts
@include alert-variant($background, $border, $text-color);
// Background Variant
@include bg-variant($parent, $color);
// Border Radius
@include border-top-radius($radius);
@include border-right-radius($radius);
@include border-bottom-radius($radius);
@include border-left-radius($radius);
// Buttons
@include button-variant($color, $background, $border);
@include button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius);
// Center Block
@include center-block();
// Clearfix
@include clearfix();
// Forms
@include form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5);
@include form-control-focus($color: $input-border-focus);
@include input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius);
// Gradients
@include gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%);
@include gradient-vertical($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-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f);
@include gradient-vertical-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);
// Grid Framework
@include make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}");
@include float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}");
@include calc-grid-column($index, $class, $type);
@include loop-grid-columns($columns, $class, $type);
@include make-grid($class);
// Grid
@include container-fixed($gutter: $grid-gutter-width);
@include make-row($gutter: $grid-gutter-width);
@include make-xs-column($columns, $gutter: $grid-gutter-width);
@include make-xs-column-offset($columns);
@include make-xs-column-push($columns);
@include make-xs-column-pull($columns);
@include make-sm-column($columns, $gutter: $grid-gutter-width);
@include make-sm-column-offset($columns);
@include make-sm-column-push($columns);
@include make-sm-column-pull($columns);
@include make-md-column($columns, $gutter: $grid-gutter-width);
@include make-md-column-offset($columns);
@include make-md-column-push($columns);
@include make-md-column-pull($columns);
@include make-lg-column($columns, $gutter: $grid-gutter-width);
@include make-lg-column-offset($columns);
@include make-lg-column-push($columns);
@include make-lg-column-pull($columns);
// Hide Text
@include text-hide();
// Image
@include img-responsive($display: block);
@include img-retina($file-1x, $file-2x, $width-1x, $height-1x);
// Labels
@include label-variant($color);
// List Group
@include list-group-item-variant($state, $background, $color);
// Nav Divider
@include nav-divider($color: #e5e5e5);
// Nav Vertical Align
@include navbar-vertical-align($element-height);
// Opacity
@include opacity($opacity);
// Pagination
@include pagination-size($padding-vertical, $padding-horizontal, $font-size, $border-radius);
// Panels
@include panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border);
// Progress Bar
@include progress-bar-variant($color);
// Reset Filter
@include reset-filter();
// Resize
@include resizable($direction);
// Responsive Visibility
@include responsive-visibility($parent);
@include responsive-invisibility($parent);
// Size
@include size($width, $height);
@include square($size);
// Tab Focus
@include tab-focus();
// Table Row
@include table-row-variant($state, $background);
// Text Emphasis
@include text-emphasis-variant($parent, $color);
// Text Overflow
@include text-overflow();
// Vendor Prefixes
@include animation($animation);
@include animation-name($name);
@include animation-duration($duration);
@include animation-timing-function($timing-function);
@include animation-delay($delay);
@include animation-iteration-count($iteration-count);
@include animation-direction($direction);
@include animation-fill-mode($fill-mode);
@include backface-visibility($visibility);
@include box-shadow($shadow...);
@include box-sizing($boxmodel);
@include content-columns($column-count, $column-gap: $grid-gutter-width);
@include hyphens($mode: auto);
@include placeholder($color: $input-color-placeholder);
@include scale($ratio...);
@include scaleX($ratio);
@include scaleY($ratio);
@include skew($x, $y);
@include translate($x, $y);
@include translate3d($x, $y, $z);
@include rotate($degrees);
@include rotateX($degrees);
@include rotateY($degrees);
@include perspective($perspective);
@include perspective-origin($perspective);
@include transform-origin($origin);
@include transition($transition...);
@include transition-property($transition-property...);
@include transition-delay($transition-delay);
@include transition-duration($transition-duration...);
@include transition-timing-function($timing-function);
@include transition-transform($transition...);
@include user-select($select);
@GrajewskiPawel
Copy link

Nice job !

@Giamal
Copy link

Giamal commented Feb 16, 2018

Thanks

@hugolcouto
Copy link

Awesome!

@martindubenet
Copy link

martindubenet commented Jun 28, 2018

Thanks. This is my daily reading since I started on Bootstrap 4.
Feel free to add my (public) logo montage to your project. So when sharing this will get displayed as thumbnail.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment