Implementing Preprocessing
You implement a preprocessing program like LESS or SASS by writing in a new programming language. This programming language is very similar to css, but it has some distinct benefits which we will go over in the mechanism section.
LESS and SASS works is by writing your stylesheet in a preprocessing language, then using a compiler to output the LESS or SASS in the standard CSS language. This standard CSS is what a browser can read and thus display to your website's users.
Mechanisms
In Less and Sass there are several elements that make building your CSS much easier. First off you have variables. Variables are where you can define your parameters of certain CSS elements once at the beginning and then utilize them throughout your less coding. For example you can define a few different colors, widths, padding etc. When you want to use those colors and paddings in the future you just tag the variable by its name that you gave it.
You also have nesting. Nesting in less is very similar to nesting in html. You can put different elements inside of each other. This helps clean up your code and helps to organize and specify which areas of your HTML you are referring to. For example you can target your header and lay out your specifications. Then inside the header less, section you can target the H2 element. These variables will only affect that specific H1 element in the header as opposed to any other H2 elements you may or may not have on the page as it is nested under the header. Mix-ins in less is when you can implement the specifications of a variable into another. For example if you have class one and class two targeted, you can implement all of the specifications you put in for class 1 by just tagging class 1 inside of Class 2.
There are dozens of less functions many of which operate similarly to their equivalencies in css. These include things like color width and various math equations. you define these functions in order to set the parameters on your website appearance.
Lastly we have operations which are mathematical equations such as addition subtraction multiplication division. They can be applied to numbers, colors are variables and make it easy to adjust your predefined variables in slightly different ways. For example you can set a color to 50% opacity by just applying the 50% operation to your variable.