# Sass

## ¿Qué es Sass?
_Sass_ es un preprocesador que te permite usar funciones que aún no existen en _CSS_, como variables, anidamiento, mixins, herencia y otras ingeniosas ventajas.

## Temario
1. Variables
2. Anidamiento (Nesting)
3. Módulos
4. Mixins
5. Herencia
6. Operadores
7. Compilar Sass

# Variables
En _Sass_ se pueden crear variables para ser utilizadas en diversas líneas, selectores y propiedades dentro del archivo _Sass_. Para crear una variable en _Sass_ debe declararse con la ayuda del símbolo `$`. A continuación un ejemplo:

$primary-color: #061539
$title-font: 'Berkshire Swash', cursive

nav 
    background-color: $primary-color
    font-family: $title-font

En el ejemplo anterior, a diferencia de _CSS_ en _Sass_ se omiten los `;` además, en los selectores se omiten las llaves `{}` para encapsular el código _CSS_. En lugar de `{}` se utiliza la identación para asociar las líneas de código _Sass_ a un selector.

## Mapping
Por otra parte, es posible realizar un mapeo de variables para definir una serie de variables asociadas. Por ejemplo, podemos realizar una variable de mapeo para los colores a utilizar en nuestra aplicación:

$colors: (
    primary: #001b2c,
    secondary: #103753,
    accent: #0978b4
)

nav
    background-color: map-get($colors, primary)
    color: map-get($colors, secondary)

En el ejemplo anterior, declaramos una variable `$colors` de tipo map con 3 colores, posteriormente en el selector _nav_ accedimos a la propiedad _primary_ y _secondary_ de la variable colors, con la ayuda de la palabra reservada `map-get` que recibe como primer parámetro el nombre de la variable y como segundo parámetro el nombre de la propiedad.

# Anidamiento (Nesting)
Otra de las ventajas de _Sass_ es la posibilidad de anidar selectores en el código. Lo anterior supone una ventaja más visual, ya que en muchas ocasiones se cuenta con elementos _HTML_ que contienen etiquetas hijo, es en esos casos donde podemos utilizar el anidamiento de selectores. Aquí un ejemplo:

ul
    li
        background-color: $primary-color
        color: $theme-color
        font-size: 1em
    
    a
        text-decoration: underline
        color: $secondary-color

# Módulos (Modules)
Con _Sass_ es posible partir el código entre diversos archivos, para después unirlo en un solo archivo, para ello, se usan los módulos, con modulos es posible insertar el código _Sass_ de un archivo dentro de otro con el uso de la palabra reservada `@use` seguido del nombre del archivo. Aquí un ejemplo:

//cards.sass
$primary-color: #D432A2
$theme-color: white

.card
    border-radious: 5px
    background-color: $primary-color
    color: $theme-color
    
//styles.sass
@use 'cards'
ul
    border-color: cards.$primary-color
    color: black

En el ejemplo anterior, se tienen dos archivos _Sass_ diferentes, el primero contiene dos variables y el código del selector correspondiente a la clase `.card`. Por otra parte, se tiene otro archivo en el cual se inserta el código del primer archivo con la ayuda de la palabra reservada `@use`. Dentro del segundo archivo, se utiliza la variable declarada en el primer archivo dentro del código de _ul_ en la parte del _border-color_ se hace referencia a la variable _primary-color_.

# Mixins
En algunas ocasiones algunos con _CSS_ nos vemos forzados a declarar líneas de código para especificar atributos para diferentes navegadores. Con _Sass_ existe la posibilidad de realizar una especie de función la cual recibe parámetros y dentro de ella se realizan acciones en _Sass_. Por ejemplo:

=transform($property)
  -webkit-transform: $property
  -ms-transform: $property
  transform: $property
  
.box
  +transform(rotate(30deg))

# Herencia (Extend/Inheritance)
_Sass_ provee la posibilidad de utilizar el concepto de Programación Orientada a Objetos como lo es la herencia. Es decir, puedes agregar código _Sass_ de un selector dentro de otro selector. Aquí un ejemplo:

%message-shared
  border: 1px solid #ccc
  padding: 10px
  color: #333
  
.message
  @extend %message-shared


.success
  @extend %message-shared
  border-color: green


.error
  @extend %message-shared
  border-color: red


.warning
  @extend %message-shared
  border-color: yellow

En el ejemplo anterior, se creo una _placeholder class_ con la ayuda del símbolo `%`, las _placeholder class_ sirven como modelo referencia para replicar el código en diferentes clases de _Sass_. Con la palabra reservada `@extend` se indica que un selector recibe como herencia el código de la _placeholder class_.

# Operadores (Operators)
_Sass_ nos da la posibilidad de trabajar con operadores matemáticos para efectuar cálculos matemáticos como la suma, resta, multiplicación o división. En _CSS_ se puede asociar medidas de tamaño para el _heigh_ o _width_ con pixeles (_px_) o porcentajes (_%_). Con la ayuda de operadores podemos realizar calculos con base en medidas preestablecidas. Aquí un ejemplo:

nav
    width: 450px / 200px * 100%

# Compilar Sass
Como mencionamos al principio _Sass_ es un precompilador de código _CSS_, es decir, al final el código _Sass_ se convertirá a código _CSS_. Para ello, es necesario compilar el código _Sass_ con la ayuda de su compilador asociado. Para acceder al compilador es necesario instalar el compilador, puedes realizarlo mediante _npm_ con el comando:
`npm install -g sass`
Posteriormente, una vez que se instale el compilador _Sass_ podemos compilar el código _Sass_ con el comando:
`sass <nobreDelArchivoSass.sass> <nombreDelArchivoCSS.css>`