Optimiza, Organiza y escribe tu código CSS como un profesional con SASS.
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/
+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 ;)
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.
Lo voy a probar a ver que tal :D
Gracias! Yo utilizo tus tips en mi web, http://cadictivo.blogspot.com
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
[…] Si quieres aprender SASS aquí tienes un curso genial: https://www.falconmasters.com/cursos/curso-basico-de-sass/ […]
Hola que tal…. necesito ayuda! en la consola ruby no encuentra la ruta de especificaciones, lo intente de todas maneras y no logro solucionarlo!
Como ponemos el @media screen (max-width: 600px;)
{
body {
tal
}
}
en sass porfavooooooor
que tema tiene tu sublime bro please tell me cheerio
Space gray
Que buenos son tus tutoriales FM, espero que subas otros tipos de diseños… Que dios te bendiga y te de la sabiduria. Saludos
hola Carlos Arturo que buenos videos, oye me podrías decir como se instala el plugin
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.
Carlos Arturo muchas felicitaciones, excelente tutorial. Muy bien explicado, de verdad tienes dominio del tema y muy actualizado.
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 =)
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
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?
hola .L productions. te dejo este pequeno tutorial de mi pagina web http://www.keresweb.com/tutoriales/buscador-para-tu-web.php. alli prueva el buscador que estoy usando. y el tutorial para que aprendas a usarlo, ami me a servido mucho. y funciona bien en mi pagina que se llama keresweb. en fin espero te ayude.
unas cositas que hay que componerle es que tienes que poner el url completa en mi caso http://www.keresweb.com/tutoriales/buscador-para-tu-web.php si solo pones http://keresweb.com/tutoriales/buscador-para-tu-web.php el buscador solo da el loading gif. fijate.
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.
estoy observando el vídeo y hablas de activar un pluggin dime como por que no te entendí muy bien, saludes..
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?
si tiene un plugin para sass y scss
El codigo del index y el css no lo compartes, para seguir bien el tutorial?
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
// 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
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
Muchas gracias por sus tutoriales la verdad me han ayudado bastate sr.carlos saludos desde Venezuela
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.
Pregunta si mi computador no tiene start command ¿Que puedo hacer?
FalconMasters una pregunta como hago para descargar el visual studio que utilizas para conectarme a una base de datos de SQL Server porque utilizo Dreamviewer y no me deja conectar a SQL server
FalconMasters como hago para que mis imaganes no se pongan encima de los objetos que dspliegan un boton tipo el boton de categorias que tienes en el menu principal que lo que despliega esta encima
porfavor ayudame
Cual es mejor… stylus, sass o less? o cambiando la pregunta… para empezar cual recomiendas?
Quetal carlos ase unos meses compre tu curso soy nuevo en esto de programacion.
my pregunta es. se puden usar cuantas beses uno kiera un div o un p yo se k lo uniko k no puedes usar mas de una bes es el h1
gracias