¡Esta es una revisión vieja del documento!
Veamos ahora funcionalidades mas avanzadas de SASS
Enlaces con mas información de SASS:
Son como trozos de código CSS que puedes añadir en otra clase CSS. Es como llamar a una "función" pero con CSS. Son muy útiles para evitar repetir código CSS.
@mixin box-shadow($color) { -webkit-box-shadow: 2px 10px 24px $color; -moz-box-shadow: 2px 10px 24px $color; box-shadow: 2px 10px 24px $color; } .c-button { color: #FF0000; @include box-shadow(#FF0000); } .c-panel { color: #00FF00; @include box-shadow(#00FF00); }
se transforma en
.c-button { color: #FF0000; -webkit-box-shadow: 2px 10px 24px #FF0000; -moz-box-shadow: 2px 10px 24px #FF0000; box-shadow: 2px 10px 24px #FF0000; } .c-panel { color: #00FF00; -webkit-box-shadow: 2px 10px 24px #00FF00; -moz-box-shadow: 2px 10px 24px #00FF00; box-shadow: 2px 10px 24px #00FF00; }
En SASS también existen funciones "normales" que calculan un valor.
@function getBorderSize($size) { @return 10px * $size; } .c-button { color: #FF0000; border: getBorderSize(2) solid #00FF00; }
se transforma en
.c-button { color: #FF0000; border: 20px solid #00FF00; }
Veamos ahora como usar los arrays
nth
. El índice empieza por 1 y no por cero.
$lista:(10px,12px,20px,40px); $indice:1; $valor:nth($lista,$indice);
length
:
$lista:(10px,12px,20px,40px); $tamanyo:length($lista);
Veamos ahora las funciones de maps
map-get
:
$mapa:( "a": enero, "b": febrero ); $clave:a; $valor:map-get($mapa,$clave);
$mapa:( "a": enero, "b": febrero ); $keys:map-keys($mapa);
Se obtiene un array los valores a
y b
.
Es un bucle desde el valor inicial al final-1
@for $i from 0 to 4 { .g--border-#{$i} { border: 10px * $i solid #00FF00; } }
se transforma en
.g--border-0 { border: 0px solid #00FF00; } .g--border-1 { border: 10px solid #00FF00; } .g--border-2 { border: 20px solid #00FF00; } .g--border-3 { border: 30px solid #00FF00; }
Es un bucle desde el valor inicial al final
@for $i from 0 through 4 { .g--border-#{$i} { border: 10px * $i solid #00FF00; } }
se transforma en
.g--border-0 { border: 0px solid #00FF00; } .g--border-1 { border: 10px solid #00FF00; } .g--border-2 { border: 20px solid #00FF00; } .g--border-3 { border: 30px solid #00FF00; } .g--border-4 { border: 40px solid #00FF00; }
Recorre los elementos de una lista
$lista:(3px,6px,7px,9px); @each $value in $lista { .g--padding-#{$value} { padding: $value; } }
.g--padding-3px { padding: 3px; } .g--padding-6px { padding: 6px; } .g--padding-7px { padding: 7px; } .g--padding-9px { padding: 9px; }
Para recorrer un map la forma más sencilla es la siguiente:
$map:( "s":3px, "m":6px, "l":7px, "xl":9px ); @each $key,$value in $map { .g--padding-#{$key} { padding: $value; } }
.g--padding-s { padding: 3px; } .g--padding-m { padding: 6px; } .g--padding-l { padding: 7px; } .g--padding-xl { padding: 9px; }
@mixin border($size) { $color:#00FF00; @if $size>=3 { $color:#FF0000; } border: $size*2 solid $color; } .c-caja1 { color: #FF0000; @include border(2px); } .c-caja2 { color: #FF0000; @include border(5px); }
se transforma en
.c-caja1 { color: #FF0000; border: 4px solid #00FF00; } .c-caja2 { color: #FF0000; border: 10px solid #FF0000; }
Ya existen una serie de funciones predefinidas en SASS: Sass Color Functions
Entre las mas útiles están:
$color-fondo: #F456E3; $color-borde: darken($color-fondo,30%); .c-caja { background-color: $color-fondo; border: 4px solid $color-borde; }
se transforma en
.c-caja { background-color: #F456E3; border: 4px solid #a60b95; }
Hasta ahora vemos visto como podemos crear una serie de tamaño, color, etc mediante el uso de globales. Vamos a ver ahora como podemos usar esos mismo valores pero dentro de componentes.
La forma de hacerlo es mediante variables de CSS.
Las variables de CSS se crean así:
:root { --color-normal-5: #0056b8; --color-alternativo-0: #ed8936; --color-peligroso-10: #c53030; }
--
Para usar las variables se usa var(--nombre-variable)
.c-button { background-color:var(--color-normal-5) }
Es decir para cada una de las cosas que estandarizemos hay que hacer 2 cosas:
$paddings:( "xl":"0px", "s":"1px", "m":"6px", "l":"12px", "xl":"20px" ); <sxh sass> @each $key,$value in $paddings { .g--padding-#{$key} { padding: $value; } } :root { @each $key,$value in $paddings { --padding-#{$key}:$value; } }
<div class="g--padding-m"></div>
.c-button { padding: var(--padding-m) }
Para terminar vamos a contar las diversas opciones para poner una sombra a un div:
none
.
g--shadow-none { } g--shadow-1 { } g--shadow-2 { } g--shadow-3 { } g--shadow-4 { } g--shadow-5 { }
box-shadow($key)
. Usará las funciones que has creado antes y de forma que tenga las propiedades css de:-webkit-box-shadow
-moz-box-shadow
box-shadow
Haz una función llamada getFontSize($index)
para ayudar a generar tamaños de fuentes. Siendo el parámetro $index
un número entero.
Calcula el tamaño de la fuente con la siguiente fórmula:
$$ {Tamaño \quad fuente \quad en \quad px}=1.2^{\$index}*16 $$
La función retornará el tamaño de la fuente en base al parámetro $index
. Este función tiene 2 números mágicos. El 16 es el tamaño base de la fuente. Es decir cuando vale 0. Y el 1,2 es la tasa de crecimiento. Cuando mayor sea ese número mas rápidamente se hacen grandes los tamaños de fuentes. Una página que hace estos mismos cálculos es Modularscale.
Haz que usando la función getFontSize($tamanyo)
y un bucle se generen automáticamente las siguientes clases CSS:
g--font-size-3s { font-size:9.25px; } g--font-size-2s { font-size:11,11px; } g--font-size-1s { font-size:13,33px; } g--font-size { font-size:16px; } g--font-size-1l { font-size:19.2px; } g--font-size-2l { font-size:23.04px; } ..... g--font-size-6l { font-size:47.775px; }