Sass indentada

<< @debug

Una de las diferencias que podemos encontrar entre sass y scss es la indentación. En lugar de utilizar las llaves como señal de que el contenido que hay entre las llaves pertenece al mismo ámbito/bloque, en sass se utiliza la indentación de la misma forma que se hace con Python. Ejemplo:

.content{
    border: 1px solid #ccc;
    padding: 20px;
    h2{
        font-size: 3em;
        margin: 20px 0;
    }
}

¡Importante! Si os fijáis cada sentencia no se separa por punto y coma en .sass.

Mixin

Otra de las ventajas ya que es “más eficiente” es el uso y declaración del mixin.

@mixin button-base() {
    @include typography(button);
    @include ripple-surface;
    @include ripple-radius-bounded;
    display: inline-flex;
    position: relative;
    height: $button-height;
    border: none;
    vertical-align: middle;
    &:hover { cursor: pointer; }
        &:disabled {
                color: $mdc-button-disabled-ink-color;
        cursor: default;
        pointer-events: none;
    }
}

En las versiones anteriores, se usaba un símbolo de + para indicar que era un include y un = para definir un mixin.

Listas

Los elementos de una lista pueden estar separados por un espacio o por una coma.

$authors: rosa jose lucia pablo
@each $a in $authors
    .author-#{$a}
        background: url(#{$a}.jpg)

Además, también tenemos un conjunto de funciones para trabajar con listas, como puede ser:

  • length: devuelve el número de elementos de una lista
  • append: Devuelve la primera lista, añadiendo al final el nuevo ítem que le pasamos como segundo parámetro
  • join: Combina dos listas
  • index: Devuelve la posición donde se encuentra un determinado ítem y si no existe devuelve false. ¡OJO!, a diferencia de otros lenguajes la primera posición es 1.
  • nth: Devuelve el elemento n de una lista
  • zip: Combina dos listas, devolviendo la combinación de cada una de ellas ítem a ítem y separadas por comas (primer ítem de la lista 1 con el primer ítem de la lista 2, segundo ítem de la lista 1 con el segundo ítem de la lista 2, etc.
$authors: rosa jose lucia pablo
$list: arale goku
$list2: doraemon pokemon
i::before
    content: length($authors) // Devuelve 4
    content: append($authors, marga) // rosa jose lucia pablo marga
    content: join($list, $list2) // arale goku doraemon pokemon
    content: index($authors, lucia) // 3, IMPORTANTE NO EMPIEZA EN 0
    content: index($authors, paco) // false
    content: nth($authors, 3) // lucia
    content: zip($list, $list2) // arale doraemon, goku pokemon

¿Cuándo nos puede resultar útil usar el método zip?

Si tenemos dos listas como pueden ser los autores y dependiendo del autor tenemos que usar un color de fondo distinto, podríamos hacer:

$authors: nick aimee dan drew
$colors: green blue red yellow

$author-style: zip($authors, $colors)

@each $a in $author-style
      .author-#{nth($a,1)}
            background: nth($a,2)

Colores

$venus: #998099
body
    background: scale-color($venus, $lightness: +15%)

Condicionales

Ya vimos cómo hacer condicionales if-else, en este caso, vamos a ver cómo hacerlas, pero como ternarias. if(condición, “valor_cierto”, “valor_falso”)

$theme: light;
header{
    @if $theme == dark {
        background: #000;
    }
    @else {
        background: #fff:
    }
}

Y como esto un largo etcétera para "traducir" la sintaxis de scss a sass. 

<< @debug