Curso Básico de Stylus 3 - Mixins

En este tutorial mostramos la utilidad de los mixins y como se utilizan en los archivos Stylus para crear hojas de estilos CSS más rápidas.

Código Stylus:

fuente(size = 10px, family = 'Arial', style = normal)
  font-size size
  font-family family
  font-style style

p
  fuente(20px, 'Arial', normal)

#titulo
  fuente(50px, 'Times New Roman')

.sub-titulo
  fuente(90px, 'Hola',normal)

Código CSS:

p {
  font-size: 20px;
  font-family: 'Arial';
  font-style: normal;
}
#titulo {
  font-size: 50px;
  font-family: 'Times New Roman';
  font-style: normal;
}
.sub-titulo {
  font-size: 90px;
  font-family: 'Hola';
  font-style: normal;
}

Siguenos en: Blogger -- http://codefluid.blogspot.mx Facebook -- https://www.facebook.com/CodeFluid Twitter -- https://twitter.com/CodeFluid GitHub -- https://github.com/CodeFluid Vimeo -- https://vimeo.com/user47266653

Leer Más

Curso Básico de Stylus 2 - Variables

En este curso aprenderemos el uso de las variables en Stylus

Código Stylus

tam = 20px
$fam = 'Comic Sans MS'

span
  font-size tam
  font-family $fam

Código CSS

span {
  font-size: 20px;
  font-family: 'Comic Sans MS';
}

Facebook - https://www.facebook.com/CodeFluid
Twitter - https://twitter.com/CodeFluid
Vimeo - https://vimeo.com/user47266653
GitHub - https://github.com/CodeFluid

Leer Más

Bucle While en Python

En este tutorial se implemento el uso del bucle While y su sintaxis.

Código Python

# Bucle While
contador = 0

while contador < 5:
    print ( 'Numero ', (contador + 1))
    contador = contador + 1
else:
    print ('Bucle terminado')

Leer Más

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;
}

Leer Más