Aprendamos SASS de una manera divertida y sencilla

1. Syntactically Awesome Style Sheets
http://sass-lang.com

2. ¿Pre-procesador?
WTF!
Herramienta que nos permite escribir "pseudo-código CSS" que luego será
convertido (compilado) a CSS real. Ese pseudo-código se conforma de
variables, anidamientos, mixins, operadores, etc.

3. ¿Pre-procesador?
WTF!
Se puede decir que tenemos un lenguaje de programación que genera
CSS. El objetivo de este preprocesador es tener un código más sencillo de
mantener y editar.

4. ¿...?
Aún estamos a tiempo de montar
el puestito de choris en la ruta.

5. Sintaxis
Y ahora, ¿quién podrá ayudarnos?
Podemos escribir Sass de dos formas, la sencilla y la compleja. Las
diferencias entre las dos son muy simples.

6. Scss Sass
● Extensión *.scss
● Requiere uso de { }
● Requiere uso de ;
● No importa la tabulación
● Extensión *.sass
● NO requiere uso de { }
● NO Requiere uso de ;
● Importa mucho la tabulaciónWARNING: sea que cual sea el editor de texto que uses, necesitarás un plugin que permita que tu código en Sass
NO se vea como texto plano. Generalmente dicho plugin se llama "sass".

7. Ahora si,
Ya se va
entendiendo!
Se declina el puestito de choris n_n

8. Variables
Aquí vamos de nuevo!
Variable = código que se almacena para ser reutilizado.
Ahorrarán mucho trabajo cuando tengamos que editar un valor que se
repite a lo largo de nuestro css.

9. Variables
Aquí vamos de nuevo!
Siempre inician con el signo $
Ejemplo:
$base-color: #f3f3f3;

10. En Scss / Sass Compiladas en CSS
$txt-size: 12px;
$txt-color: #f00;
$bg-color: #333;
#cabecera{
color: $txt-color;
font-size: $txt-size;
background-color: $bg-color;
}
#cabecera{
color: #f00;
font-size: 12px;
background-color: #333;
}
Las variables nunca se "imprimen" en el archivo CSS. Se compilan sus datos almacenados.

11. Fucking amazing!
¿Qué clase de
brujería es esto?

12. Anidamientos
Lo que siempre quisimos en CSS
Nos evita tener que repetir una y otra vez los mismos selectores y se
simplifica enormemente la creación de hojas de estilos complejas.

13. En Scss / Sass Compiladas en CSS
.services {
width: 97%;
p{
font-size: $txt-size;
}
h3{
color: $txt-color;
}
}
.services {
width: 97%;
}
.services p{
font-size: 12px;
}
.services h3{
color: #f00;
}

14. Qué maravilla!
Otro más y no
jodemos más!

15. En Scss / Sass Compiladas en CSS
.services {
width: 97%;
p{
font-size: $txt-size;
em{
color: $txt-color;
font-style: normal;
span{
background:
$bg-color;
}
}
}
.services {
width: 97%;
}
.services p{
font-size: 12px;
}
.services p em{
color: #f00;
font-style: normal;
}
.services p em span{
background: #333;
}

16. ATENTIS:
Con un gran poder, viene una gran RESPONSABILIDAD

18. En Scss / Sass Compiladas en CSS
a{
text-decoration: none;
&:hover{
text-decoration: underline;
}
}
.product{
background-color: white;
&:nth-of-type(4){
background-color:
pink;
}
}
a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
.product{
background-color: white;
}
.product:nth-of-type(4){
background-color: pink;
}
Con los anidamientos podemos implementar pseudo-selectores por medio del símbolo &.

20. Mixins
Y esto, ¿con qué se come?
Permiten definir estilos reutilizables en toda la hoja de estilos sin tener que
recurrir a clases CSS no semánticas. Pueden contener reglas CSS y
cualquier otro elemento definido por Sass.

21. En Scss Compiladas en CSS
@mixin border-radius{
border-radius: 20px;
}
@mixin caja-especial{
background: #f2f2f2;
box-shadow: 0 0 10px #000;
}
.services{
width: 45%;
@include border-radius;
@include caja-especial;
}
.services{
width: 45%;
border-radius: 20px;
background: #f2f2f2;
box-shadow: 0 0 10px #000;
}
A este tipo de mixin lo llamamos NO PARAMÉTRICO pues siempre es el mismo.
WARNING: ésta manera de generar y llamar los mixins solo es para Scss, en la sintaxis Sass cambia.

22. En Scss
@mixin border-radius($borde){
border-radius: $borde;
}
@mixin sombra($h-off, $v-off, $blur, $color){
box-shadow: $h-off, $v-off, $blur, $color;
}
.services{
width: 45%;
@include border-radius(40px);
@include sombra(10px, -5px, 12px, #333);
}
Estos son MIXINS PARAMÉTRICOS, pues podemos pasar un valor distinto cada vez que los
deseemos aplicar. Son muy funcionales y se usan bastante.

23. Compilado en CSS
.services{
width: 45%;
border-radius: 40px;
box-shadow: 10px, -5px, 12px, #333;
}
Estos son MIXINS PARAMÉTRICOS, pues podemos pasar un valor distinto cada vez que los
deseemos aplicar. Son muy funcionales y se usan bastante.

24. Are you fucking
kidding me!

25. Operadores
Queré' ma'!
Aquí es donde las matemáticas entran en acción. Pero las cuentas las hará
Sass por nosotros. Podemos sumar, restar, multiplicar, dividir, sacar
valores porcentuales, e incluso jugar con los colores.

26. En Scss / Sass Compiladas en CSS
.container{
width: (1200 - 240) * 1px;
}
.left-box {
float: left;
width: percentage(600 / 960);
}
.right-box {
float: right;
width: percentage(300 / 960);
}
.container{
width: 960px;
}
.left-box {
float: left;
width: 62.5%;
}
.right-box {
float: right;
width: 31.25%;
}
La palabra clave percentage, sacará el porcentaje de una operación cualquiera. Hell Yea!

27. En Scss / Sass Compiladas en CSS
.light-blue{
background: lighten(#00f, 20);
}
.dark-blue{
background: darken(#00f, 20);
}
.light-blue{
background: #6666ff;
}
.dark-blue{
background: #000099;
}
La palabra clave lighten, aclarará un color, mientras que darken lo oscurecerá. El valor numérico es
la cantidad porcentual de aclarado/oscurecido que queremos lograr.

28. En Scss / Sass Compiladas en CSS
$base-color: #00f;
$base-width: 960;
.left-box {
float: left;
width: percentage(600 / $base-width);
}
.light-blue{
background: lighten($base-color, 20);
}
.dark-blue{
background: darken($base-color, 20);
}
.left-box {
float: left;
width: 62.5%;
}
.light-blue{
background: #6666ff;
}
.dark-blue{
background: #000099;
}
Podemos incluso manejar variables en los valores para las operaciones.

29. Ke mosiooooon!

30. Compilación
Noooo, I wanna cry :(
Hasta aquí todo venía divertido, pero Sass es un lenguaje que el navegador
no puede renderizar. Por lo tanto necesitamos traducir (compilar) todo lo
que hacemos con Sass a CSS.

31. Para compilar en MAC y LINUX
Antes de compilar vamos a tener que instalar la gema Sass en nuestra terminal.
Como en OS X ya contamos con Ruby instalado solo tenemos que hacerlo de la manera detallada.

32. sass --watch es la forma en que elegimos que los cambios efectuados se compilen.
sass/styles.scss es la ubicación de nuestro archivo Sass.
css/styles.css será la ubicación y nombre de archivo donde se guardará el CSS.
Previamente tenemos
que ingresar a la carpeta
donde está nuestro
archivo Sass.
Esta es la directriz que
nos permitirá compilar
nuestro archivo Sass en
CSS.
sass --watch sass/styles.scss:css/styles.css
Para compilar en MAC y LINUX

33. Si todo salió bien, vamos a ver lo sombreado en verde.
Y listo, that's it, ahora, cada vez que guardemos nuestro Sass, se compilará en CSS.
Cuando queramos dejar de compilar salimos del proceso con ctrl + c.
Para compilar en MAC y LINUX

34. Para compilar en WINDOWS
Como en WINDOWS no viene instalado Ruby lo primero que haremos es instalarlo.

35. Una vez con Ruby instalado solo tenemos que escribir la línea que se detalla.
Para compilar en WINDOWS

36. Verificamos que la gema Sass haya quedado instalada con el commando sass -v.
De ahí en adelante la compilación se hace de la misma manera que en MAC/LINUX.
Para compilar en WINDOWS

37. This is it!
We're the champions of