About Taringa!

Popular channels

[CSS] Tutorial básico de SASS [Parte 1]




Buenas mis amigos taringueros!

Les vengo a traer un pequeño tutorial de qué y como podremos usar SASS.

Empezemos:

¿Qué es SASS?

SASS es un lenguaje de estilos. Es un lenguaje que no es interpretado, es decir, que hay que construir una vez hemos terminado nuestro trabajo.

La misión del SASS es facilitarnos el trabajo con CSS ya que al final lo que obtendremos un típico archivo .css

SASS trabaja con el lenguaje Ruby, por lo que lo ocuparemos.

¿Qué necesito?

Como SASS trabaja con Ruby es lógico que necesitaremos instalarlo.
Para este tutorial yo usare Sublime Text, pero hay otros editores de texto o IDEs que pueden utilizar.

-Ruby (última versión).
-Sublime Text ()opcional).

Si se deciden a usar el ST ocuparemos:

-Package Control
-Plugin SASS
-Plugin SASS Build
-Plugin SublimeOnSaveBuild (opcional)

Ventajas y desventajas

Pues empezemos por ver las ventajas del SASS

La primera ventaja de SASS es que al igual que en cualquier lenguaje de programación existen variables.
Lo bueno de esto es que en una variable podemos poner tanto colores como fuente o lo que nos de la gana y asi nos podemos ahorrar escribir lo mismo ciento de veces..

La segunda ventaja es que nos ahorramos escribir las llaves {} y los puntos y coma al final de cada propiedad ya que es un lenguaje identado al igual que ruby o python.

Tercera ventaja: nos facilita mucho el nesting o anidamiento pero eso ya lo veremos mas adelante en el tuto.


Las desventajas son:

Pues.. no se que poner acá..

Instalación

Lo primero que ocupamos es instalar Ruby.
Todo acá depende de su Sistema Operativo

Si estas en Linux (como yo) o Mac solo escribes en una terminal

sudo apt-get install ruby

Y luego

sudo gem install sass


Y en Windows:

Vamos a la página para bajar el Ruby http://rubyinstaller.org/downloads/

Y bajamos el siguiente:



Y durante el proceso de instalación debemos marcar la siguiente casilla



Abrimos un cmd y escriben:

gem install sass

Ahora en el Sublime Text:

Instalamos el package control.. Lo pueden Googlear porque depende de la versión de ST que tengan...

Lo siguiente es instalar el plugin SASS y luego SASS Build

Empezemos con el SASS

Ahora que tenemos todo listo para empezar... Vamos al código!!!

Veamos y comparemos la sintaxis de CSS con una de SASS...

Este sería css

nav {
width: 960px;
height: 50px;
margin: auto;
margin-top: 10px;
background: #222;
}


Y este sería uno con SASS

nav
width: 960px
height: 50px
margin: auto
margin-top: 10px
background: #222


Como ven en lugar de poner las propiedades dentro de llaves {} simplemente se tabula antes de cada propiedad y las propiedades no llevan punto y coma ; al final.

Algo importante a comprender es que el SASS no se puede trabajar minimizado hay que respetar las identaciones y poner solo una propiedad por linea

Variables

La gran ventaja de SASS es que tenemos la posiibilidad de usar variables al igual que en lenguajes de programacion...

Esta es la sintaxis de una variable de SASS:

$color : #000


Ejemplo:

$claro : #999
$oscuro : #444

.divClaro
background: $claro
width: 200px
height: 200px

.divOscuro
background: $oscuro
width: 200px
height: 200px


La ventaja de esto es que si tenemos el mismo color muchas veces en el mismo archivo y hay que cambiarlo a gusto del cliente solo tendriamos que cambiar el color en la variable y cuando construimos se cambia en todos los campos.

Y bien, esto es todo por ahora.

Les recomiendo esten atentos a mi perfil ya que próximamente estaré sacando una segunda parte donde veremos mas beneficios del SASS.

Un gran saludo a todos @daniartavia

0No comments yet