Curso Básico de Stylus 1 - Introducción a Stylus

Stylus es un pre-procesador de CSS que fue creado por la necesidad de optimizar nuestras hojas de estilo y que gracias a las características que tiene nos podemos deshacer de aquellas tareas que son repetitivas al momento de crear nuestras hojas de estilo.

En este tutorial se muestra la sintaxis de Stylus con un pequeño ejemplo:


Código Stylus

body
    background #123
    border-top 1px solid black

p
    color blue
    font-size 20px
    line-height 20px

Código CSS

body {
    background: #123;
    border-top: 1px solid black;
}

p {
    color: #00f;
    font-size: 20px;
    line-height: 20px;
}