What is Less Mixins

No CSS preprocessor is needed, which means that it extends the CSS language, adding functions that allow variables, blending, functions, and many other techniques so that you can create CSS that is easy to maintain, easy to modify, and easier to modify.

With Less, we can define "mixed" calls that have some similarities to functions in programming languages. In special cases, they are used to divide CSS instructions into useful and reusable classes. Mixins allows you to embed all the properties of a class into another class by including the name of the class as one of its properties. This is just a variable, but a complete course. Any type of CSS or set of recognition rules can be combined like this:

See the Example Below:

.round-border {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

#nav {
  color: red;
  .round-border;
}

// Output
.round-border {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

#nav {
  color: red;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
 

As you can see, the result is a mixture of a set of CSS rules. If you don't want the mixin to appear in the compiled .css file, just add an empty parenthesis after the mixin name. You may be wondering why I use capital letters with mixed names. This is because the CSS class selector also uses dot notation and cannot distinguish it from the "less mixed" name. This is why I usually use capital letters, for example, in object-oriented programming, it uses capital letters as a class.

I Hope this blog is helpfull for all.

Thanks