LESS-Mix

⚠️ less-mix is currently deprecated package. There are many better tools. Try Autoprefixer for example.

In English

LESS-Mix - is a functional, powerful, convenient and easy at the same time library LESS-mixins. Despite its small size, the library has all the necessary functions. Library is cross-browser, so you can safely, quickly and effectively work.

How to Install

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

How to use

The library includes 27 mixins divided into 8 sections:

• Size and Position
  • .size(@width, @height) - a quick way to set the size of the element. @width - width of the element. @height - the height of the element.
  • .square(@size) - specifies the size the square element. @size - the size of the element.
  • .center - alignment block in the center.
• Gradient Tools
  • #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>.horizontal(@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
  • .rounded(@radius) - set rounded corners. @radius - the value of the radius.
  • .border-radius(@topRight, @bottomRight, @bottomLeft, @topLeft) - set rounded corners for each corner individually. Values are set in clockwise from the upper right corner. The default value - 0.
• Shadow Tools
  • .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 - force 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 - force blur, @alpha - force shadow (default: _ 0 1px 2px 0.4_).
• Transition Tools
  • .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
  • .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
  • .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
  • .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. I will be grateful for the positive feedback well as for criticizing. Waiting for your feedbacks on the: [email protected]

На Русском

LESS-Mix - это функциональная, мощная, удобная и одновременно легкая (всего 7,7 кб) библиотека LESS-примешаний. Несмотря на свой маленький размер, библиотека обладает всем необходимым функционалом. Библиотека кроссбраузерная, поэтому вы можете спокойно, быстро и эффективно работать.

Как установить

1. Скачать файл "lessmix.less".
2. Поместите его в папке с вашим проектом.
3. Включить библиотеку в ваш LESS-файл, в начале документа, командой: @import "lessmix.less";

Как использовать

Библиотека включает 27 примешаний разбитых на 8 секций:

• Size and Position
  • .size(@width, @height) - быстрый способ задать размер элемента. @width - ширина элемента. @height - высота элемента.
  • .square(@size) - задает размер квадратного элемента. @size - размер элемента.
  • .center - выравнивание блока по центру.
• Gradient Tools
  • #gradient>.vertical(@startColor, @stopColor) - вертикальный градиент. @startColor - цвет начала градиента, @stopColor - цвет остановки градиента. Цвета применяються сверху вниз. Фоновый цвет для браузеров которые не поддержывают градиенты исчисляется автоматически.
  • #gradient>.horizontal(@startColor, @stopColor) - горизонтальный градиент. @startColor - цвет начала градиента, @stopColor - цвет остановки градиента. Цвета применяються слева направо. Фоновый цвет для браузеров которые не поддержывают градиенты исчисляется автоматически.
  • #gradient>.directional(@startColor, @stopColor, @deg)- градиент с произвольным углом наклона. @startColor - цвет начала градиента, @stopColor - цвет остановки градиента, @deg - угол наклона (по-умолчанию: 45deg). Фоновый цвет для браузеров которые не поддержывают градиенты исчисляется автоматически.
  • #gradient>.radial(@innerColor, @outerColor) - радиальный градиент. @innerColor - внутрений цвет, @outerColor - внешний цвет градиента. Фоновый цвет для браузеров которые не поддержывают градиенты исчисляется автоматически.
• Border Radius Tools
  • .rounded(@radius) - устанавливает скругленные углы. @radius - значение радиуса.
  • .border-radius(@topRight, @bottomRight, @bottomLeft, @topLeft) - устанавливает скругленые углы для каждого угла индивидуально. Значения задаются за часовой стрелкой начиная от верхнего правого угла. Значение по-умолчанию - 0.
• Shadow Tools
  • .box-shadow(@shadow) - устанавливает тень. @shadow - строка параметров, например inset 0 1px 2px #666. Чтобы задать несколько значений теней (мультитень) используйте символ екранирования ~, например ~"inset 0 1px 2px #666", 2px 1px 2px #000".
  • .outer-shadow(@x, @y, @blur, @alpha) - добавляет к блоку тень. @x и @y отступы осей, @blur - сила размытия, @alpha - прозрачнось размытия (по-умолчанию: 0 1px 2px 0.1).
  • .inner-shadow(@x, @y, @blur, @alpha) - добавляет внутренею тень. @x и @y отступы осей, @blur - сила размытия, @alpha - сила тени (по-умолчанию: 0 1px 2px 0.4).
• Transition Tools
  • .transition(@transition) - устанавливает параметры анимации. Чтобы задать несколько значений используйте символ экранирования ~ как у свойства .box-shadow().
  • .transition-all(@duration, @delay) - устанавливает анимацию всех свойств. @duration - время анимации в секундах (по-умолчанию: 0.2s), @delay - тип анимацыи (по-умолчанию: ease).
  • .transition-duration(@transition-duration) - устанавливает времья анимации в секундах.
  • .transition-delay(@transition-delay) - устанавливает тип анимации.
• Transform Tools
  • .transform(@transform) - задает значения трансформации. Принимает любые значения, но желательно использовать символ экранирования ~, как у .box-shadow().
  • .rotate(@deg) - вращает элемент на указаное количество градусов @deg.
  • .scale(@ratio) - увеличивает элемент за пропорциями.
  • .translate(@x; @y) - переводит элемент используя заданые координаты @x и @y.
• More Tools
  • .background-clip(@argument) - определяет, как цвет фона или фоновая картинка должна выводиться под границами. (по-умолчанию: padding-box)
  • .box-sizing(@sizing) - применяется для изменения алгоритма расчета ширины и высоты элемента. (по-умолчанию: border-box)
  • .user-select(@select) - позволяет отключить выделение текста. Например, в пунктах меню. (по-умолчанию: none).
  • .opacity(@opacity) - добавляет прозрачность к элементу. 0 - полностью прозрачный, 1 - непрозрачный. (по-умолчанию: 0.5).
  • .inline-block() - кросбрауезерный аналог display: inline-block;
• Develop and Testing Tools
  • .hide() - прячет блок. ( display : none).
  • .hide-text() - позволяет спрятать весь текст в блоке.
  • .test-border() - быстрый способ дать блоку чёрную рамку в 1 пиксель.
  • .reset-filter() - свойство позволяет отключить IE-фильтры.