Veamos ahora funcionalidades mas avanzadas 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 dos formas de bucles en SASS
@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; }
$lista:(3px,6px,7px,9px); @each $value in $lista { .g--padding-#{$value} { padding: $value; } }
@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; }
Veamos ahora las funciones de maps y arrays
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
.
nth
. El índice empieza por 1 y no por cero. Eso crea un problema porque en sass los bucles empiezan en 0 y nth
empieza en 1:
$lista:(10px,12px,20px,40px); $indice:1; $valor:nth($lista,$indice);
length
:
$lista:(10px,12px,20px,40px); $tamanyo:length($lista);
Vamos a ver como organizar todo el SASS para crear un pequeño framework.
Hacer mapas con los datos
$paddings:( "0":"0px", "1":"1px", "2":"6px", "3":"12px", "4":"20px" );
Vamos a estandarizar una serie de cosas como tamaños de
Hacer funciones que nos retorne cada uno de esos valores.
getPadding($key)
getMarging($key)
getColorVariants($key)
: Retorna la lista de variaciones de coloresgetColor($key,$index)
: Retorna un valor en concretogetFontSize($key)
getFontFamily($key)
getBoxShadow($key)
getBorderRadious($key)
@function getPadding($key) { @return unquote(map-get($paddings,""+$key)); } @function getColorVariants($key) { @return unquote(map-get($colores,""+$key)); } @function getColor($key,$index) { @return unquote(nth(map-get($colores,""+$key),$index)); }
Hacer funciones que nos retorne la lista de claves.
getPaddingKeys()
getMargingKeys()
getColorKeys()
getFontSizeKeys()
getFontFamilyKeys()
getBoxShadowKeys()
getBorderRadiousKeys()
@function getPaddingKeys() { @return map-keys($paddings); }
Hacer mixins si hay cosas que pueden tener varias propiedades CSS.
@mixin border-radius($key) { -webkit-border-radius: getBorderRadious($key); -moz-border-radius: getBorderRadious($key); border-radius: getBorderRadious($key); } @mixin box-shadow($key) { -webkit-box-shadow: getBoxShadow($key); -moz-box-shadow: getBoxShadow($key); box-shadow: getBoxShadow($key); }
.c-boton { box-shadow: getBoxShadow(2); }
.c-boton { @include box-shadow(2); }
Es mejor en este caso usar los mixin ya que así se incluye -webkit-box-shadow
y -moz-box-shadow
. En otros casos no sería necesario como en el padding.
Por último en varios casos se pueden crear modificadores globales para que se puedan usar ya directamente en clases CSS.
@each $key in getPaddingKeys() { .g--padding-#{$key} { padding: getPadding($key); } } @each $key in getPaddingKeys() { .g--padding-horizontal-#{$key} { padding-top: getPadding($key); padding-bottom: getPadding($key); } }
En el siguiente artículo Utility API, vemos como Boostrap ha creado algo muy similar a lo que estamos haciendo en clase.
En las clases de los componentes (bloques o elementos) usar las funciones y/o los mixins
.c-panel { @include box-shadow(3); padding:getPadding(3); } .c-boton { @include box-shadow(3); padding:getPadding(3); }
Enlaces con mas información de SASS:
Para terminar vamos a contar las diversas opciones para poner una sombra a un div:
getShadow($key)
de forma que retorne cada una de los sombreados. Sabiendo que las claves empiezan en 0.getShadowKeys()
de forma wue retorne todas las claves, empezando por 0.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
g--shadow-0 { } g--shadow-1 { } g--shadow-2 { } g--shadow-3 { } g--shadow-4 { }
Siendo cada clase la correspondiente a cada una de las posibles sombras.
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; }
Modifica la página del tema anterior para organizar todo de forma que los valores estén estandarizados, usando funciones y usando mixins