What is this?

LESS-Mix - is a functional, powerful, convenient and easy at the same time (only 7.7 kb) library LESS-mixins. Despite its small size, the library has everything the necessary functionality. library is Cross-browser, so you can safely, quickly and effectively.

How to Install

Download file "lessmix.less".
Put it in the folder with your project.
Include the library in your LESS-file at the beginning of the document, the command: @import "lessmix.less";

How to use

Size and Position

Mixins to work with the size of the element and its position

.size(@width, @height) A quick way to set the size of the element. @width - element width. @height - element height.

.square(@size) Specifies the size the square element. @size - the size of the element.

.center() Alignment block in the center.

Gradient Tools

Mixins for quick and easy creation of gradients of all types

#gradient>.vertical(@startColor, @stopColor) Vertical gradient. @startColor - color of the gradient origin, @stopColor - the color of the gradient stop. The colors are approved from the top down. The background color for browsers that do not supported gradients calculated automatically.

#gradient>.hotrizontal(@startColor, @stopColor) Horizontal gradient. @startColor - color of the gradient origin, @stopColor - the color of the gradient stop. The colors are approved from left to right. The background color for browsers that do not supported gradients calculated automatically.

#gradient>.directional(@startColor, @stopColor, @deg) Gradient with arbitrary slope. @startColor - color of the gradient origin, @stopColor - the color of the gradient stop, @deg - angle (default: 45deg). The background color for browsers that do not supported gradients calculated automatically.

#gradient>.radial(@innerColor, @outerColor) Radial gradient. @innerColor - the color inside, @outerColor - the exterior color of the gradient. The background color for browsers that do not supported gradients calculated automatically.

Border Radius Tools

Mixins to work with rounded corners.

.rounded(@radius) Set rounded corners. @radius - radius value.

.border-radius(@topLeft, @topRight, @bottomRight, @bottomLeft) Set rounded corners for each corner individually. Values are set in clockwise from the upper right corner. The default value - 0.

Shadow Tools

Mixins to create shadows and glows

.box-shadow(@shadow) Sets the shade. @shadow - line parameters, for example inset 0 1px 2px #666. To specify multiple values shadows, use the escape character ~, for example ~"inset 0 1px 2px #666", 2px 1px 2px #000".

.outer-shadow(@x, @y, @blur, @alpha) Adds to the block shade. @x and @y indentation axes, @blur - blur, @alpha - transparency of blur (default: 0 1px 2px 0.1).

.inner-shadow(@x, @y, @blur, @alpha) Adds an inner shadow. @x and @y indentation axes, @blur - blur, @alpha - force shadow (default: 0 1px 2px 0.4) .

Transition Tools

Mixins to work with animations and their options.

.transition(@transition) Sets animation parameters. To specify multiple values, use the escape character ~ as a property .box-shadow().

.transition-all(@duration, @delay) Sets the animation of all the properties. @duration - animation time in seconds (default: 0.2s), @delay - type of animation ( default: ease).

.transition-duration(@transition-duration) Sets animation time in seconds.

.transition-delay(@transition-delay) Sets the type of animation.

Transform Tools

Mixins to work with transformations.

.transform(@transform) Sets the value of the transformation. Accepts any value, but it is advisable to use the escape character ~, as in .box-shadow().

.rotate(@deg) Rotates the element indicating the number of degrees in the @deg.

.scale(@ratio) Increases the element of proportion.

.translate(@x; @y) Takes the element using the coordinates of @x and @y

More Tools

Mixins to work with other options that are not included in the previous categories but are needed to work.

.background-clip(@argument) Defines how the background color or background image should be displayed under the borders. (default: padding-box).

.box-sizing(@sizing) Used to change the algorithm for calculating the width and height of the element. (default: border-box)

.user-select(@select) Allows you to disable text selection. For example, the menu items. (default: none)

.opacity(@opacity) Adds transparency to the element. 0 - fully transparent, 1 - opaque. (default: 0.5)

.inline-block() Cross-browser analog display: inline-block;

Develop and Testing Tools

Mixins are intended for developers and debug. Includes options that are most commonly used pattern during development.

.hide() Hides the block. (display:none)

.hide-text() Allows you to hide all the text in the block.

.test-border() A quick way to block a black border of 1 pixel.

.reset-filter() Property allows you to disable the IE-filters.

Project

The project created an enthusiast for all web designers, designed to simplify the work with the frequently used properties and make the code more readable and convenient.
The project LESS-Mix - is an open-source code,and is based on the draft of the dynamic stylistic markup language LESS from Alexis Sellier. You can join the development and improvement of project GitHub. I will be grateful for the positive feedback well as for criticizing.
Waiting for your feedbacks on the: [email protected]

Made with love in Ukraine...