Check the new version here

Popular channels

CSS3 con variables, funciones y condicionales

Hola

Aquí les traigo otro post con algo muy interesante

Que tal les parece la idea de cuando escribamos código CSS hacerlo con

  • Variables
  • Usar funciones
  • Condicionales
  • Escribir una linea y que automáticamente se creen todos los prefijos de los exploradores

¿te suena interesante?

Bueno lo es!!
Y se llama STYLUS... te mostraré unos ejemplos:

EN CSS sería asi:

.ejemploFunciones {

  color: #a1bc04;
  font-size: 1em;
}
.ejemploFunciones h1 {
  color: #c3d100;
}

Con STYLUS
ejemploFuncion(color1,color2)  // Esto es una funcion, con dos variables
    color color1 // atributo color es igual al valor de la variable color1
    font-size 1em 
    & h1     // Referencia al selector padre

        color color2

//Clase que llama a la funcion
.ejemploFunciones
    // enviamos dos parametros que son variables
    ejemploFuncion(verdeOscuro, verdeClaro)

-------------------------------------

Estos es un ejemplo, quizás lo vea un poco enredado pero te animo que veas el tutorial y como funciona, te vas a dar cuenta que usar este PREPROCESADOR te va ahorrar mucho tiempo... ya no volverás a ver el Código CSS como lo veías antes.

Te dejo el link del tutorial:


Qué es Stylus?


Ellos se describen así:
Stylus es un nuevo lenguaje revolucionario, proporcionando una forma eficiente, dinámica y expresiva para generar CSS. Soporta tanto una sintaxis con sangría y estilo normal CSS.! 

¿Cómo funciona Stylus?

Con Stylus nos olvidamos de los corchetes, los dos puntos y usamos su sintaxis. Cuando termínanos, guardamos el archivo con extensión .styl (style.styl) y lo procesamos convirtiéndolo en un archivo .css (style.css), optimizado y con el menor peso posible.

--------------------------------------



Este post es una breve descripción, espero que con los tutoriales les quede más claro

No olviden seguirme en TWITTER @juksoto



Recuerden dejar puntos!!!!

Hasta la proxima





0
0
0
0
0No comments yet
      GIF
      New