Como usar codigo css en Jade?

Fsg · #1 (**permalink**) 16/08/2012, 17:09

Hola a todos.
Desde hace tiempo que vengo usando un pre-procesador para javascript , el cual es Coffeescript, pero no me habia animado a Jade por que no lo veia de gran utilidad, a diferencia de Coffeescript, que en varios proyectos me ha facilitado mucho el trabajo el desarrollar sobre objetos como Coffeescript lo implementa.

Ahorita ya me han llegado un proyecto algo grande y le vi utilidad a usar Jade por lo que me anime.
De prueba hice una plantilla basica para probarlo

Código:

doctype 5
html(lang="en")
  head
    title= "text"
    style
    script(type='text/javascript')
      if (foo) {
         bar()
      }
  body
    h1 Jade - node template engine
    #container
      h1 <?php echo $hola; ?>

Intente poner la palabra style y vi que si me compila la etiqueta <style>, pero intento poner (solo probe, no tengo ni idea cual es la correcta xD):

Código:

#test
      border-radius:5px

Y me marca error Invalid identation en la linea 6, en donde esta #test .

¿Alguien sabe como puedo trabajar sobre css en Jade?.
Saludos

Fsg · #2 (**permalink**) 18/08/2012, 12:42

¿Alguien que sepa como?

#3 (**permalink**) 18/08/2012, 14:06

Bien mira, lo que pasa es que Jade compila cualquier etiqueta, si tu pones

Código jade:

Ver originalhtml
    body
        etiquetanoexistente

Tu resultado sería algo como

Código HTML:

Ver original<html>
    <body>
        <etiquetanoexistente></etiquetanoexistente>
    </body>
</html>

Hablando sobre css, en jade se declaran capas con los selectores css, por lo tando si haces esto:

Código jade:

Ver originalstyle
    #test
        border-radius:5px

Tu resultado será:

Código HTML:

Ver original<style>
    <div id="test">
        border-radius:5px
    </div>
</style>

Obviamente no se hace visible por que está dentro del head.

Por otro lado, es más recomendable enlazar tu archivo css al documento con la etiqueta link, y hablando de preprocesadores, te recomiendo usar styluss o less, son preprocesadores css muy utiles.

Para enlazar tu documento sería algo como:

Código jade:

Ver originallink(rel='stylesheet/less', href='path/to/style.less')

El resultado será algo como

Código HTML:

Ver original<link rel="stylesheet/less" href="path/to/style.less">

Fsg · #4 (**permalink**) 19/08/2012, 02:14

Cita:

Iniciado por danneg

Bien mira, lo que pasa es que Jade compila cualquier etiqueta, si tu pones

Código jade:

Ver originalhtml
    body
        etiquetanoexistente

Tu resultado sería algo como

Código HTML:

Ver original<html>
    <body>
        <etiquetanoexistente></etiquetanoexistente>
    </body>
</html>

Hablando sobre css, en jade se declaran capas con los selectores css, por lo tando si haces esto:

Código jade:

Ver originalstyle
    #test
        border-radius:5px

Tu resultado será:

Código HTML:

Ver original<style>
    <div id="test">
        border-radius:5px
    </div>
</style>

Obviamente no se hace visible por que está dentro del head.

Por otro lado, es más recomendable enlazar tu archivo css al documento con la etiqueta link, y hablando de preprocesadores, te recomiendo usar styluss o less, son preprocesadores css muy utiles.

Para enlazar tu documento sería algo como:

Código jade:

Ver originallink(rel='stylesheet/less', href='path/to/style.less')

El resultado será algo como

Código HTML:

Ver original<link rel="stylesheet/less" href="path/to/style.less">

Muchas gracias, de hecho despues de mi ultimo mensaje, he estado metiendome a stylus, ya lo tengo entendido,y gracias por el dato, estaba interpretando mal la forma de escribir en Jade.

#5 (**permalink**) 19/08/2012, 16:04

No agradezcas, me agrada ver que la gente se interese por alternativas tan útiles como estas ;)