Stylus is a code pre-processor CSS, which allows us to work more simply in our text editor and then I explain the reasons for my statement.
This is a style sheet as we know it:
body {font: 12px Helvetica, Arial, sans-serif; } a.button {-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
And this would be the same stylesheet created with Stylus:
body font 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
Where are the keys? Where did the semicolons, the colon? Forgotten, Stylus does that for us.
If you are starting with CSS y HTML it is not recommended to use Stylus for the simple fact that you can forget how things really work, but if you already have time in this world and want to save yourself code and work .. go ahead.
Programmers Python will find in Stylus something very similar to what they are adapted to, since you only need to indent correctly for the magic to be done.
Installation
For Stylus work we have to install Node.js which is in the Community branch, so we proceed to do it:
$ sudo pacman -S nodejs
And later we install Stylus. The traditional way would be:
$ npm install -g stylus
It installs fine, but it doesn't work for me, so it is much easier to install from AUR:
$ yaourt -S nodejs-stylus
How to use Stylus
Ok, we already have installed Node.js and we have installed Stylus.. How do we use it? It is simple. Let's say we have a directory with the following files:
- dir - index.html - style.css
What we have to do is create the file style.style, which is the one we are going to work on. In that file we can have something like:
body background-color #ffff font-size 12px a.button color red padding 10px
If we save or make any changes nothing happens, because we are not "compiling" our file. To compile it, what we do is open a terminal in our directory (where the file style.style) and we execute:
stylus -c style.styl
But every time we save the file style.style we would have to execute the code, but luckily it is not necessary, since if we execute the same command, but adding the parameter -w (watch) the following happens:
stylus -c -w style.styl watching /usr/lib/node_modules/stylus/lib/functions/index.styl compiled style.css watching style.styl compiled style.css compiled style.css
In other words, the file is automatically compiled .. Would the result be?
body {background-color: #fff; font-size: 12px} a.button {color: # f00; padding: 10px}
As you can see, not only does our code create us CSS, but it eliminates unnecessary spaces so that our stylesheet weighs less 😀
Not only that, Stylus It allows us to pass files in CSS into their format and the way we can use their syntax is very varied. And this is just a preview. So I encourage you if you are interested, to know a little more about Stylus
It's with:
$ sudo npm install -g stylus
But why? If I only want to use it in my session .. but well, if the problem is that .. 🙂
This is fine at first, but Stylus is used with different plugins as you go along, for example Nib or Stylus auto prefixer.
I think that when you install it with Yaourt it is not saved in / usr / local / lib / node_modules and if you tried to import and use any of the libraries, you would fuck xD
It happens that as I told you in the forum, Stylus is based on using libraries transparently from the terminal, it is the essence of this preprocessor, it does things like:
stylus -u jeet -u rupture -u typographic -u nib -w style.styl
For saying something (you can have an alias or a function or use gulp or grunt, or whatever: 3). The interesting thing about this is that it does not emboss the css out of the box when compiling, but it fills it "dynamically" as within your code you are calling the functions and mixins of the respective libraries.
In effect, it will put flat code that is declared (resets, clearfixes, etc) but it will not make you smoke for example the span () functions of jeet if you do not call them and that is pure love x3
It's a whole world and that's why I'm telling you, installing it that way I don't know what files it falls into and I don't think you can use the extensions so simply because when you use the command line, the –use flag will look inside the folder of stylus installation, with node it is node_modules and it stays where I said above, with Yaourt, NPI xD
interesting!
I suggest you do an Updated tutorial on how to use a SIP number to call cell phones from the computer… for free