Repaso de PUG

doctype html
html
    head
        title usando pug-gulp
        meta(charset="utf-8")
        meta(viewport="")
        link( rel="stylesheet" href="css/main.css" )
     
    body
        header.header#encabezado
            ul
                li: a(href="#") Inicio
                li: a(href="#") Nosotros
                li: a(href="#") Servicios
                li: a(href="#") Contactenos

        //-CONTROL DE TEXTO
        main.main
        section.section2
            p hola soy un simple texto
            | de ejemplo
            spam span
            b negrita
            i italico
         
        //-CONDCIONALES
        -var edad=17;
        if(edad<0)
            p edad incorrecta
        else if(edad<18)
            p menor de edad
        else
            p mayor de edad
         
         
        //-ATRIBBUTOS
        section
            p(class="clase2" id="parrafo1") primera forma
            p.clase3#parrafo2 segunda forma
            p(
                class="clase3"
                id="parrafo3"
            ) tercera forma
        //-VARIABLES
        - let nombre='luis muñoz';
        - let numeros=[2,4,6,8,10];
        each val in numeros
            p=val
         
     
     
        -let menu = ['inicio','contacto','portafolio','ayuda'];
            each list in menu
                li: a(href="#")=list
     
        //-INTERPOLACION DE VARIABLE
        p #{nombre}
     
        //-INTERPOLACION DE ATRIBUTOS
        -let enlace="http://www.youtube.com";
        -let imagen="img/banner1.jpeg";
     
        a(href=enlace) youtube
        img(src="dev/" + imagen)
         
     
        //-ATRIBUTOS DE ESTILOS (string u objeto js)
        p(style="color:red; background:black ") soy un estilo
     
        p(style={
            color: 'red',
            background: 'blue',
            'font-size': '50px',
            padding: '5px'
        }) segunda forma como objeto de js
 
        //-ATRIBUTOS DE CLASE (String o Array)
        p(class="texto rojo") texto string
        p(class=['rojo', 'centrado']) texto array
        -var clases = ['rojo', 'centrado', 'subrayado'];
        p(class=clases)
        br
        // Clase e Id Literal 
        a.azul(class=clases) link
     
        a#top(class=clases) id literal
     
        //-&attributes({})
        p&attributes({
            'data-link':'false',
            'data-text':'true',
            'style':'color:red; background: green'
        }) texto con atributos especiales
        p.clase10#id12&attributes({
            'data-link':'false',
            'data-text':'true'
        })
        //-COMENTARIOS
     
        // esto es un comentario para html en linea
        //
            comentario en bloque para
            el archivo html XD
        //- esto es un comentario para el archivo .pug
         
        //-CASE (Case var when & default)
        -var edad = 18;
        case edad
            when 0
                p tienes 0 años
            when 1
                p tienes un año
            when 2
                p tienes 2 años
            default
                p tienes mas de 3 años

        //- APILAR CASOS
        -var estatura=1;
        case estatura
            when 1
            when 2
            when 3
            when 4
            when 5
            when 6: p tienes estatura gigante
            default: p tienes estatura muy gigante
     
     
        //- DATOS BOOLEAN
        -var verdadero = true;
        -var falso = false;
     
        //-CONDICIONALES (if - unless)
        if(verdadero=== true)
            p verdad
 
        -var edad = 19;
        if(edad<=16)
            p no tienes permiso
        else if(edad > 16 && edad <=20)
            p tienes permiso
        else
            p no estas autorizado
     
        //- ITERACION EACH
     
        -var lista =['item1', 'item2', 'item3','item4'];
        ul
            each valores in lista
                li: a(href="#")=valores
             
 
     
        //- WHILE con Operadores de Incremento y Decremento
        -var  veces=5;
        while (veces < 11)
           p hola
           -veces++
         
        //- UNLESS (inversa if) - si es false ejecuta 
        - let paginas='siempre';
        unless !(paginas === "siempre")
            p verdaderasa

        //- WHILE condicion var--
        //- var cantidad = 3;
        //while (cantidad--)
            p#{cantidad}
         
            //- MIXINS - funciones que permiten crear código reusable
            //- MIXINS con Argumentos
            //- MIXINS con Bloques
            //- MIXINS y Atributos
            //- Resto de Argumentos
     
        mixin listado_tareas
            ul
                li Estudiar
                li programar
                li hacer ejercicios
        //llamar mixin
        +listado_tareas
        +listado_tareas
     
        mixin imprimir(texto)
            p.clase=texto
         
        +imprimir('hola mundo')
        +imprimir('probando texto para el mixin con parametros')
        //mixin en bloque
        mixin section(titulo)
            section
                .wrap 
                    h1.titulo1=titulo
                    if block
                        block
                    else
                        p no hay contenido en bloque q mostrar
        +section('titulo de la seccion')
     
        //-llamando mixin en bloque
        +section('titulo de seccion2')
            p este es un texto en bloque q sera usado despues de ser llamado el mixin seccion qwerty
        //-mixin con atributos
        mixin atributo(titulo)
            section&attributes(attributes)
                h1.titulo2= titulo
     
        +atributo('titulo mixin con atributos')(class="centrado container")


        //- mixin con varios argumentos
        mixin lista(id, ...items)
            ul(id=id)
                each item in items
                    li= item
                 
        +lista('listado', 'programar','ejercicio','ejecutar')
     
     
        //- INCLUDE TEXTO PLANO
        p: include ./dev/texto.txt
     
        //- HERENCIA
        //- heredar desde otro archivo .pug
     
        extends ./dev/plantilla

        // en el archivo de plantilla deberá tener bloques predefinidos para poder llamarlos y editarlos
        //lo llamamos asi:::
            block head   //reemplazara todo el contenido que había en el bloque predefinido head
                title usando block

            append head    //agregara al final del contenido del bloque predefinido head
                title agregando append

            prepend head  //agregara al inicio del contenido del bloque predefinido head
               title agregando prepend