3 LESS CSS Features You Need to Know
Hey there! It’s been a minute since we last talked about LESS CSS. Guess what? LESS CSS has gone through some changes and is now on version 1.5. It’s gotten even better with some new features that make it more powerful as a CSS Pre-processor.
There are a bunch of cool new things added to it, and I want to share with you 3 of my absolute favorites: Referencing External Files, Extend, and Merging Property. These features are a game-changer and will help us write some seriously awesome CSS. Let’s dive in!
Contents
The Beginner’s Guide to LESS CSS
If you’re into web development, you probably already know how important CSS Pre-processors are. They take plain-old CSS and supercharge it with programming features. Cool, right? Learn more about it.
Importing Files
First things first, let me show you how LESS CSS handles external files using the @import rule. It’s pretty neat, I promise.
Sometimes people like to divide their stylesheet into separate files instead of keeping it all in one place. This way, they can import those files into another stylesheet using the @import rule, which allows them to reuse the mixins and variables from those files.
The issue, however, is that when LESS compiles these external files, it ends up creating multiple style rules that define the same thing. This can cause problems and lead to confusion.
To illustrate this problem, let’s consider an example. We have two LESS files: “style.less” and “external.less”. We import “external.less” into “style.less”. In “external.less”, we have a mixin called “.square” that defines the style for square boxes. Within “style.less”, we use this mixin.
@import “external”;
.box {
.square;
}
Here, we are importing the mixin from “external.less” and applying it to a class called “.box”. This allows us to easily create square boxes by reusing the mixin.
However, because LESS compiles all the mixins from the imported files, we might end up with duplicate style rules for our square boxes. This can lead to unexpected results and make the stylesheet harder to maintain.
To avoid this issue, it’s important to be mindful of how mixins and imports are used in LESS. One approach is to consolidate the mixins in a single file and import that file wherever needed, rather than importing individual files with specific mixins.
By carefully managing imports and mixins, we can ensure a cleaner and more organized stylesheet, making it easier to maintain and update in the long run.
In CSS, if I use the following code snippet:
.square {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: red;
}
it will generate the specified output. However, this approach has a downside because it also creates the style rules from the .square mixin, which is not what we want.
Thankfully, LESS version 1.5 introduced a new feature called reference which allows us to import a file solely for reference purposes, without outputting its content.
To utilize the reference instruction, simply include it in the import statement like so:
@import (reference) “external”;
After compiling the LESS stylesheet with this modified import statement, the .square class is no longer outputted.
Now, let’s talk about the Extend method.
The Extend method is absolutely amazing. It basically allows you to group selectors that share the same style rules, resulting in cleaner and more organized CSS code. When building a website, it’s common to come across selectors that have similar style rules, like the example below:
I wanted to talk about a coding practice that isn’t ideal and doesn’t follow the best practices. It’s called redundancy, and it means repeating the same styles multiple times. This can make your code harder to read and maintain.
But don’t worry, there’s a better way to approach this. In Sass, there’s a special directive called @extend that allows you to group similar styles together. Similarly, in LESS, you can use the &:extend() function introduced in version 1.4.
Let me show you an example. Let’s say we have a class called “.square” that defines a box with a width of 100px, a height of 100px, a black border of 1px, and a transparent background color. Instead of repeating these styles for each box, we can use the @extend directive to inherit the styles from “.square” for other classes like “.box” and “.box2”.
Here’s how it works:
“`scss
@import (reference) “external”;
.box {
&:extend(.square);
background-color: transparent;
}
.box2 {
&:extend(.square);
}
“`
When this code is compiled to regular CSS, it will produce the following:
“`css
.square, .box, .box2 {
width: 100px;
height: 100px;
margin: 0 auto;
border: 1px solid black;
}
.box {
background-color: transparent;
}
“`
As you can see, the styles from “.square” are applied to “.box” and “.box2”, reducing the duplication of code. This makes your code more organized, easier to read, and simpler to maintain.
So, remember, when you find yourself repeating the same styles, consider using the @extend directive in Sass or the &:extend() function in LESS to streamline your code and make it more efficient. Happy coding!
Hey there! Let me tell you about this awesome new thing called the Merging Property. It’s like magic for CSS properties that can have multiple values. Think transform, transition, and box-shadow. With the Merging Property, I can combine values that belong to the same property, making things a whole lot easier. Pretty cool, right?
Now, let’s take a look at this example to see it in action. So, the CSS3 Box Shadow property can have multiple shadow values. But with the Merging Property, I can create these shadow effects effortlessly and keep things nice and organized.
Alright, here’s what I’m gonna do. I’ll create two mixins called .inner-shadow and .outer-shadow. I know, the names are pretty self-explanatory, huh?
.inner-shadow {
box-shadow: inset 10px 10px 5px #ccc;
}
.outer-shadow {
box-shadow:
}
Now that I’ve set up those mixins, I can use them like this:
This code will give us the following result.
Final Thought
These three awesome new features – Referencing External File, Extend, and Merging Property – have inspired me to use LESS more. With these features, we can write better and more manageable CSS. I can’t wait to see what other cool things LESS will offer in the future.
These three awesome new features – Referencing External File, Extend, and Merging Property – have inspired me to use LESS more. With these features, we can write better and more manageable CSS. I can’t wait to see what other cool things LESS will offer in the future.
