domingo, 17 de febrero de 2013

Curso Sass y Compass - 15 - Bucle @while

Este es el 15º video del Curso de Sass y Compass en el cual vamos a ver como funciona el bucle @while .

 

El Video



Descargar en HD + Archivos


http://depositfiles.com/files/j0t78jcwi

 

Algunos enlaces ;-)


Todos los videos del curso

PlayList en Youtube

Web oficial de Compass

Web oficial de Sass

En codepen.io : Ejemplo cuadrados

12 comentarios:

  1. Muy buenos los videos amigo !! ya los vi todo y ahora me abro mi siblime text en modo estudio para hacer mis anotaciones! xD

    ResponderEliminar
  2. ¿Cómo es eso de sublime text en modo estudio?

    Bueno, me alegro que te hayan gustado los videos. Yo tengo que seguir publicando más videos, todavía faltan varios. Un saludo ;-)

    ResponderEliminar
  3. en modo estudio me refiero en modo block de notas para anotar y no cedear haha y si!! he!! estan muy buenos!! la de li click a la plubli jijij para que generes mas clicksz!! hahah xD

    ResponderEliminar
  4. Ahh bueno gracias :) Yo espero pronto subir más videos, por diversos temas no he podido subir más videos.

    Gracias :)

    ResponderEliminar
  5. si entiendo! pero estan muy buenos oye! una consulta mira
    @mixin position($type,$top,$right,$bottom,$left){
    @if $type != "relative"{
    position:$type;
    top:$top;
    right:$right;
    left:$left;
    bottom:$bottom;
    }
    @else{
    position:relative;
    }
    }
    ----------------------------------------------------------------------------
    #uno{
    @include position_general(absolute,30px,90px,90px,90px);
    background:red;
    }
    asi si me funciona pero lo que pretendo es solo meter algunos elementos ejemplo
    #uno{
    @include position_general($type:"absolute",$top:"40px",$left:"100px");
    background:red;
    }
    creo que si me doy a entender lo que quiero hacer no? quiero usar solo algunas variables no todas que me recomiendas

    ResponderEliminar
  6. Hola Gus,

    Sí no le asignas un valor por defecto al mixin, Sass obvia que el mixin necesita un valor. El motivo es que a menudo se necesita que los mixins sí tengan valores requeridos o obligatorios.

    Ejemplo:

    @mixin miMixin ($parm) {
    // cosas
    }

    .soyClase {
    @include miMixin (10px) ; // esta bien
    @include miMixin (); // incorrecto, el mixin necesita un argumento
    }

    Para que el mixin no requiera argumentos hay que definirle un parámetro por defecto. Se hace así:

    @mixin miMixin ($parm: 5px) {
    // cosas
    }

    Entonces ahora es valido hacer esto:
    .soyClase {
    @include miMixin (20px); // esta bien
    @include miMixin (); // esta bien
    @include miMixin; // esta bien
    }

    Y otra cosa Sass soporta 6 tipos de variables.
    Numeros, por ejemplo: 1.2, 13, 10px
    String (cadenas de caracteres), por ejemplo: "foo", 'bar', baz
    Colores, por ejemplo: blue, #04a3f9, rgba(255, 0, 0, 0.5)
    Boleanos, por ejemplo: true, false
    Nulos, por ejemplo: null
    Listas de valores, por ejemplo: 1.5em 1em 0 2em, Helvetica, Arial, sans-serif

    Lo digo porque en el mixin que creaste le pasaste valores tipo string:
    position_general($type:”absolute”,$top:”40px”,$left:”100px”);

    Son string ya que van entre comillas, pero no es necesario que todos sean tipo string, tal vez quedaría mejor así:

    @include position($type:absolute, $top: 40px, $left: 100px);

    Cualquier otra duda me dices, no tengo problemas en responder.
    Que estés bien ;-)

    ResponderEliminar
  7. Aquí arregle a la rápida el mixin -> http://codepen.io/Writkas/pen/vJHkp

    ResponderEliminar
  8. mi estimado con el ejemplo que me hizo me aclaro mucho ya me salio como queria asi quedo mire!
    @mixin position($type,$top:null, $right:null, $bottom:null, $left:null){
    @if $type != relative{
    position:$type;
    top:$top;
    right:$right;
    bottom:$bottom;
    left:$left;
    }
    @else{
    position:relative;
    }
    }
    ya con eso! ya puedo posicionar de una forma muy dinamica XD
    el resultado del css es este
    #uno {
    height: 200px;
    position: absolute;
    top: 200px;
    left: 40px;
    background: red;
    width: 200px;
    }
    ve muy limpio y funcional !! mil gracias jojo estamos en contacto! y al pendiente de los nuevos aportes

    ResponderEliminar
  9. Pero te funciona con null? Es que se supone que la propiedad top (por ejemplo) se le debe colocar pixeles, o porcentajes, etc.

    ResponderEliminar
  10. si me funciona por que cuando le pongo el valor null me toma top,left,rigth,bottom como un valor inexistente y no me lo pone en el css hasta no cambiar el null por algo valido que es un valor en px o en em o en % calalo! o igual me equiboque yo pero hasta donde me parece si funciona bien y como espero!!

    ResponderEliminar
  11. Es que lo probé con el shell interactivo de compass y ahí me da un error.

    [writkas@writkas ~]$ compass interactive
    >> top: null;
    SyntaxError: Invalid CSS after "top": expected expression (e.g. 1px, bold), was ": null;"
    >>

    Pero tampoco es que lo haya probado con un proyecto.
    Saludos

    ResponderEliminar
  12. mm.. algo raro XD pero igual la funcion cumple con lo que debe de hacer y en el css resultado me pone lo que le digo que ponga sin nada mas! la usare pero estare al pendiente si llegase a ocurrir algun errorsillo! xD hahaha... !Muchas Gracias!

    ResponderEliminar