LESS Mix - a little about LESS mixes

The wonderful LESS framework makes it very easy to work with styles. One of its great features is mixins. Admixtures allow you to include all the properties of a class in another class by simply including the class name as the value of one of the properties. This is similar to using variables, but with respect to entire classes. Mixes can behave as functions, and take arguments. It is the ability of mixes to accept arguments and manipulate them that underlies mix libraries such as LESS Elements , LESS Hat , LESS Mix, and the mixins.less component in Bootstrap . Recently, I used LESS Elements

and it was enough for me. It is very lightweight ( 6 kb. ) And has all the frequently used mixes. But starting to work on more complex projects, I lacked the ability to create multi-shadow, radial gradients, angular gradients, multi-animations, and more. Switch to a heavy LESS Hat which weighs as much as 115 kb. did not want. So I just created my less- file in which I collected all the mixes I needed. Over time, the mixes accumulated, I sorted them by categories and decided to share them with the world. So there was a LESS-Mix library that has everything you need but weighs only 7.7 kb .

The library consists of 27 mixes divided into 8 sections:

  • Size and Position - mixes for working with element sizes and its positioning
  • Gradient Tools - mixes for simple and convenient creation of all types of gradients.
  • Border Radius Tools - rounded corners.
  • Shadow Tools - mixes for creating shadows and glow elements.
  • Transition Tools - mixes for working with animations and their options.
  • Transform Tools - mixes for working with transformations.
  • More Tools - mixes for working with other options that are not included in the previous categories but which are necessary in the layout.
  • Develop and Testing Tools - Mixes are designed for developers and debugging. Include options that are most commonly used in the development process.

The library supports multi-shadows, radial gradients, angular gradients, multi-animations, multi-transforms, and there are especially convenient mixes from the Develop and Testing Tools group that allow you to hide, select elements, hide text and nullify filters.

More information about the library and documentation in Russian can be found here:
Repository on GitHub:
denysdovhan / LESS-Mix

I am glad if the library helps you in the robot.
I would be grateful for both positive feedback and objective criticism. I will especially be glad to hear suggestions for improvement!

Thanks for attention! Convenience at work!

Also popular now: