1.0.1 • Published 7 years ago
scss-common-mixins v1.0.1
scss-common-mixins
Scss mixins often used.
Content Table
Install
npm install --save scss-common-mixins
Import
@import 'node_modules/scss-common-mixins/index.scss';
Examples
background-gradient
Usage:
@include background-gradient($begin, $end, $angle: 180deg);
Input:
.background-gradient-default {
@include background-gradient(#fff, #000);
}
.background-gradient-custom-angle {
@include background-gradient(#fff, #000, 60deg);
}
Output:
.background-gradient-default {
background-color: #808080;
background-image: linear-gradient(180deg, #fff, #000);
}
.background-gradient-custom-angle {
background-color: #808080;
background-image: linear-gradient(60deg, #fff, #000);
}
background-gradient-x
Usage:
@include background-gradient-x($begin, $end);
Input:
.background-gradient-x {
@include background-gradient-x(#fff, #000);
}
Output:
.background-gradient-x {
background-color: #808080;
background-image: linear-gradient(90deg, #fff, #000);
}
background-gradient-y
Usage:
@include background-gradient-y($begin, $end);
Input:
.background-gradient-y {
@include background-gradient-y(#fff, #000);
}
Output:
.background-gradient-y {
background-color: #808080;
background-image: linear-gradient(180deg, #fff, #000);
}
background-cover
Usage:
@include background-cover($image);
Input:
.background-cover {
@include background-cover('url(image)');
}
Output:
.background-cover {
background-image: 'url(image)';
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
background-contain
Usage:
@include background-contain($image);
Input:
.background-contain {
@include background-contain('url(image)');
}
Output:
.background-contain {
background-image: 'url(image)';
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
border-top-radius
Usage:
@include border-top-radius($radius);
Input:
.border-top-radius {
@include border-top-radius(10px);
}
Output:
.border-top-radius {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
border-right-radius
Usage:
@include border-right-radius($radius);
Input:
.border-right-radius {
@include border-right-radius(10px);
}
Output:
.border-right-radius {
border-top-right-radius: 10px;
border-botton-right-radius: 10px;
}
border-bottom-radius
Usage:
@include border-bottom-radius($radius);
Input:
.border-bottom-radius {
@include border-bottom-radius(10px);
}
Output:
.border-bottom-radius {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
border-left-radius
Usage:
@include border-left-radius($radius);
Input:
.border-left-radius {
@include border-left-radius(10px);
}
Output:
.border-left-radius {
border-top-left-radius: 10px;
border-botton-left-radius: 10px;
}
caret-up
Usage:
@include caret-up($size, $color);
Input:
.caret-up-default {
@include caret-up();
}
.caret-up-custom {
@include caret-up(12px, #000);
}
Output:
.caret-up-default {
border-top: 0;
border-right: 8px solid transparent;
border-bottom: 8px solid #666;
border-left: 8px solid transparent;
}
.caret-up-custom {
border-top: 0;
border-right: 12px solid transparent;
border-bottom: 12px solid #000;
border-left: 12px solid transparent;
}
caret-right
Usage:
@include caret-right($size, $color);
Input:
.caret-right-default {
@include caret-right();
}
.caret-right-custom {
@include caret-right(12px, #000);
}
Output:
.caret-right-default {
border-top: 8px solid transparent;
border-right: 0;
border-bottom: 8px solid transparent;
border-left: 8px solid #666;
}
.caret-right-custom {
border-top: 12px solid transparent;
border-right: 0;
border-bottom: 12px solid transparent;
border-left: 12px solid #000;
}
caret-down
Usage:
@include caret-down($size, $color);
Input:
.caret-down-default {
@include caret-down();
}
.caret-down-custom {
@include caret-down(12px, #000);
}
Output:
.caret-down-default {
border-top: 8px solid #666;
border-right: 8px solid transparent;
border-bottom: 0;
border-left: 8px solid transparent;
}
.caret-down-custom {
border-top: 12px solid #000;
border-right: 12px solid transparent;
border-bottom: 0;
border-left: 12px solid transparent;
}
caret-left
Usage:
@include caret-left($size, $color);
Input:
.caret-left-default {
@include caret-left();
}
.caret-left-custom {
@include caret-left(12px, #000);
}
Output:
.caret-left-default {
border-top: 8px solid transparent;
border-right: 8px solid #666;
border-bottom: 8px solid transparent;
border-left: 0;
}
.caret-left-custom {
border-top: 12px solid transparent;
border-right: 12px solid #000;
border-bottom: 12px solid transparent;
border-left: 0;
}
circle
Usage:
@include circle($size);
Input:
.circle {
@include circle(20px);
}
Output:
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
}
clearfix
Usage:
@include clearfix();
Input:
.clearfix {
@include clearfix();
}
Output:
.clearfix:after {
display: table;
clear: both;
content: "";
}
flex-center
Usage:
@include flex-center();
Input:
.flex-center {
@include flex-center();
}
Output:
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
hr
Usage:
@include hr($color, $size: 1px, $style: solid, $direction: horizontal);
Input:
.hr-default {
@include hr(#eee);
}
.hr-custom {
@include hr(#eee, 2px, dashed, vertical);
}
Output:
.hr-default {
width: 100%;
border-top: 1px solid #eee;
}
.hr-custom {
height: 100%;
border-left: 2px dashed #eee;
}
list-unstyle
Usage:
@include list-unstyle();
Input:
.list-unstyle {
@include list-unstyle();
}
Output:
.list-unstyle {
padding-left: 0;
list-style: none;
}
rect
Usage:
@include rect($width, $height);
Input:
.rect {
@include rect(10px, 20px);
}
Output:
.rect {
width: 10px;
height: 20px;
}
square
Usage:
@include square($size);
Input:
.square {
@include square(10px);
}
Output:
.square {
width: 10px;
height: 10px;
}
text-truncate
Usage:
@include text-truncate($rows: 1);
Input:
.text-truncate-default {
@include text-truncate();
}
.text-truncate-custom {
@include text-truncate(3);
}
Output:
.text-truncate-default {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text-truncate-custom {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
License
MIT.