Curso Básico 6.2 - Funciones (Nombrar Parámetros) | Stylus

En el siguiente curso se muestra una gran funcionalidad de Stylus que es la de nombrar a los parámetros sin importar su orden, especificando el nombre del parámetro seguida de su valor con el signo de dos puntos (:)

---

Código Stylus

suma(a, b)
  suma = (b * 2px) + (a - 10px)
  return suma


p
  font-size suma(b:10px, a:20px)

Código CSS

p {
  font-size: 30px;
}

---

---

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 6.1 - Funciones (Parámetros Default) | Stylus

En este tutorial se mostró la forma en que se declaran los parámetros con valores predeterminados, por si en algún momento se nos olvida colocar el parámetro.


Código Stylus

suma(a = 10px, b = 10px)
  a+b

body
  margin suma(20px)

Código CSS

body {
  margin: 30px;
}

---

---

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 6 - Funciones (Sintaxis) | Stylus

En este tutorial se muestra la forma en que se declaran y como mandar a llamarlas en cualquier parte de nuestro código

---

Código Stylus

suma(a, b)
  s = a + b
  return s

button
  margin suma(47px, 20px)

Código CSS

button {
  margin: 67px;
}

---

---

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 5 - Interpolación | Stylus

En el siguiente tutorial mostramos la forma en la que se declara una interpolación en Stylus.


Código Stylus

comp(prop, val)
  -webkit-{prop} val
  -moz-{prop} val
  {prop} val

button
  comp('border-radius', 2px 2px)

Código CSS

button {
  -webkit-border-radius: 2px 2px;
  -moz-border-radius: 2px 2px;
  border-radius: 2px 2px;
}

---

---

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 4.1 - Condicionales (unless) | Stylus

En el siguiente tutorial mostramos la manera de declarar la condicional unless y en que consiste.

Código Stylus

size(size)
  unless (size > 20px)
    font-size size+10px

p
  size(12px)

Código CSS

p{
  font-size: 22px;
}

---

---

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 4 - Condicionales (if-else)

En este tutorial mostramos como hacer uso de la condicional if-else

Código Stylus

fuente(size, weight)
  font-size size
  if(weight)
    font-weight bold
  else
    font-weight normal

#titulo
  fuente(20px, false)

Código CSS

#titulo {
  font-size: 20px;
  font-weight: normal;
}

Siguenos en: 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 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

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