#APUNTES DE SASS

---

##Variables.

Las variables almacenan valores que podemos reutilizar.

####Sintaxis

$color-principal: #FFF;

body{
    background-color: $color-principal;
}

####Salida en CSS

body{
    background-color: #FFF;
}

---

##Nesting (Anidación).

La anidación es una herramienta muy útil para mantener el código fuente de la hoja de estilo ligero y eficiente

####Sintaxis

$red: #FF0000;
$green: #00FF00;
$blue: #0000FF;

a {
    color: $red;

    &:visited {
        color: $green;
    }

    &:hover {
        color: $blue;
    }
}

####Salida en CSS

a{
    color: #FF0000;
}

a:visited{
    color: #00FF00;
}

a:hober{
    color: #0000FF;
}

---

##Mixins

Los mixins nos ayudan a reciclar declaraciones para evitar mucho trabajo.

####Sintaxis

#####Declaracion del Mixin

//Sin parámetros

@mixin Nombre_del_Mixin{
    color: $purple;
}

//Con parámetros

@mixin Nombre_del_Mixin($parametro: Valor){
    color: $parametro;
}

#####Implementacion del Mixin

//Sin parámetros

section{
    @include Nombre_del_Mixin;
}

//Con parámetros

section{
    @include Nombre_del_Mixin(valor);
}

---

##Placeholder

Sass tiene un tipo especial de selector conocido como "Placeholder". Se parece y actúa como un selector de clases, pero comienza con un% y no está incluido en la salida de CSS.

####Sintaxis

%toolbelt {
    box-sizing: border-box;
    width: 100%;

    &:hover { border: 2px rgba(#000, .5) solid; }
}

.action-buttons {
    @extend %toolbelt;
    color: #4285f4;
}

.reset-buttons {
    @extend %toolbelt;
    color: #cddc39;
}

####Salida en CSS

.action-buttons, .reset-buttons {
    box-sizing: border-box;
    width: 100%;
}

.action-buttons:hover, .reset-buttons:hover {
    border: 2px rgba(0, 0, 0, 0.5) solid;
}

.action-buttons {
  color: #4285f4;
}

.reset-buttons {
  color: #cddc39;
}

---

##If

Estructura de control de toda la vida

####Sintaxis

$background-color: black;

@if $background-color == black {
    p {
        text-color: white;
    }
}

@else {
    p {
        text-color: black;
    }
}

####Salida en CSS

p{
    text-color: balck;
}

p{
    text-color: white;
}

---

##Funciones

Las funciones le permiten definir operaciones complejas en valores de SassScript que puede reutilizar en toda su hoja de estilo.

####Sintaxis

@function Nombre_de_la_funcion (paramretros){
    @return "algo"
}

---

##Maps

Los maps de Sass contienen pares de claves y valores, y facilitan la búsqueda de un valor mediante su clave correspondiente.

####Sintaxis

$fs: (
    big: 24px,
    normal: 16px,
    small: 14px,
    x-small: 12px
);

p {
    font-size: map-get($fs, normal); //16px
}

small {
    font.size: map-get($fs, x-small); //12px
}

---

##Escape variables

Util cuando necesitamos poner una variable entre comillas (" ").

####Sintaxis

@for $i from 1 to 5 {
    .class-#{$i} {

        &:before {
            content: "#{$i}"
        }
    }
}

####Salida en CSS

.class-1:before {
    content: "1";
}

.class-2:before {
    content: "2";
}

.class-3:before {
    content: "3";

.class-4:before {
    content: "4";

.class-5:before {
    content: "5";
}