Optimiza, Organiza y escribe tu código CSS como un profesional con SASS.

Share on Pinterest
Comparte con tus amigos










Enviar

Si eres diseñador web y/o trabajas todo el tiempo con estilos CSS es importante que como buen profesional utilices herramientas adecuadas que te faciliten el trabajo y hagan el trabajar con CSS algo divertido y fácil.

Es por eso que hoy aprenderemos SASS, un preprocesador CSS que nos permite extender nuestras posibilidades a la hora de escribir estilos CSS con un montón de características como por ejemplo el poder reutilizar nuestro código, ordenarlo correctamente, escribirlo de una manera mucho mas amigable y muchas cosas mas.

Con SASS puedes:

  • Utilizar variables para controlar aspectos de varios elementos como el color, tamaño, fuente.
  • Dividir tu estilos en varios archivos para organizar tu proyecto mejor.
  • Olvidarte de agregar los símbolos de { , } y los puntos y coma ;
  • Anidar selectores para acceder a ellos mas fácilmente.
  • Escribir menos código
  • Utilizar operadores, funciones y mixins
  • Muchas mas

Es importante mencionar que también hay otros preprocesadores como LESS y Stylus, pero SASS es uno de los que mas fuerza lleva debido a sus grandes capacidades y a la gran cantidad de proyectos en los que esta siendo utilizado.

Puedes echarle un ojo a Stylus, otro preprocesador muy bueno del que ya hablamos: Como escribir código CSS dinámico con Stylus, Pre procesador CSS

Aunque SASS es muy grande aprenderlo es muy sencillo, es por eso que este es un curso de tan solo 5 videos. Al final de este curso seras capaz de utilizar este preprocesador en tus proyectos de forma natural dejando atrás cientos de lineas de código desordenado.

Durante el curso Aprenderás a trabajar con:

  • Variables
  • Importación de Archivos (@import)
  • Anidación de Selectores
  • Estructuras de archivos para SASS

Curso Básico de SASS desde 0

Lista de Reproducción: https://www.youtube.com/playlist?list=PLhSj3UTs2_yVyMlZyW-NAbgjtgAgLBzFP

Recursos Utilizados en el curso:

Sitio web de SASS: http://sass-lang.com/

Instalación de SASS: http://sass-lang.com/install

Documentación: http://sass-lang.com/documentation/file.SASS_REFERENCE.html

Proyecto de Clrs: http://clrs.cc/

Share on Pinterest
Comparte con tus amigos










Enviar

FalconMasters Carlos Arturo

  • Rodrigo Tomé

    +FalconMasters mira en esta pagina(https://scotch.io/bar-talk/the-complete-visual-guide-to-sublime-text-3-plugins-part-2) te explica como pasar de sass a css sin la consola de control usando plugins para sublime text ;)

  • KaoruMishimaru

    La verdad que esta bueno, pero prefiero seguir con css :D

    • Al utilizar SASS te puedes ahorrar mucho tiempo, simplemente luego debes compilarlo en CSS que pueda leer el navegador y eso es todo.

      • KaoruMishimaru

        Lo voy a probar a ver que tal :D

  • CAdictivo

    Gracias! Yo utilizo tus tips en mi web, http://cadictivo.blogspot.com

  • Eliezer Pujols

    En mi equipo de desarrollo estamos desarrollando una red social orientada a la gastronomia. Quisieramos saber si nos pueden ayudar compartiendo este enlace o DONANDO. Gracias.

    https://www.indiegogo.com/projects/ziti-food-cooking-app-for-mobile-and-more#/story

  • Pingback: Como hacer una Sección Desplegable con HTML, CSS y Jquery.()

  • Maxi Cardozo

    Hola que tal…. necesito ayuda! en la consola ruby no encuentra la ruta de especificaciones, lo intente de todas maneras y no logro solucionarlo!

  • Rodrigo Soriano

    Como ponemos el @media screen (max-width: 600px;)
    {
    body {
    tal
    }

    }

    en sass porfavooooooor

  • Carlos Arostegui Picon

    que tema tiene tu sublime bro please tell me cheerio

    • Javiier Riiveros

      Space gray

  • David Perez

    Que buenos son tus tutoriales FM, espero que subas otros tipos de diseños… Que dios te bendiga y te de la sabiduria. Saludos

  • Jorge Luis Ardila

    hola Carlos Arturo que buenos videos, oye me podrías decir como se instala el plugin

  • Sprecidesing Ca

    que buen sito …….así podrán progresar en la vida los muchos jóvenes y no tan jóvenes para ser útiles a su patria y a sus familias.

  • Yeny Vasquez

    Carlos Arturo muchas felicitaciones, excelente tutorial. Muy bien explicado, de verdad tienes dominio del tema y muy actualizado.

  • Helany C Garcia

    hola carlos como estas, queria preguntarte si conoces zpanel y si pudieras ayudarme o donde podria conseguir informacion para configurar unas paginas ya lo tengo instalado y todo pero me falta algo. gracias de antemano =)

  • brandi

    cual es el comando para abrir la syntax de sass le doy a ctrl+shift+t y no me aparece utilizo atom y ya tengo el pruggin

  • L productions

    carlos soy un usuario nuevo tengo 15 años y recien empiezo con lo de los sitios web me preguntaba como hacer un buscador para mi pagina web con html y el ,pero que el buscador funcione sin internet sabes como se hace?

  • no entiendo como alguien que pone tutoriales, no tienen un propio diseno de su pagina pues esta es gracias a wordpress que es igual a facebook, phpbb3 etc. un blogerr y mas.. porque no hacen un diseno propio de su web? no es tan facil pero tampoco dificil. y ayuda a los demas a ver sus fuentes. y aprender de tales. en fin bueno el tuto pero malo en la practica.

    • Una disculpa pero no entiendo muy bien a que te refieres, este diseño lo he creado yo mismo.

  • Heydi Irene Molina Murcia

    estoy observando el vídeo y hablas de activar un pluggin dime como por que no te entendí muy bien, saludes..

  • jesus franco123

    Tengo una duda, estoy empezando a trabajar con sass, pero en sublimeText 3, no me funciona el emmet, en archivos sass
    en cambio en archivos css me funciona bien, tengo que intalar algun plugin?

    • carlos rondon

      si tiene un plugin para sass y scss

  • Mauricio Enrique Martinez Espi

    El codigo del index y el css no lo compartes, para seguir bien el tutorial?

  • Cristian JJT

    Hola a todos; el archivo de las variables de los colores ya no se encuentra, alguien podria decirme donde lo puedo descargar o ya lo quitaron para siempre??.. de antemano muchas gracias

  • Cristian JJT

    // VARIABLES
    // – Frios
    $aqua: #7FDBFF
    $blue: #0074D9
    $navy: #001F3F
    $teal: #39CCCC
    $green: #2ECC40
    $olive: #3D9970
    $lime: #01FF70
    // – cálidos
    $yellow: #FFDC00
    $orange: #FF851B
    $red: #FF4136
    $fuchsia: #F012BE
    $purple: #B10DC9
    $maroon: #85144B
    // – Escala de grises
    $white: #FFFFFF
    $silver: #DDDDDD
    $gray: #AAAAAA
    $black: #111111

  • Deyquer Vasquez

    Tengo una gran duda. quiero comenzar bien con los cursos, pero… donde puedo conseguir el CCS y el Javascripts? he estado buscando pero no estoy seguro de las selecciones. necesito ayuda por favor
    solo tengo el Atom

  • Jean Rodriguez

    Muchas gracias por sus tutoriales la verdad me han ayudado bastate sr.carlos saludos desde Venezuela

  • Alexander

    Carlos una pregunta, mi archivo main.sass por que no se convierte en main.css cuando utilizo el codigo: sass main.sass:main.css ?? No se que hacer, ayudaaaaaa

    • Tu archivo de sass quedara intacto, lo que el programa hará es crear un nuevo archivo que sera el de main.css. Si no te lo crea tienes que revisar si te esta dando algún error.


Aprende con nuestros cursos

Escribe CSS como un PRO, Curso Básico de SASS

Escribe CSS como un PRO, Curso Básico de SASS

Optimiza, Organiza y escribe tu código CSS como un profesional con SASS.

Inicia el curso
Curso básico de WordPress desde 0

Curso básico de WordPress desde 0

Aprende a utilizar Wordpress desde 0 y crea sitios web, blogs, galerías e incluso tiendas online.

Inicia el curso
Curso cómo hacer un Sitio Web básico con Bootstrap

Curso cómo hacer un Sitio Web básico con Bootstrap

Aprende como hacer un sitio web básico utilizando lo mejor de Bootstrap

Inicia el curso
Curso completo de Bootstrap desde 0

Curso completo de Bootstrap desde 0

Curso básico de Bootstrap, Aprende a crear sitios web adaptables a dispositivos móviles con este poderoso framework.

Inicia el curso