A few weeks ago we integrated into our Technical Blog section a new project that Andrei, a great developer in our community, wanted to share with all of us. Now, the project consists of a series of courses created by Andrei with a lot of passion and dedication, giving from his knowledge gathered during years of work and sleepless nights the chance to learn, grow and become our best version in the future. You can find the Introduction - here.
Now let's discover the second part of the course "Learning CSS with Less - Environment Setup"
- Topics of discussion
- Installing everything we need
1. Topics of discussion
In this tutorial, we will discuss what we need in order to be able to write CSS code using Less. So, let's have some fun.
2. Installing everything we need
The instructions below are for Windows users.
CSS with Less is easy enough to write. All you need it a text editor. I usually recommend Notepad++, which you can download here. I usually use Notepad++ because it's free and it has a bunch of programming languages you can write your code in. And while the end result is always a text file, the fact that it highlights certain words when a certain language is selected is of great help.
Now that we have our text editor, we are going to need a compiler that will compile the Less CSS code into regular CSS code that the web browser can understand. For that, we need the node package manager, or npm for short, which is installed when you install Node.JS. If you don't have Node.JS installed, you can download and install it from here. I usually go with the latest version from the LTS tab (which stands for long term support, which means that the development team will only fix any bugs it may find).
If you are unsure about which architecture you need, you can press the Start Menu button on your keyboard, type Computer, then right-click the option that appears and click Properties and you should see your System type (32-bit or 64-bit).
Now that we have Node.JS installed, it's time to create a folder in which we will store everything we write. I recommend creating a folder named Projects and inside it, create another one called less. This is where we will be keeping all of the files for this course.
Once you create that folder, navigate to it, click on the address bar, type cmd, and press Enter. This will open a command prompt. Once a command prompt has opened, type the following command:
npm install -g less
What this does is install the less package on your computer. We need this package because it has the compiler we are looking for (not sure about the droids, but we'll see if we get to that). The -g flag tells npm to install this package globally. That way, you can use it in any folder on your computer.
And yeah, that about covers it for this tutorial. In the next one, we are going to define what CSS is and also write our first pieces of code. See you then.