Una tarea pendiente en mi forma de trabajar era usar un pre-procesador de css, por pereza o simplemente por costumbre era escribir mis css y luego cargar con el peso de que los cambios y el código repetido,  aunque existen mas opciones a Sass como Less, Stylus, Css-Crush, Css-On-Diet y PostCSS,  yo he optado por Sass.

Porque Sass?

Sass  es estable y probado en la industria ademas de ser uno de los primeros (2007),  podemos decir que es el lider ya que la mayoría de las empresas o productos desarrollados cuenta con una versión en Sass.

Sass extiende nuestro actual css y nos permite poder incluirse variables , funciones (mixins) , herencias o extender clases entre muchas cosas mas.

Lo que queda claro es que luego que trabajas con un pre-procesador en mi caso Sass , “Sass es par los developers, css es para el browser”.

Instalando Sass

Sass es multiplataforma Mac, Windows o Linux , se apoya en Ruby gems para instalarlo, si usas windows te recomiendo que instale  http://rubyinstaller.org/, en Mac por defecto trae instalado Ruby asi que solo nos tocara instalar Sass desde la terminal usando las gems.

gem install sass

Otra opción es usar http://scout-app.io/ la cual es una aplicación que nos permite compilar nuestro Sass o usar la web Sassmeister.

Usando Sass

Yo para muchas pruebas rapidas me apoyo de Sassmeister, porque me permite tener resultados de forma rapida podemos visualizar en el menu marcar la opcion el html, css y sass ademas compila nuestro sass en tiempo real y nos permite almacenarlos en github.

screen-shot-2016-11-27-at-00-15-40

Variables

Sass nos permite crear variables que representan valores que podemos usarlo a lo largo de nuestro “scss” , podemos crear dos variables con el simbolo de $nombredevariable  e igualarlas a un valor.

Ejemplo:  podemos definir $default-bg: #2992fb o $box-bg , y asignarla a clases .player y menu y tendra el color basado a la variable $default-bg en caso que tengamos que cambiar el color solo tiene que ser en un lugar

sass variables

Mixings

Los mixings son funciones que nos permite reutilizarlas, pasarle parametros o asignar valores por defecto, este nos permite generar codigo.

para definir un mixin escribo @mixin nombre($var1,$var2) { } y para utilizar el mixin en nuestra clase utilizo @include y puedo pasar los parametros y en caso que tenga valores por defecto utilizaria esto o los que se pasen a la funcion.

Esto lo que hara es replicar el resultado de nuestro mixing en nuestra clase pero con los valores que le he suministrado y nos ahorra tiempo a la hora de escribir codigo.

Selectores Anidados

Con Sass podemos usar & para anidar una seleccion de elementos, ejemplo queremos seleccionar un div y las h1 que esten dentro de el,  pero mucho cuidado con abusar del mismo, les recomiendo estas lecturas.

http://thesassway.com/beginner/the-inception-rule
https://www.sitepoint.com/beware-selector-nesting-sass/

Extend

@extend en Sass nos permite heredar de otras clases , es muy util cuando estamos creando componentes y queremos extender la funcionalidad.

extend class sass

Colores

Sass nos provee de ciertas herramientas para facilitar el manejo de los colores, tenemos funciones como darken o lighten en los parametros recibe el color y el % que queremos, si tenemos un $box-color: red podemos asignarlo un 10% mas oscuro o mas claro.

Importando Archivos

Sass nos permite tener nuestros ficheros separados, ejemplo podemos tener _color.scss, _mixings.scss , estos archivos empiezan con _ para que sass no los compile y importarlos en nuestro achivos main.scss.

Ejemplo: main.scss

@import "_colors.scss";
@import "_mixings.scss"

Si deseas saber mas sobre importar archivos u organizar tu estructura de sass te recomiendo:

http://thesassway.com/beginner/how-to-structure-a-sass-project

Play with this gist on SassMeister.

Happy Sass!

 

2 thoughts on “Porque Sass ?

    1. Hola Bernard

      Gracias por comentar, he visto que PostCSS lo estan usando mucha gente en nuevos proyectos ultimamente, aun asi la gran cantidad de proyectos que a dia de hoy usan Sass y Less es “muy alto”, o almenos yo quizas sera el tipo de mercado o cliente que me ha tocado vivir.

      Cuando escribi esto es debido a que he visto aun mucha gente que no un preprocesador y Sass es el que mas comodo y productivo me siento, no he probado PostCSS, sabia de su existencia pero no le he puesto un ojo, pero ya que me lo comentas, pues lo mirare.

      Un Saludo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *