scss Bootstrap有用Sasss Mixins：https：//raw.githubusercontent.com/anjlab/bootstrap-rails/master/app/ass

Posted 2021-05-18

/*
Create columns / rows
CHECK THIS USEFUL ARTICLE:
https://www.psd2html.com/blog/customize-bootstrap-grid-with-sass.html
*/

.items-list {
    @include make-row();     
    .item 
        @include make-xs-column(12);
        @include make-sm-column(6);
        @include make-md-column(4);
        
        @include make-sm-column-offset(7);
    }
}


/*
Size mixins
*/

.example {
    @include size (16%, 300px); //width, height*
}
.example-square {
    @include square (300px);
}

/*
Clearfix
*/

.example {
    @include clearfix();
}

/*
Center-align a block level element (element requires width)
*/
.example {
	width: 940px;
    @include center-block();
}

/*
Text overflow
*/
.example {
    @include text-overflow(); // Requires inline-block or block for proper styling
}

/*
Text columns
*/
.example {
	@include content-columns(3, 5px); //$column-count, $column-gap
}

/*
Placeholder color
*/
.input1 {
	@include placeholder(#fff);
}

/* 
Panel variants 
*/

.panelrow {
    @include panel-variant(#d01919, #1cf21c, #000000, #bad017); //$border, $heading-text-color, $heading-bg-color, $heading-border-color
}

/* usage

<div class="panel panel-default panelrow">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
        Panel content
    </div>
</div>

*/

/*
Alert variants

alert-variant($background, $border, $text-color)
*/

/* 
Button variants 
*/

.custom-btn {
    @include button-variant(#cece19, #000000, #2dbe27); // $color, $background-color, $border-color:
}


/*
Form control sizing

input-size($selector, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius)

*/

/*
Form control focus state

form-control-focus($color: $input-border-focus)

*/


/*
Gradients

gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%)

gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg)

gradient-radial($inner-color: #555, $outer-color: #333)

gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg)

Look at the source for details on arguments…
*/

.example {
    @include gradient-horizontal(#1834cc, #1dc937, 0%, 100%); //$start-color, $end-color, $start-percent, $end-percent
}