lunes, 10 de diciembre de 2012

Curso Sass y Compass - 11 - @import y @media queries

Este es el 10º video del curso de Sass y Compass en el cual vamos a ver el uso de @import en Sass y el uso de @media queries en Sass.

 

El Video




 

Descargar en HD + Archivos


http://depositfiles.com/files/qll13jrrw

 

Algunos enlaces ;-)


Todos los videos del curso

Figuras con CSS

Web oficial de Compass

Web oficial de Sass

PlayList en Youtube

5 comentarios:

  1. Genial los videos.

    Gracias

    ResponderEliminar
  2. Estupendo tus tutos sobre sass, de lo mejor y esto se agradece...
    Pero me pregunto si existe la posibilidad de hacer un tuto con sprite, he estado viendo la documentación en: http://compass-style.org/help/tutorials/spriting/ pero no me entero, para ser mas concreto me interesa saber como esta hecho este menú con las imágenes https://myspace.com/discover/videos

    En cada enlace del menú hay dos imágenes es esto lo que me gustaría aprender, gracias de nuevo...

    Salu2

    ResponderEliminar
  3. Ese es el último en el cuál estaba trabajando, pero surgieron algunos problemas. No me cargan los sprites, la verdad no se bien porque. Pero bueno acá te dejo un tutorial en inglés http://youtu.be/Tl6bceyTjFw .

    Espero que te funcione, quizás pronto pueda solucionar el problema y haga el próximo video.

    Saludos

    ResponderEliminar
  4. Ok te comento como voy...

    En la carpeta "img", he creado otra carpeta y la he llamado "iconos", aquí he colocado las imágenes con la extensión png, para generar el sprite...

    Después en el scss he añadido el import de esta manera:
    @import "../img/iconos/*.png";

    Ok después de guardar el archivo, me voy a la carpeta "img" y hay me aparece el sprite...

    en el css me encuentro con esto:

    .iconos-sprite, .nombredelprimericono, .nombredelprimericono:hover {
    background: url('/img/../img/iconos-sb4e94f0062.png') no-repeat;
    }

    He observado que en la url para hacer aparecer a las imágenes se repite el "img", por lo que e optado por borrar el "/img/", quedándome con esto:

    .iconos-sprite, .nombredelprimericono, .nombredelprimericono:hover {
    background: url('../img/iconos-sb4e94f0062.png') no-repeat;
    }

    Para hacer aparecer los iconos he añadido estas dos clases, en el scss:

    .nombredelprimericono{
    background-position: left top;
    background-repeat: no-repeat;
    @include iconos-sprite(nombredelprimericono);
    }

    .nombredelprimericono:hover{
    background-position: left top;
    background-repeat: no-repeat;
    @include iconos-sprite(nombredelprimericono_w);
    }

    Bueno es lo que he podido aberiguar, y se que hay mas formas de añadirlos spriter, asi que sigo a la espera de otro de tus tutos, haber si termino de verlos, y pronto te planteo mas dudas, gracias de nuevo...

    Salu2

    ResponderEliminar
  5. Hola,

    no hay que especificar la carpeta img. Porque ésta ya esta especificada en el archivo config.rb.

    No puedo estar muy ágil con los tutoriales últimamente porque estoy estudiando en la universidad y me come bastante tiempo.

    Saludos y gracias por ver los videos, también me alegra de que estén sirviendo :)

    ResponderEliminar