Dividing to gain time in development second part (Using Stylus)

In this part we will start to use stylus stylize some elements of our page

4 min readOct 30, 2017

We could go to this heap without any problem, but we can work even more efficiently! The pure CSS can do a lot but we can go much further using a preprocessor. If you do not know the preprocessors are programs that receive an entry, usually a text, by doing conversions in your content that may include conditional substitutes and additions. We will use in our design the pre-processor Stylus which is written in JavaScript and returns us a compiled CSS.

How to install the Stylus?

Before installing the stylus on your machine it is necessary to have Node-Js installed! After installing Node and NPM correctly, open your terminal and enter the following command: npm install stylus -g, this command will download and install the Stylus. You should create a file called main.styl, but before that delete the css files created until then. Easy do not curse me, then, there’s a good reason to do it srsr.

Compiling our CSS

Before compiling our css, create another folder inside the CSS directory with name of: components. After doing this we will create some files with the styl extension, your directory should look like this:

To illustrate a code made in Stylus and show how your compilation process is for CSS write the code below in the main.styl file:

Then open the terminal and send it to open the CSS directory of your project, in case it would be: cd pathPaste / project / CSS /. If the folder path has been opened correctly enter the following command: stylus -w main.styl -o main.css, this command will generate a style sheet named main.css

The result of our style sheet will be this:

Stylus Features

The Stylus has some features that come to be mentioned and one of them as you may have noticed is that we can write codes without the: e; , also as noted we did not use the {} keys. In the in we can also work with traditional means of CSS, but the traditional medium is not graceful to use in the Styl.

We have already discovered how this amazing tool called Stylus works, but we have not yet talked about our first goal with it is to use import of the Stylus, which has a better behavior than pure CSS. To use it is very simple! Just type @import “path / file.styl”, but to not be left doubts about its operation let’s see this in practice. Include the following imports in main.styl:

Then type the following code into the reset.styl file:

If everything has happened correctly you will have a reset compiled for CSS, if the compilation has not occurred correctly check the path of the file written in the import and if in your Reset.styl is something written in the wrong way. The result should be this from the image below.

Comments on the Stylus

The pre-processor Stylus as it is done in JavaScript it allows us to use two types of comments, they are: // comment for a line and / * comment for many lines * /. However, it is worth remembering that our code will be compiled into CSS and the style sheet will not identify the comment of a line, but in a way it is good and we can work with comments to be displayed only in our .styl file. Now let’s go through this knowledge in our project, in the line before our import type //Import of file reset

Note that we did not have the comment being generated in our CSS, but not to be disorganized write the comment of multiple lines so it will also be generated in the CSS file.

Use of Variables

Thanks to the evolution of CSS today we can use two types of variables in the Stylus, which can be the following use cases:

— yellow_color yellow

color var( — yellow_color)

and

yellow_color yellow

color yellow_color

A nice tip if you are going to use the CSS variable is to place them inside the element: root, so you can reuse variables in other elements if you need to.