scss-common-mixins

Scss mixins often used.

Content Table

• Install
• Import
• Examples
  • background-gradient
  • background-gradient-x
  • background-gradient-y
  • background-cover
  • background-contain
  • border-top-radius
  • border-right-radius
  • border-bottom-radius
  • border-left-radius
  • caret-up
  • caret-right
  • caret-down
  • caret-left
  • circle
  • clearfix
  • flex-center
  • hr
  • list-unstyle
  • rect
  • square
  • text-truncate

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.