Written by Andrei MoraruOct 22, 2020

Are you ready to learn something new today? 

We created the Technical Blog section out of a desire to share the knowledge gathered over the years of hard work by senior developers from our community - helping you become one of the top 1% of software developers in the world. 

Note: You can find the other parts of the course in the Tech section of our blog - here.

Now... Let's discover the next part of "Learning CSS with Less". Enjoy!

  1. Topics of discussion
  2. Variables and mixins
  3. Importing other files

1. Topics of discussion

In this tutorial, we are going to take a look at some language extensions that will help you in writing your CSS code. So, let's have some fun.

2. Variables and mixins

We already know how to use variables in Less CSS code. Variables are useful when you want to reuse something in multiple places, such as colors, sizes and even media query conditions. A media query condition is written as a variable looks something like this:

@bootstrap-lg: ~"(max-width: 1199px)";

A mixin is a way in which you can write multiple CSS instructions and reuse them in multiple places. An interesting thing here is that you can use basically use any defined selector as a mixin. You can also write a mixin that is not going to get exported to the compiled file. And you can write mixins that accept parameters. Let's take a look at some examples:

@main-color: red;

.default-text {
  color: @main-color;
}

.mixin-container {
  .default-text();
  .mixin-item {
    font-size: 1rem;
  }
}

This is the simplest use of mixins. Here's how the compiled code looks:

.default-text {
  color: red;
}
.mixin-container {
  color: red;
}
.mixin-container .mixin-item {
  font-size: 1rem;
}

Let's modify the mixin so that it does not get exported to the main file:

@main-color: red;

.default-text() {
  color: @main-color;
}

.mixin-container {
  .default-text();
  .mixin-item {
    font-size: 1rem;
  }
}

As you can see, if you add the parentheses next to a selector, it basically creates a sort of function that can be used inside other selectors. Here's the compiled code:

.mixin-container {
  color: red;
}
.mixin-container .mixin-item {
  font-size: 1rem;
}

Let's modify the mixin so that it accepts a parameter (which can also have a default value):

@main-color: red;

.default-text(@color: black) {
  color: @color;
}

.mixin-container {
  .default-text(@main-color);
  .mixin-item {
    font-size: 1rem;
    .default-text();
  }
}

Let's take a look at the compiled code now:

.mixin-container {
  color: red;
}
.mixin-container .mixin-item {
  font-size: 1rem;
  color: black;
}

As you can see, when we don't supply a parameter, the default value is used. You could use a mixin without a default value for parameters, but you need to remember that you have to supply a parameter value, otherwise it's not going to work. You can also have multiple parameters:

@main-color: red;

.default-text(@color: black; @font-size: 1rem) {
  color: @color;
  font-size: @font-size;
}

.mixin-container {
  .default-text(@main-color; 0.75rem);
  .mixin-item {
    font-size: 1rem;
    .default-text();
  }
}

Let's see how the compiled code looks:

.mixin-container {
  color: red;
  font-size: 0.75rem;
}
.mixin-container .mixin-item {
  color: black;
  font-size: 1rem;
}

When you have multiple parameters, you can place them on a single property by using the @arguments variable. Something like this:

@main-color: red;

.default-text(@color: black; @font-size: 1rem) {
  color: @color;
  font-size: @font-size;
}

.flex-flow(@flex-direction: row; @flex-wrap: nowrap) {
  flex-flow: @arguments;
}

.mixin-container {
  display: flex;
  .flex-flow();
  .default-text(@main-color; 0.75rem);
  .mixin-item {
    font-size: 1rem;
    .default-text();
  }
}

Now, let's look at the compiled code:

.mixin-container {
  display: flex;
  flex-flow: row nowrap;
  color: red;
  font-size: 0.75rem;
}
.mixin-container .mixin-item {
  color: black;
  font-size: 1rem;
}

You can check mixins in more detail by taking a gander here.

3. Importing other files

Another useful language extension is the one that allows you to import other files in the same place. This one is very useful because it allows you to create a separate file in which you can keep all your theme related variables and mixins that you can then import in any other file that may require those variables and mixins.

The syntax is pretty simple:

@import "filename.less"

Note that the .less extension is optional and you can use relative paths to navigate to files located in other folders

That about covers it for this tutorial. In the next one, we'll be taking a short look at animations and effects that can be obtained in CSS. See you then.

Whether you are in the product discovery phase or are looking for a partner to launch your software development project, CONTACT US! We’re happy to help you discover the advantages of a dedicated remote team!