I present to you a library of LESS mixins.
@import "mixins.less";- Animation:
- Border:
- Gradient:
- Shadow:
- Size and position:
- Transform:
- rotate
- [scale with one parameter](#scale with one parameter)
- [scale with two parameters](#scale with two parameters)
- scaleX
- scaleY
- skewX
- skewY
- [translate with one parameter](#translate with one parameter)
- [translate with two parameters](#translate with two parameters)
- translateX
- translateY
- Transition:
- Common:
Description:
.animation(@animation);Parameters:
@animation
Set of parameters separated by spaces.
Order of the parameters:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-directionanimation-fill-mode
Example:
div {
.animation(nameAnimation 3s linear 1s);
}CSS output:
div {
-webkit-animation: nameAnimation 3s linear 1s;
-moz-animation: nameAnimation 3s linear 1s;
-o-animation: nameAnimation 3s linear 1s;
animation: nameAnimation 3s linear 1s;
}Description:
.animation-name(@name);Parameters:
@name
Specifies the name of the @keyframes animation.
Example:
div {
.animation-name(nameAnimation);
}CSS output:
div {
-webkit-animation-name: nameAnimation;
-moz-animation-name: nameAnimation;
-o-animation-name: nameAnimation;
animation-name: nameAnimation;
}Description:
.animation-duration(@duration);Parameters:
@duration
Specifies how many seconds or milliseconds an animation takes to complete one cycle.
Example:
div {
.animation-duration(3s);
}CSS output:
div {
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
}Description:
.animation-timing-function(@timing-function);Parameters:
@timing-function
Specifies the speed curve of the animation.
Example:
div {
.animation-timing-function(linear);
}CSS output:
div {
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}Description:
.animation-delay(@delay);Parameters:
@delay
Specifies when the animation will start.
Example:
div {
.animation-delay(1s);
}CSS output:
div {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
}Description:
.animation-iteration-count(@iteration-count);Parameters:
@iteration-count
Specifies the number of times an animation should be played.
Example:
div {
.animation-iteration-count(3);
}CSS output:
div {
-webkit-animation-iteration-count: 3;
-moz-animation-iteration-count: 3;
-o-animation-iteration-count: 3;
animation-iteration-count: 3;
}Description:
.animation-direction(@direction);Parameters:
@direction
Specifies whether or not the animation should play in reverse on alternate cycles.
Example:
div {
.animation-direction(alternate);
}CSS output:
div {
-webkit-animation-direction: alternate;
-moz-animation-direction: alternate;
-o-animation-direction: alternate;
animation-direction: alternate;
}Description:
.animation-fill-mode(@fill-mode);Parameters:
@fill-mode
Specifies what styles will apply for the element when the animation is not playing (when it is finished, or when it has a "delay").
Example:
div {
.animation-fill-mode(backwards);
}CSS output:
div {
-webkit-animation-fill-mode: backwards;
-moz-animation-fill-mode: backwards;
-o-animation-fill-mode: backwards;
animation-fill-mode: backwards;
}Description:
.border-radius(@topLeft: 0, @topRight: 0, @bottomRight: 0, @bottomLeft: 0);Parameters:
@topLeft (defaults to '0')
Property for setting of the top-left corner of the element.
@topRight (defaults to '0')
Property for setting of the top-right corner of the element.
@bottomRight (defaults to '0')
Property for setting of the bottom-right corner of the element.
@bottomLeft (defaults to '0')
Property for setting of the bottom-left corner of the element.
Example:
div {
.border-radius(5px, 15px, 10px, 20px);
}CSS output:
div {
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-left-radius: 20px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}Description:
.bordered(@color: #eee, @width: 1px);Parameters:
@color (defaults to '#eee')
Color of the border.
@width (defaults to '1px')
Width of the border.
Example:
div {
.bordered(#ccc, 2px);
}
p {
.bordered();
}CSS output:
div {
border: 2px solid #ccc;
}
p {
border: 1px solid #eee;
}Description:
.rounded(@radius: 5px);Parameters:
@radius (defaults to '5px')
Radius of the all corner of the element.
Example:
div {
.rounded(2px);
}
p {
.rounded();
}CSS output:
div {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
p {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}Description:
.gradient-v(@startColor: #eee, @endColor: #fff);Parameters:
@startColor (defaults to '#eee')
Starting color of the gradient.
@endColor (defaults to '#fff')
End color of the gradient.
Example:
div {
.gradient-v(#aaa, #ddd);
}
p {
.gradient-v();
}CSS output:
div {
background: #aaa;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aaa), color-stop(100%,#ddd));
background: -webkit-linear-gradient(top, #aaa 0%,#ddd 100%);
background: -moz-linear-gradient(top, #aaa 0%, #ddd 100%);
background: -ms-linear-gradient(top, #aaa 0%, #ddd 100%);
background: -o-linear-gradient(top, #aaa 0%, #ddd 100%);
background: linear-gradient(to bottom, #aaa 0%, #ddd 100%);
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",#aaa,#ddd));
}
p {
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eee), color-stop(100%,#fff));
background: -webkit-linear-gradient(top, #eee 0%,#fff 100%);
background: -moz-linear-gradient(top, #eee 0%, #fff 100%);
background: -ms-linear-gradient(top, #eee 0%, #fff 100%);
background: -o-linear-gradient(top, #eee 0%, #fff 100%);
background: linear-gradient(to bottom, #eee 0%, #fff 100%);
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",#eee,#fff));
}Description:
.gradient-h(@startColor: #eee, @endColor: #fff);Parameters:
@startColor (defaults to '#eee')
Starting color of the gradient.
@endColor (defaults to '#fff')
End color of the gradient.
Example:
div {
.gradient-h(#aaa, #ddd);
}
p {
.gradient-h();
}CSS output:
div {
background: #aaa;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#aaa), color-stop(100%,#ddd));
background: -webkit-linear-gradient(left, #aaa 0%,#ddd 100%);
background: -moz-linear-gradient(left, #aaa 0%, #ddd 100%);
background: -ms-linear-gradient(left, #aaa 0%, #ddd 100%);
background: -o-linear-gradient(left, #aaa 0%, #ddd 100%);
background: linear-gradient(to right, #aaa 0%, #ddd 100%);
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",#aaa,#ddd));
}
p {
background: #eee;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#eee), color-stop(100%,#fff));
background: -webkit-linear-gradient(left, #eee 0%,#fff 100%);
background: -moz-linear-gradient(left, #eee 0%, #fff 100%);
background: -ms-linear-gradient(left, #eee 0%, #fff 100%);
background: -o-linear-gradient(left, #eee 0%, #fff 100%);
background: linear-gradient(to right, #eee 0%, #fff 100%);
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",#eee,#fff));
}Description:
.box-shadow(@shadow);Parameters:
@shadow
Properties of the shadow such as:
offset-x
offset-y
spread-distance
blur-radius
color
inset
Example:
div {
.box-shadow(10px 5px 5px rgba(10,10,10,0.5));
}CSS output:
div {
-webkit-box-shadow: 10px 5px 5px rgba(10,10,10,0.5);
-moz-box-shadow: 10px 5px 5px rgba(10,10,10,0.5);
box-shadow: 10px 5px 5px rgba(10,10,10,0.5);
}Description:
.inner-shadow(@horizontal: 0, @vertical: 1px, @blur: 2px, @alpha: 0.4);Parameters:
@horizontal (defaults to '0')
Horizontal offset of the shadow.
@vertical (defaults to '1px')
Vertical offset of the shadow.
@blur (defaults to '2px')
Blur radius.
@alpha (defaults to '0.4')
Alpha channel for the RGB color.
Example:
div {
.inner-shadow(4px, 5px, 3px, @alpha: 0.5);
}
p {
.inner-shadow();
}CSS output:
div {
-webkit-box-shadow: inset 4px 5px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: inset 4px 5px 3px rgba(0, 0, 0, 0.5);
box-shadow: inset 4px 5px 3px rgba(0, 0, 0, 0.5);
}
p {
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}Description:
.outer-shadow(@horizontal: 0, @vertical: 1px, @blur: 2px, @alpha: 0.1)Parameters:
@horizontal (defaults to '0')
Horizontal offset of the shadow.
@vertical (defaults to '1px')
Vertical offset of the shadow.
@blur (defaults to '2px')
Blur radius.
@alpha (defaults to '0.1')
Alpha channel for the RGB color.
Example:
div {
.outer-shadow(4px, 5px, 3px, @alpha: 0.5);
}
p {
.outer-shadow();
}CSS output:
div {
-webkit-box-shadow: 4px 5px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 4px 5px 3px rgba(0, 0, 0, 0.5);
box-shadow: 4px 5px 3px rgba(0, 0, 0, 0.5);
}
p {
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}Description:
.size(@width, @height);Parameters:
@width
Width of the element.
@height
Height of the element.
Example:
div {
.size(200px, 150px);
}CSS output:
div {
width: 200px;
height: 150px;
}Description:
.square(@size);Parameters:
@size
Element dimensions.
Example:
div {
.square(300px);
}CSS output:
div {
width: 300px;
height: 300px;
}Description:
.center-block();Parameters:
none
Example:
div {
.center-block();
}CSS output:
div {
display: block;
margin-left: auto;
margin-right: auto;
}Description:
.rotate(@deg);Parameters:
@deg
Angle of the rotation.
Example:
div {
.rotate(360deg);
}CSS output:
div {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}Description:
.scale(@ratio);Parameters:
@ratio
The ratio of the scale transformation.
Example:
div {
.scale(3);
}CSS output:
div {
-webkit-transform: scale(3);
-moz-transform: scale(3);
-ms-transform: scale(3);
-o-transform: scale(3);
transform: scale(3);
}Description:
.scale(@ratioX, @ratioY);Parameters:
@ratioX
The ratio of the X-axis scale transformation.
@ratioY
The ratio of the Y-axis scale transformation.
Example:
div {
.scale(2, 0.5);
}CSS output:
div {
-webkit-transform: scale(2, 0.5);
-moz-transform: scale(2, 0.5);
-ms-transform: scale(2, 0.5);
-o-transform: scale(2, 0.5);
transform: scale(2, 0.5);
}Description:
.scaleX(@ratio);Parameters:
@ratio
The ratio of the X-axis scale transformation.
Example:
div {
.scaleX(1.5);
}CSS output:
div {
-webkit-transform: scaleX(1.5);
-moz-transform: scaleX(1.5);
-ms-transform: scaleX(1.5);
-o-transform: scaleX(1.5);
transform: scaleX(1.5);
}Description:
.scaleY(@ratio);Parameters:
@ratio
The ratio of the Y-axis scale transformation.
Example:
div {
.scaleY(2.5);
}CSS output:
div {
-webkit-transform: scaleY(2.5);
-moz-transform: scaleY(2.5);
-ms-transform: scaleY(2.5);
-o-transform: scaleY(2.5);
transform: scaleY(2.5);
}Description:
.skewX(@deg);Parameters:
@deg
Angle of the X-axis skew.
Example:
div {
.skewX(4deg);
}CSS output:
div {
-webkit-transform: skewX(4deg);
-moz-transform: skewX(4deg);
-ms-transform: skewX(4deg);
-o-transform: skewX(4deg);
transform: skewX(4deg);
}Description:
.skewY(@deg);Parameters:
@deg
Angle of the Y-axis skew.
Example:
div {
.skewY(4deg);
}CSS output:
div {
-webkit-transform: skewY(4deg);
-moz-transform: skewY(4deg);
-ms-transform: skewY(4deg);
-o-transform: skewY(4deg);
transform: skewY(4deg);
}Description:
.translate(@ratio);Parameters:
@ratio
Value of the X-axis translation.
Example:
div {
.translate(12px);
}CSS output:
div {
-webkit-transform: translate(12px);
-moz-transform: translate(12px);
-ms-transform: translate(12px);
-o-transform: translate(12px);
transform: translate(12px);
}Description:
.translate(@ratioX, @ratioY);Parameters:
@ratioX
Value of the X-axis translation.
@ratioY
Value of the Y-axis translation.
Example:
div {
.translate(12px, 40%);
}CSS output:
div {
-webkit-transform: translate(12px, 40%);
-moz-transform: translate(12px, 40%);
-ms-transform: translate(12px, 40%);
-o-transform: translate(12px, 40%);
transform: translate(12px, 40%);
}Description:
.translateX(@ratio);Parameters:
@ratio
Value of the X-axis translation.
Example:
div {
.translateX(12px);
}CSS output:
div {
-webkit-transform: translateX(12px);
-moz-transform: translateX(12px);
-ms-transform: translateX(12px);
-o-transform: translateX(12px);
transform: translateX(12px);
}Description:
.translateY(@ratio);Parameters:
@ratio
Value of the Y-axis translation.
Example:
div {
.translateY(20%);
}CSS output:
div {
-webkit-transform: translateY(20%);
-moz-transform: translateY(20%);
-ms-transform: translateY(20%);
-o-transform: translateY(20%);
transform: translateY(20%);
}Description:
.transition(@transition);Parameters:
@transition
A shorthand property for setting the four transition properties into a single property.
Example:
div {
.transition(width 2s);
}CSS output:
div {
-webkit-transition: width 2s;
-moz-transition: width 2s;
-o-transition: width 2s;
transition: width 2s;
}Description:
.transition-all(@duration: 0.2s, @timing-function: ease-out);Parameters:
@duration (defaults to '0.2s')
Specifies how many seconds or milliseconds a transition effect takes to complete.
@timing-function (defaults to 'ease-out')
Specifies the speed curve of the transition effect.
Example:
div {
.transition-all(1s linear);
}
p {
.transition-all();
}CSS output:
div {
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
p {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}Description:
.transition-property(@property);Parameters:
@property
Specifies the name of the CSS property the transition effect is for.
Example:
div {
.transition-property(height);
}CSS output:
div {
-webkit-transition-property: height;
-moz-transition-property: height;
-o-transition-property: height;
transition-property: height;
}Description:
.transition-duration(@duration: 0.2s);Parameters:
@duration (defaults to '0.2s')
Specifies how many seconds or milliseconds a transition effect takes to complete.
Example:
div {
.transition-duration(2s);
}
p {
.transition-duration();
}CSS output:
div {
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
}
p {
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
}Description:
.transition-timing-function(@timing-function);Parameters:
@timing-function
Specifies the speed curve of the transition effect.
Example:
div {
.transition-timing-function(linear);
}CSS output:
div {
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
}Description:
.transition-delay(@delay);Parameters:
@delay
Specifies when the transition effect will start.
Example:
div {
.transition-delay(1s);
}CSS output:
div {
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-o-transition-delay: 1s;
transition-delay: 1s;
}Description:
.box-sizing (@type: border-box);Parameters:
@type (defaults to 'border-box')
Tell the browser what the sizing properties (width and height) should include.
Example:
div {
.box-sizing (@type: content-box);
}
p {
.box-sizing();
}CSS output:
div {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
p {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}Description:
.clear-fix();Parameters:
none
Example:
div {
.clear-fix();
}CSS output:
div {
*zoom: 1;
}
div:before, div:after {
content: " ";
display: table;
}
div:after {
clear: both;
}Description:
.hide();Parameters:
none
Example:
div {
.hide();
}CSS output:
div {
display: none !important;
}Description:
.show();Parameters:
none
Example:
div {
.show();
}CSS output:
div {
display: block !important;
}Description:
.inline-block();Parameters:
none
Example:
div {
.inline-block();
}CSS output:
div {
display: inline-block;
*zoom: 1;
*display: inline;
}Description:
.opacity(@opacity: 0.5);Parameters:
@opacity (defaults to '0.5')
Opacity of the element.
Example:
div {
.opacity(0.9);
}
p {
.opacity();
}CSS output:
div {
-webkit-opacity: 0.9;
-moz-opacity: 0.9;
opacity: 0.9;
@opperc: 0.9 * 100;
-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})";
filter: ~"alpha(opacity=@{opperc})";
}
p {
-webkit-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
@opperc: 0.5 * 100;
-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})";
filter: ~"alpha(opacity=@{opperc})";
}Description:
.user-select(@select: none);Parameters:
@select (defaults to 'none')
Selectable or unselectable text.
Example:
div {
.user-select(text);
}
p {
.user-select();
}CSS output:
div {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
-o-user-select: text;
user-select: text;
}
p {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}Description:
.placeholder(@color);Parameters:
@color
Color of the placeholder text in the input field.
Example:
div {
.placeholder(#777);
}CSS output:
div::-webkit-input-placeholder {
color: #777;
}
div::-moz-placeholder {
color: #777;
opacity: 1;
}
div:-ms-input-placeholder {
color: #777;
}Copyright © 2014 Alexey Neretin. Licensed under the MIT license.