less-common-mixins v1.0.2

less-common-mixins

Less 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 less-common-mixins

Import

@import 'less-common-mixins';

Examples

background-gradient

Usage:

.background-gradient(@begin; @end; @angle: 180deg);

Input:

.background-gradient-default {
  .background-gradient(#fff, #000);
}

.background-gradient-custom-angle {
  .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:

.background-gradient-x(@begin; @end);

Input:

.background-gradient-x {
  .background-gradient-x(#fff, #000);
}

Output:

.background-gradient-x {
  background-color: #808080;
  background-image: linear-gradient(90deg, #fff, #000);
}

background-gradient-y

Usage:

.background-gradient-y(@begin; @end);

Input:

.background-gradient-y {
  .background-gradient-y(#fff, #000);
}

Output:

.background-gradient-y {
  background-color: #808080;
  background-image: linear-gradient(180deg, #fff, #000);
}

background-cover

Usage:

.background-cover(@image);

Input:

.background-cover {
  .background-cover('url(image)');
}

Output:

.background-cover {
  background-image: 'url(image)';
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

background-contain

Usage:

.background-contain(@image);

Input:

.background-contain {
  .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:

.border-top-radius(@radius);

Input:

.border-top-radius {
  .border-top-radius(10px);
}

Output:

.border-top-radius {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

border-right-radius

Usage:

.border-right-radius(@radius);

Input:

.border-right-radius {
  .border-right-radius(10px);
}

Output:

.border-right-radius {
  border-top-right-radius: 10px;
  border-botton-right-radius: 10px;
}

border-bottom-radius

Usage:

.border-bottom-radius(@radius);

Input:

.border-bottom-radius {
  .border-bottom-radius(10px);
}

Output:

.border-bottom-radius {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

border-left-radius

Usage:

.border-left-radius(@radius);

Input:

.border-left-radius {
  .border-left-radius(10px);
}

Output:

.border-left-radius {
  border-top-left-radius: 10px;
  border-botton-left-radius: 10px;
}

caret-up

Usage:

.caret-up(@size; @color);

Input:

.caret-up-default {
  .caret-up();
}

.caret-up-custom {
  .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:

.caret-right(@size; @color);

Input:

.caret-right-default {
  .caret-right();
}

.caret-right-custom {
  .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:

.caret-down(@size; @color);

Input:

.caret-down-default {
  .caret-down();
}

.caret-down-custom {
  .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:

.caret-left(@size; @color);

Input:

.caret-left-default {
  .caret-left();
}

.caret-left-custom {
  .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:

.circle(@size);

Input:

.circle {
  .circle(20px);
}

Output:

.circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

clearfix

Usage:

.clearfix();

Input:

.clearfix {
  .clearfix();
}

Output:

.clearfix:after {
  display: table;
  clear: both;
  content: "";
}

flex-center

Usage:

.flex-center();

Input:

.flex-center {
  .flex-center();
}

Output:

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

hr

Usage:

.hr(@color; @size: 1px; @style: solid; @direction: horizontal);

Input:

.hr-default {
  .hr(#eee);
}

.hr-custom {
  .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:

.list-unstyle();

Input:

.list-unstyle {
  .list-unstyle();
}

Output:

.list-unstyle {
  padding-left: 0;
  list-style: none;
}

rect

Usage:

.rect(@width; @height);

Input:

.rect {
  .rect(10px, 20px);
}

Output:

.rect {
  width: 10px;
  height: 20px;
}

square

Usage:

.square(@size);

Input:

.square {
  .square(10px);
}

Output:

.square {
  width: 10px;
  height: 10px;
}

text-truncate

Usage:

.text-truncate(@rows: 1);

Input:

.text-truncate-default {
  .text-truncate();
}

.text-truncate-custom {
  .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.