Preprocesador Sass

Buen día queridos Invencers el día de hoy hablaremos más sobre Frontend o bien sobre el diseño que nosotros mostramos a los usuarios en una página web por medio de CSS (Cascading style sheets). Actualmente los desarrolladores pueden hacer los estilos de una página mucho más fácil con ayuda de los preprocesadores CSS y en esta ocasión nosotros hablaremos de Sass.

Preprocesador CSS

Hoy en día al momento de hacer una página web y meter diseño hacemos hojas de estilos css con las cuales nosotros podemos dar forma, cambiar características visuales, darle color y simetría a nuestra página pero al final del día nos encontramos con que esas hojas se hacen demasiado largas y que hay código que vamos repitiendo, haciendo que gastemos mucho tiempo en escribir o bien en darle las mismas características a varias etiquetas, es por eso que se hicieron los preprocesadores css en los cuales se nos permite crear variables, funciones, mixins y reutilizar código.

Los procesadores trabajan mediante un lenguaje script el cual será compilado y como resultado obtendremos un archivo css, es decir nosotros podremos utilizar todos los recursos que hace momento te dije y el preprocesador te lo podrá compilar y crear una hoja css.

Actualmente tenemos tres preprocesadores muy potentes y populares entre los desarrolladores los cuales son: Sass, Less y Stylus los cuales tienen una amplia documentación, ejemplos y frameworks compatibles con ellos.

Sass

Cualquier preprocesador es perfectamente válido. Podríamos sin duda elegir otras alternativas como Less o Stylus y serían buenos para nuestro proyecto, ya que al final todos ofrecen más o menos las mismas utilidades. Pero sin embargo, Sass se ha convertido en el preprocesador más usado y el más demandado.

Al haber recibido un mayor apoyo de la comunidad es más factible que encuentres ofertas de trabajo con Sass o que heredes proyectos que usan Sass, por lo que generalmente te será más útil aprender este preprocesador.

Además, varios frameworks usan Sass, como el caso de Bootstrap. Por ello, si tienes que trabajar con ellos te vendrá mejor aprender Sass.

Instalación:

Para la instalación de Sass primeramente necesitaremos instalar Ruby ya que el compilador está escrito en Ruby https://rubyinstaller.org/ 

Windows
En la linea de comandos colócate en la carpeta de tu proyecto y escribe este comando:

gem install sass

Linux
En la linea de comandos escribe este comando:

sudo gem install sass --no-user-install

Mac OS X
En la linea de comandos colocas sudo en caso de que no tengas los permisos para instalar

sudo gem install sass

Sintaxis Sass:

Esta sintaxis es un poco diferente de la sintaxis de CSS estándar. No difiere mucho. Por ejemplo, te evita colocar puntos y coma al final de los valores de propiedades. Además, las llaves no se usan y en su lugar se realizan indentados.

$color: #F55
h1 
background-color: $color
h2
color: $color

Compilar archivos:
El archivo con el código Sass lo tienes que guardar con extensión .scss por ejemplo estilo.scss
Ahora debes situarte con la terminal en la carpeta donde tengas el archivo scss y escribir este comando:

sass estilo.scss estilo-compilado.css

Resultado

Al finalizar se habrá creado el archivo estilo-compilado.css el cual con el ejemplo anterior de la sintaxis de Sass tendriamos como resultado

h1 {
  background-color: #F55; 
}
h2 {
   color: #f55;
}

Por lo tanto en el archivo index nosotros debemos hacer la referencia al archivo con extensión .css

 <link rel="stylesheet" href="css/estilo-compilado.css"> 

Fuentes:

devcode/preprocesador-css

desarrolloweb/sass

Comparte este Post
  • 3
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    3
    Shares

Deja un comentario

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