Less mixins often used.
npm install --save less-common-mixins
@import 'less-common-mixins';
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);
}
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);
}
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);
}
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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
Usage:
.circle(@size);
Input:
.circle {
.circle(20px);
}
Output:
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
}
Usage:
.clearfix();
Input:
.clearfix {
.clearfix();
}
Output:
.clearfix:after {
display: table;
clear: both;
content: "";
}
Usage:
.flex-center();
Input:
.flex-center {
.flex-center();
}
Output:
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
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;
}
Usage:
.list-unstyle();
Input:
.list-unstyle {
.list-unstyle();
}
Output:
.list-unstyle {
padding-left: 0;
list-style: none;
}
Usage:
.rect(@width; @height);
Input:
.rect {
.rect(10px, 20px);
}
Output:
.rect {
width: 10px;
height: 20px;
}
Usage:
.square(@size);
Input:
.square {
.square(10px);
}
Output:
.square {
width: 10px;
height: 10px;
}
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;
}
MIT.