In this chapter, you will learn the basics of LESS and understand why it is better than traditional CSS. You will compile your own build from the Bootstrap source, replace the CSS in your project with LESS, and learn to customize Bootstrap with LESS and use its mixins.
LESS is a dynamic style sheet language that is compiled into CSS. The compiler itself is written in JavaScript and is quite fast compared to its alternatives, SASS and Stylus.
LESS comes with a wide range of useful features that are not available in traditional CSS, such as variables, mixins, nested rules, functions, and operators. Let's face it. Writing CSS is tiresome and includes a lot of repetition. When you write your styles in LESS instead of traditional CSS, you can use the following features to improve your styles:
- Variables: Variables have always been missing from CSS. By using LESS, you can define your own variables to make your styles more dynamic and configurable.
- Mixins: Mixins are named methods that can be used over and over again to repeat an operation. They can also take arguments and support default values for these arguments. Mixins are a great way to get rid of browser-specific CSS prefixes.
- Nested rules: Instead of writing the same selector over and over again, you can use a parent selector and declare your rules for child elements within that rule to reduce the need for repetition.
- Functions: LESS includes a number of color functions, for example, darken and lighten functions that ease working with colors. You can also switch between different color schemes, such as HSL and RGB, with ease.
- Operators: With LESS, you can perform simple mathematical operations to calculate widths, margins, paddings, and so on. This comes really handy when you want to customize a grid in Bootstrap or write your own grid.