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
¿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:
-------------------------------------------------
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:
- Primera Parte: Stylus, una gran preprocesador CSS
- Segunda Parte: Stylus combinado con Sublime Text
- Tercera Parte: Stylus, Compilar en hojas de estilos
- Cuarta Parte: Stylus, Primeros pasos escribiendo CSS
- Quinta Parte: Stylus, utilizando a fondo su sintaxis
-------------------------------------------------
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
0No comments yet
GIF
New