Foros del Web » Creando para Internet » CSS »

uso de variables

Estas en el tema de uso de variables en el foro de CSS en Foros del Web. Hola a todos. Buscando por la red encontré estas dos posibles maneras de definir variables en CSS. He visto también algo acerca de LESS. No ...
  #1 (permalink)  
Antiguo 09/06/2012, 13:26
Avatar de oscartt67  
Fecha de Ingreso: abril-2012
Ubicación: fonollosa
Mensajes: 481
Antigüedad: 12 años, 7 meses
Puntos: 97
uso de variables

Hola a todos.
Buscando por la red encontré estas dos posibles maneras de definir variables en CSS.
He visto también algo acerca de LESS.

No me funciona ninguna de las dos maneras. En este foro, hay una entrada del 2010 diciendo que no es posible. Sabeis si ahora ya lo es?

Gracias por vuestra atención.



Código PHP:

/*opcion 1:
:root {
  var-color_primari: #F3D6B;
  var-color_secundari: #774713;
}
*/

/*opcion 2*/
@variables color_primari#F3D6B;color_secundari: #774713;}

.ceramica .contficha{
    
background:var(color_primari);
    
border-top:10px solid var(color_secundari);

  #2 (permalink)  
Antiguo 09/06/2012, 18:11
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 16 años, 8 meses
Puntos: 15
Respuesta: uso de variables

La verdad es una tecnica que hasta ahora veo y google me indica a librosweb, una de mis primeras referencias que si existen(aplicando el un mecanismo propio del servidor en que se este ejecutando-ya que CSS no proee esta caracteristica)... Digamos si el servidor es Apache con PHP , seria crear una variable $color-rojo y si el archivo se llama stylo-screen.css.php, esta varaible se sustituye por lo que el valor que pueda tomar...

No le he echo pero algo asi deduzco. Pero CSS no lo provee
  #3 (permalink)  
Antiguo 09/06/2012, 18:24
Avatar de SPAWN3000  
Fecha de Ingreso: marzo-2008
Ubicación: Bogota
Mensajes: 858
Antigüedad: 16 años, 8 meses
Puntos: 15
Respuesta: uso de variables

Ya investigue y lo que comentas solo será esperar a que todos empresas encargaas del desarrollo de los navegadores se pongan de acuerdo:

Por lo pronto sera continuar con la vieja practica... que al final le permite a la aplicación controlar los colores de css.
Algo asi:
Código:
<link rel="stylesheet" type="text/css" href='/css/style.php' />
El archivo style.php.
Código:
<?php
   $rojo = "#ff0000";
   $blanco = "#FFF";
?>
El codigo html, con esto se sustituye.
Código:
#xinformation { color: <?php echo $blanco; ?>; }
body { color: <?php echo $rojo; ?>; }
Saludos,
  #4 (permalink)  
Antiguo 10/06/2012, 02:59
Avatar de oscartt67  
Fecha de Ingreso: abril-2012
Ubicación: fonollosa
Mensajes: 481
Antigüedad: 12 años, 7 meses
Puntos: 97
Respuesta: uso de variables

Cita:
será esperar a que todos empresas encargaas del desarrollo de los navegadores se pongan de acuerdo
Pues a esperar se ha dicho......

Al final lo he implementado con una función jquery.

Gracias por tu respuesta!
  #5 (permalink)  
Antiguo 10/06/2012, 03:26
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 5 meses
Puntos: 269
Respuesta: uso de variables

Las variables en css, estan aún verdes, o lo que es lo mismo la especificación está en estado de borrador.

Hay 3 alternativas populares: less (basado en javascript), sass(basado en ruby) y stylus(basado en ... creo que en ... javascript), en cualquiera de los casos no estaremos trabajando ni con css, ni con javascript, sino que con un metalenguaje o lenguaje intermedio con sus propias reglas sintacticas. (todos muy bien documentados)
Luego estos archivos se compilaran a un .css final. Esto es bueno, porque dispondremos de un entorno de desarrollo (archivos .less, .sass, etc) lo cual es muy práctico. sass (y creo que less también) permiten trabajar con compass, herramienta que sirve para compilar el código y que aporta en helpers y mixins.
Sass permite trabajar con archivos .scss (sintaxis muy parecida a less y a css en general) y con archivos .sass (sintaxis sin semicolons ni llaves más al estilo de python). Stylus también permite esta doble sintaxis.

Ahora tu dirás: bien pero lo que necesito es pasar un valor desde php a css.
La solucion de SPAWN3000 es una chapuza, no se trabaja así, para eso existen las clases css.
En tu vista -codigo html- creas todas las clases que quieras, y en la hoja de estilos creas todos los estilos que quieras. Y así, cada cosa en su lugar favoreciendo el futuro mantenimiento del código.

Saludos
  #6 (permalink)  
Antiguo 10/06/2012, 06:11
Avatar de oscartt67  
Fecha de Ingreso: abril-2012
Ubicación: fonollosa
Mensajes: 481
Antigüedad: 12 años, 7 meses
Puntos: 97
Respuesta: uso de variables

Gracias por tu respuesta cristian.
El problema que tenia ya lo solucioné como dije, con una función jquery. Sin embargo, continua siendo una chapuzilla para salir del paso.

Y ahora tengo un dilema. Empiezo a documentarme sobre alguna de las tres opciones que me has propuesto o espero a que la especificación del borrador css pasen a alfa?

Tienes idea de para cuando será eso?(1 mes, 6 meses...1 año)

Saludos.

Última edición por oscartt67; 10/06/2012 a las 06:22
  #7 (permalink)  
Antiguo 10/06/2012, 06:24
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 5 meses
Puntos: 269
Respuesta: uso de variables

Empieza a usarlo ya, el conocimiento no ocupa lugar, además de que hay infinidad de tutoriales y la documentación es abundante.
Ni idea cuando va a salir pero de todos modos cuando salga caeremos en el conocido problema de la incompatibilidad hacia atrás sobre todo con internet explorer.
Así que supongo tendremos estos "lenguajes" un buen tiempo.

pd: en jquery tienes addClass() y removeClass()

-

Acá unos temas en donde hablamos de esto:
http://www.forosdelweb.com/f53/algui...n-less-939245/
http://www.forosdelweb.com/f53/stylus-less-953097/

Última edición por cristian_cena; 10/06/2012 a las 06:31 Razón: enlaces
  #8 (permalink)  
Antiguo 10/06/2012, 07:41
Avatar de oscartt67  
Fecha de Ingreso: abril-2012
Ubicación: fonollosa
Mensajes: 481
Antigüedad: 12 años, 7 meses
Puntos: 97
Respuesta: uso de variables

Mirando en el link de less que me dejaste, he visto que se tenian que instalar módulos en el server,

$ npm install less

y eso me echa un poco para atras, ya que trabajo en un monton de servidores diferentes y de los cuales no soy administrador. Es decir, dependo de la voluntad de otros para dichas modificaciones.

Pero en http://www.forosdelweb.com/f53/algui...n-less-939245/ me ha parecido ver que se podia implementar desde js. Es asi? Voy a investigar por ahí...



....y aunque el saber no ocupa lugar, tiempo si ocupa, y de eso, ahora mismo, voy justo.

pd:y también $(selector).css , que es como he solucionado mi problema.

Gracias y saludos!
  #9 (permalink)  
Antiguo 10/06/2012, 09:51
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 5 meses
Puntos: 269
Respuesta: uso de variables

Cita:
Iniciado por oscartt67 Ver Mensaje
Pero en http://www.forosdelweb.com/f53/uso-v...n-less-939245/ me ha parecido ver que se podia implementar desde js. Es asi? Voy a investigar por ahí...
Piensas bien, no hace falta que instales nada en el servidor, ejemplo del sitio de less:
Crea tres archivos:
  • index.html
  • styles.less
  • less.js <--- esta es la librería
Código HTML:
Ver original
  1. <!-- index.html -->
  2. <!DOCTYPE HTML>
  3. <html lang="en-US">
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>hola</title>
  7.         <link rel="stylesheet/less" type="text/css" href="styles.less">
  8.         <script src="less.js" type="text/javascript"></script>
  9.     </head>
  10.     <body>
  11.         <div class="box">hola
  12.             <div>mundo</div>
  13.         </div>
  14.     </body>
  15. </html>
Código CSS:
Ver original
  1. /*style.less*/
  2. @base: #f938ab;
  3. .box-shadow(@style, @c) when (iscolor(@c)) {
  4.   box-shadow:         @style @c;
  5.   -webkit-box-shadow: @style @c;
  6.   -moz-box-shadow:    @style @c;
  7. }
  8. .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  9.   .box-shadow(@style, rgba(0, 0, 0, @alpha));
  10. }
  11. .box {
  12.   color: saturate(@base, 5%);
  13.   border-color: lighten(@base, 30%);
  14.   div { .box-shadow(0 0 5px, 30%) }
  15. }
Cita:
Iniciado por oscartt67 Ver Mensaje
....y aunque el saber no ocupa lugar, tiempo si ocupa, y de eso, ahora mismo, voy justo.
Es cierto, en ningún momento intenté decir que el tiempo es algo que te sobre, me disculpo si sonó de esa manera.
La cuestión es que cualquiera de los dos caminos te llevará tiempo, realmente he encontrado mas documentación sobre less, sass y stylus que gente haciendo cosas con el borrador de la w3c, además de que ya sabemos el dolor de cabeza que nos da la compatibilidad con IE, de ahí mi humilde opinión/sugerencia.
Cita:
Iniciado por oscartt67 Ver Mensaje
Es decir, dependo de la voluntad de otros para dichas modificaciones.
Seria triste que se oponga a instalar una herramienta tan poderosa. No hay dudas de que te servirá mucho usarla.
Desconozco si mediante javascript lado cliente se puede hacer una compilación de los archivos .less en tiempo de ejecución, supongo que no. Y esto de cara a la validación w3c es negativo. (repito, ignoro si existe solución, tal vez la haya)
Sass se compila en ruby por lo cual deberías instalar ruby.
No tengo experiencia con stylus, pero la gente que usa nodejs (javascript en el servidor) lo usa mucho. También se puede usar less del lado del servidor, en los links anteriores hay una prueba hecha con php.
Cita:
Iniciado por oscartt67 Ver Mensaje
pd:y también $(selector).css , que es como he solucionado mi problema.
Si aquí hay ironía lo siento por tu muestra de ingratitud, el comentario carece de inteligencia como para prestarle interés.

Adios y suerte.
  #10 (permalink)  
Antiguo 10/06/2012, 12:12
Avatar de oscartt67  
Fecha de Ingreso: abril-2012
Ubicación: fonollosa
Mensajes: 481
Antigüedad: 12 años, 7 meses
Puntos: 97
Respuesta: uso de variables

Cristian.
Ante todo gracias otra vez por contestar, y gracias por los ejemplos posteados.

En ningún momento, ni por asomo, se me ocurriria mostrar ingratitud a alguien que me está ayudando, de manera correcta, desinteresada y amable.

Comenté lo del tiempo porque para el proyecto actual, no podré implementar less, ni siquiera probarlo, por lo que no podré aplicar tu solución. Solo eso. No podré decirte "Implementado y funcionando!", como me gustaria.

Y en cuanto al .css, pienso que si alguien lee el hilo, .css, junto a addClass y removeClass, le puede ser de interes, de mucho interes.

Nada mas. Solo reiterar que agradezco tu ayuda, valoro tu conocimiento y me gustaria seguir contando también con tu cordialidad.

Saludos.

Etiquetas: variables, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:21.