Home | Clases | Sass y SCSS | Funciones e interpolado

Funciones e interpolado


Introducción

En este apartado trabajaremos con todo lo anterior e introduciremos los siguientes conceptos:

  • Funciones incluidas
  • Interpolado


Funciones incluidas

Además de la posibilidad de definir nuestras propias funciones, que veremos más adelante, Sass/SCSS viene con gran cantidad de funciones predefinidas a las que podremos llamar utilizando la sintaxis estándar de CSS y, en algunos casos, una sintaxis especial de Sass.

Estas funciones predefinidas están divididas en categorías que se corresponden en la mayoría de los casos con los tipos de variables definidos anteriormente:

  • Funciones de CSS, aquéllas que no son reconocidas por Sass como propias y que se compilarán como funciones de CSS estándar (var(), calc(), url(), etc.)
  • Funciones de Números, normalmente de carácter matemático
  • Funciones de Strings, para crearlos, combinarlos, dividirlos y hacer búsquedas
  • Funciones de Colores, para generarlos, mezclarlos o modificarlos
  • Funciones de Listas, para acceder a ellas o modificarlas
  • Funciones de Mapas, para trabajar con ellos
  • Funciones de Selectores, para acceder al motor de selectores de Sass
  • Funciones de Introspección, para mostrar detalles de la forma interna de trabajar de Sass


Funciones de Números

  • abs($number): Devuelve el valor absoluto del número dado.
  • ceil($number): Devuelve el entero superior al número dado.
  • comparable($number1, $number2): Devuelve el booleano true si las unidades son compatibles, o false en caso contrario.
  • floor($number): Devuelve el entero inferior al número dado.
  • max($number...): Devuelve el máximo valor a partir de uno o más números dados.
  • min($number...): Devuelve el mínimo valor a partir de uno o más números dados.
  • percentage($number): Convierte un número sin unidades dado (Normalmente entre 0 y 1) a porcentaje (es lo mismo que $number * 100)
  • random($limit: null): Si $limit es null, devuelve un número aleatorio entre 0 y 1. Si $limit >= 1, devuelve un número aleatorio entre 1 y $limit.
  • round($number): Devuelve el entero más cercano (por arriba o por abajo al número dado.
  • unit($number): Devuelve un string con las unidades número dado (una cadena vacía si no tuviera unidades). Solo es recomendable su uso para debug.
  • unitless($number): Devuelve el booleano true si el número dado no tiene unidades, false en caso contrario.


SCSS

@debug abs(10px); // 10px
@debug abs(-10px); // 10px

@debug ceil(4); // 4
@debug ceil(4.2); // 5
@debug ceil(4.9); // 5

@debug comparable(2px, 1px); // true
@debug comparable(100px, 3em); // false
@debug comparable(10cm, 3mm); // true

@debug floor(4); // 4
@debug floor(4.2); // 4
@debug floor(4.9); // 4

@debug max(1px, 4px); // 4px

$widths: 50px, 30px, 100px;
@debug max($widths...); // 100px

@debug min(1px, 4px); // 1px

$widths: 50px, 30px, 100px;
@debug min($widths...); // 30px

@debug percentage(0.2); // 20%
@debug percentage(100px / 50px); // 200%

@debug random(); // 0.2821251858
@debug random(); // 0.6221325814

@debug random(10); // 4
@debug random(10000); // 5373

@debug unit(100); // ""
@debug unit(100px); // "px"
@debug unit(5px * 10px); // "px*px"
@debug unit(5px / 1s); // "px/s"

@debug unitless(100); // true
@debug unitless(100px); // false


Nota: Los ejemplos en Sass serían idénticos si quitáramos los ;


Funciones de Strings

  • quote($string): Devuelve el string dado entre comillas.
  • str-index($string, $substring): Devuelve el índice de la primera ocurrencia de $substring en $string o null si no la encuentra.
  • str-insert($string, $insert, $index): Devuelve una copia de $string con $insert añadido en $index. Si $index es mayor que la longitud de $string, $insert se añade al final, y si $index es menor que la longitud negativa de $string, $insert se añade al principio.
  • str-length($string): Devuelve el número de caracteres en $string.
  • str-slice($string, $start-at, $end-at: -1): Devuelve la parte de $string que desde el índice $start-at hasta el índice $end-at (ambos incluidos).
  • to-upper-case($string): Devuelve una copia de $string con los caracteres ASCII convertidos a mayúsculas.
  • to-lower-case($string): Devuelve una copia de $string con los caracteres ASCII convertidos a minúsculas.
  • unique-id(): Devuelve un string aleatorio sin comillas válido como identificador único CSS.
  • unquote($string): Devuelve el string dado sin comillas.


SCSS

@debug quote(Helvetica); // "Helvetica"
@debug quote("Helvetica"); // "Helvetica"

@debug str-index("Helvetica Neue", "Helvetica"); // 1
@debug str-index("Helvetica Neue", "Neue"); // 11

@debug str-insert("Roboto Bold", " Mono", 7); // "Roboto Mono Bold"
@debug str-insert("Roboto Bold", " Mono", -6); // "Roboto Mono Bold"

@debug str-insert("Roboto", " Bold", 100); // "Roboto Bold"
@debug str-insert("Bold", "Roboto ", -100); // "Roboto Bold"

@debug str-length("Helvetica Neue"); // 14
@debug str-length(bold); // 4
@debug str-index(""); // 0

@debug str-slice("Helvetica Neue", 11); // "Neue"
@debug str-slice("Helvetica Neue", 1, 3); // "Hel"
@debug str-slice("Helvetica Neue", 1, -6); // "Helvetica"

@debug to-upper-case("Bold"); // "BOLD"
@debug to-upper-case(sans-serif); // SANS-SERIF

@debug to-upper-case("Bold"); // "bold"
@debug to-upper-case(SANS-SERIF); // sans-serif

@debug unique-id(); // uabtrnzug
@debug unique-id(); // u6w1b1def

@debug unquote("Helvetica"); // Helvetica
@debug unquote(".widget:hover"); // .widget:hover


Nota: Los ejemplos en Sass serían idénticos si quitáramos los ;


Funciones de Colores

  • adjust-color($color, $red: null, $green: null, $blue: null, $hue: null, $saturation: null, $lightness: null, $alpha: null): Incrementa o decrementa ciertas propiedades del color dado según los valores de entrada, que deben ser válidos y sin unidades.
  • adjust-hue($color, $degrees): Incrementa la propiedad hue del color dado según el valor de $degrees, que debe ser un número entre -360deg y 360deg.
  • alpha($color): Devuelve el canal alpha entre 0 y 1 del color dado. Es idéntica a opacity($color).
  • blue($color): Devuelve el canal blue entre 0 y 255 del color dado. De igual forma podemos usar red() o green().
  • hue($color): Devuelve el canal hue como ángulo entre 0 y 360 del color dado.
  • saturation($color): Devuelve el canal saturation como porcentaje entre 0% y 100% del color dado. De igual forma podemos usar lightness($color).
  • change-color($color, $red: null, $green: null, $blue: null, $hue: null, $saturation: null, $lightness: null, $alpha: null): Ajusta ciertas propiedades del color dado según los valores de entrada, que deben ser válidos y sin unidades.
  • complement($color): Devuelve el color complementario RGB (que si se suman e cancelan entre si) del color dado. Es idéntica a adjust-hue($color, 180deg).
  • darken($color, $amount): Hace $color más oscuro decrementando el canal lightness con un $amount entre 0% y 100%.
  • desaturate($color, $amount): Hace $color más desaturado decrementando el canal saturation con un $amount entre 0% y 100%.
  • grayscale($color): Devuelve un color en escala de grises con el mismo lightness que $color. Es idéntico a change-color($color, $saturation: 0%).
  • hsl($hue $saturation $lightness): Devuelve el color con los valores dados. También se puede escribir como hsl($hue $saturation $lightness / $alpha), hsl($hue, $saturation, $lightness, $alpha: 1), hsla($hue $saturation $lightness), hsla($hue $saturation $lightness / $alpha) o hsla($hue, $saturation, $lightness, $alpha: 1).
  • invert($color, $weight: 100%): Devuelve el inverso o negativo de $color.
  • lighten($color, $amount): Hace $color más claro incrementando el canal lightness con un $amount entre 0% y 100%.
  • mix($color1, $color2, $weight: 50%): Devuelve un color mezcla de los dos dados, siendo $weight opcional y el porcentaje de mezcla entre ambos (100% indica que solo se usa $color1).
  • opacify($color, $amount): Hace $color más opaco decrementando el canal alpha con un $amount entre 0 y 1. Es idéntico a fade-in($color, $amount).
  • rgb($red $green $blue): Devuelve el color con los valores dados. También se puede escribir como rgb($red $green $blue / $alpha), rgb($red, $green, $blue, $alpha: 1), rgb($color, $alpha), rgba($red $green $blue) rgba($red $green $blue / $alpha), rgba($red, $green, $blue, $alpha: 1) o rgba($color, $alpha).
  • saturate($color, $amount): Hace $color más saturado incrementando el canal saturation con un $amount entre 0% y 100%.
  • scale-color($color, $red: null, $green: null, $blue: null, $hue: null, $saturation: null, $lightness: null, $alpha: null): Escala ciertas propiedades del color dado según los valores de entrada, que deben ser porcentajes entre -100% y 100%.
  • transparentize($color, $amount): Hace $color más transparente incrementando el canal alpha con un $amount entre 0 y 1. Es idéntico a fade-out($color, $amount).


SCSS

@debug adjust-color(#6b717f, $red: 15); // #7a717f
@debug adjust-color(#d2e1dd, $red: -10, $blue: 10); // #c8e1e7
@debug adjust-color(#998099, $lightness: -30%, $alpha: -0.4); // rgba(71, 57, 71, 0.6)

// Hue 222deg se convierte en 282deg.
@debug adjust-hue(#6b717f, 60deg); // #796b7f

// Hue 164deg se convierte en 104deg.
@debug adjust-hue(#d2e1dd, -60deg); // #d6e1d2

// Hue 210deg se convierte en 255deg.
@debug adjust-hue(#036, 45); // #1a0066

@debug alpha(#e1d7d2); // 1
@debug opacity(rgb(210, 225, 221, 0.4)); // 0.4
@debug alpha(opacity=20); // alpha(opacity=20)

@debug blue(#e1d7d2); // 210
@debug blue(white); // 255
@debug blue(black); // 0

@debug green(#e1d7d2); // 215
@debug green(white); // 255
@debug green(black); // 0

@debug red(#e1d7d2); // 225
@debug red(white); // 255
@debug red(black); // 0

@debug hue(#e1d7d2); // 20deg
@debug hue(#f2ece4); // 34.2857142857deg
@debug hue(#dadbdf); // 228deg

@debug lightness(#e1d7d2); // 85.2941176471%
@debug lightness(#f2ece4); // 92.1568627451%
@debug lightness(#dadbdf); // 86.4705882353%

@debug saturation(#e1d7d2); // 20%
@debug saturation(#f2ece4); // 30%
@debug saturation(#dadbdf); // 7.2463768116%

@debug change-color(#6b717f, $red: 100); // #64717f
@debug change-color(#d2e1dd, $red: 100, $blue: 50); // #64e132
@debug change-color(#998099, $lightness: 30%, $alpha: 0.5); // rgba(85, 68, 85, 0.5)

// Hue 222deg se convierte en 42deg.
@debug complement(#6b717f); // #7f796b

// Hue 164deg se convierte en 344deg.
@debug complement(#d2e1dd); // #e1d2d6

// Hue 210deg se convierte en 30deg.
@debug complement(#036); // #663300

// Lightness 92% se convierte en 72%.
@debug darken(#b37399, 20%); // #7c4465

// Lightness 85% se convierte en 45%.
@debug darken(#f2ece4, 40%); // #b08b5a

// Lightness 20% se convierte en 0%.
@debug darken(#036, 30%); // black

// Saturation 100% se convierte en 80%.
@debug desaturate(#036, 20%); // #0a335c

// Saturation 35% se convierte en 15%.
@debug desaturate(#f2ece4, 20%); // #eeebe8

// Saturation 20% se convierte en 0%.
@debug desaturate(#d2e1dd, 30%); // #dadada

// #d2e1dd tiene saturación 20%, y con desaturate() resta el 30% con lo que devuelve gris. Si no es el efecto deseado debemos usar scale-color(), que lo hará un 30% menos saturado.
@debug desaturate(#d2e1dd, 30%); // #dadada
@debug scale-color(#6b717f, $saturation: -30%); // #6e727c

@debug grayscale(#6b717f); // #757575
@debug grayscale(#d2e1dd); // #dadada
@debug grayscale(#036); // #333333

@debug hsl(210deg 100% 20%); // #036
@debug hsl(34, 35%, 92%); // #f2ece4
@debug hsl(210deg 100% 20% / 50%); // rgba(0, 51, 102, 0.5)
@debug hsla(34, 35%, 92%, 0.2); // rgba(242, 236, 228, 0.2)

@debug invert(#b37399); // #4c8c66
@debug invert(black); // white
@debug invert(#550e0c, 20%); // #663b3a

// Lightness 46% se convierte en 66%.
@debug lighten(#6b717f, 20%); // #a1a5af

// Lightness 20% se convierte en 80%.
@debug lighten(#036, 60%); // #99ccff

// Lightness 85% se convierte en 100%.
@debug lighten(#e1d7d2, 30%); // white

@debug mix(#036, #d2e1dd); // #698aa2
@debug mix(#036, #d2e1dd, 75%); // #355f84
@debug mix(#036, #d2e1dd, 25%); // #9eb6bf
@debug mix(rgba(242, 236, 228, 0.5), #6b717f); // rgba(141, 144, 152, 0.75)

@debug opacify(rgba(#6b717f, 0.5), 0.2); // rgba(107, 113, 127, 0.7)
@debug fade-in(rgba(#e1d7d2, 0.5), 0.4); // rgba(225, 215, 210, 0.9)
@debug opacify(rgba(#036, 0.7), 0.3); // #036

@debug rgb(0 51 102); // #036
@debug rgb(95%, 92.5%, 89.5%); // #f2ece4
@debug rgb(0 51 102 / 50%); // rgba(0, 51, 102, 0.5)
@debug rgba(95%, 92.5%, 89.5%, 0.2); // rgba(242, 236, 228, 0.2)

@debug rgb(#f2ece4, 50%); // rgba(242, 236, 228, 0.5);
@debug rgba(rgba(0, 51, 102, 0.5), 1); // #003366

// Saturation 50% se convierte en 70%.
@debug saturate(#c69, 20%); // #e05299

// Saturation 35% se convierte en 85%.
@debug desaturate(#f2ece4, 50%); // #ebebeb

// Saturation 80% se convierte en 100%.
@debug saturate(#0e4982, 30%) // #004990

@debug scale-color(#6b717f, $red: 15%); // #81717f
@debug scale-color(#d2e1dd, $lightness: -10%, $saturation: 10%); // #b3d4cb
@debug scale-color(#998099, $alpha: -40%); // rgba(153, 128, 153, 0.6)

@debug transparentize(rgba(#6b717f, 0.5), 0.2) // rgba(107, 113, 127, 0.3)
@debug fade-out(rgba(#e1d7d2, 0.5), 0.4) // rgba(225, 215, 210, 0.1)
@debug transparentize(rgba(#036, 0.3), 0.3) // rgba(0, 51, 102, 0)


Nota: Los ejemplos en Sass serían idénticos si quitáramos los ;


Funciones de Listas

  • append($list, $val, $separator: auto): Devuelve una copia de $list con $val añadido al final de la misma.
  • index($list, $value): Devuelve el índice de $value si está en la lista o null en caso contrario.
  • is-bracketed($list): devuelve true si la lista tiene corchetes o false en caso contrario.
  • join($list1, $list2, $separator: auto, $bracketed: auto): devuelve una nueva lista con los valores de $list1 seguido de los valores de $list2, con el $separator indicado y entre corchetes si $bracketed es true.
  • length($list): devuelve la longitud de la lista.
  • list-separator($list): devuelve el separador utilizado (espacio por defecto o coma).
  • nth($list, $n): devuelve el elemento con índice $n de $list, contando desde el final si $n es negativo y devolviendo un error si no existe el índice.
  • set-nth($list, $n, $value): Devuelve una copia de $list con el elemento de índice $n reemplazado por $value, , contando desde el final si $n es negativo y devolviendo un error si no existe el índice.
  • zip($lists...): Combina cada lista en $lists en una única lista de sub-listas de longitud la más corta de las sub-listas y separada por comas.


SCSS

@debug append(10px 20px, 30px); // 10px 20px 30px
@debug append((blue, red), green); // blue, red, green
@debug append(10px 20px, 30px 40px); // 10px 20px (30px 40px)
@debug append(10px, 20px, $separator: comma); // 10px, 20px
@debug append((blue, red), green, $separator: space); // blue red green

@debug index(1px solid red, 1px); // 1
@debug index(1px solid red, solid); // 2
@debug index(1px solid red, dashed); // null

@debug is-bracketed(1px 2px 3px); // false
@debug is-bracketed([1px, 2px, 3px]); // true

@debug join(10px 20px, 30px 40px); // 10px 20px 30px 40px
@debug join((blue, red), (#abc, #def)); // blue, red, #abc, #def
@debug join(10px, 20px); // 10px 20px
@debug join(10px, 20px, $separator: comma); // 10px, 20px
@debug join((blue, red), (#abc, #def), $separator: space); // blue red #abc #def
@debug join([10px], 20px); // [10px 20px]
@debug join(10px, 20px, $bracketed: true); // [10px 20px]

@debug length(10px); // 1
@debug length(10px 20px 30px); // 3
@debug length((width: 10px, height: 20px)); // 2

@debug list-separator(1px 2px 3px); // space
@debug list-separator(1px, 2px, 3px); // comma
@debug list-separator('Helvetica'); // space
@debug list-separator(()); // space

@debug nth(10px 12px 16px, 2); // 12px
@debug nth([line1, line2, line3], -1); // line3

@debug set-nth(10px 20px 30px, 1, 2em); // 2em 20px 30px
@debug set-nth(10px 20px 30px, -1, 8em); // 10px, 20px, 8em
@debug set-nth((Helvetica, Arial, sans-serif), 3, Roboto); // Helvetica, Arial, Roboto

@debug zip(10px 50px 100px, short mid long); // 10px short, 50px mid, 100px long
@debug zip(10px 50px 100px, short mid); // 10px short, 50px mid


Nota: Los ejemplos en Sass serían idénticos si quitáramos los ;


Funciones de Mapas

  • keywords($args): Devuelve un mapa con las keywords pasadas a un mixin o función con argumentos opcionales (estando estos en forma de lista de argumentos)
  • map-get($map, $key): Devuelve el valor en $map asociado a $key, o null si no lo encuentra
  • map-has-key($map, $key): Devuelve el booleano true si $map tiene un valor asociado a $key, false en caso contrario.
  • map-keys($map): Devuelve una lista separada por comas con todas las claves en $map.
  • map-merge($map1, $map2): Devuelve un nuevo mapa con todas las claves y valores de $map1 y $map2. También se puede usar para añadir sobre-escribir valores en $map1. Si los dos mapas tienen la misma clave, prevalece la de $map2.
  • map-remove($map, $keys...): Devuelve una copia de $map sin los valores asociados de $keys (si alguna de las claves de $keys no existe, será ignorada).
  • map-values($map): Devuelve una lista separada por comas con todos los valores en $map.


SCSS

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map-get($font-weights, "medium"); // 500
@debug map-get($font-weights, "extra-bold"); // null

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map-has-key($font-weights, "regular"); // true
@debug map-has-key($font-weights, "bolder"); // false

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map-keys($font-weights); // "regular", "medium", "bold"

$light-weights: ("lightest": 100, "light": 300);
$heavy-weights: ("medium": 500, "bold": 700);

@debug map-merge($light-weights, $heavy-weights);
// (
// "lightest": 100,
// "light": 300,
// "medium": 500,
// "bold": 700
// )

// map-merge() usado para añadir un par clave/valor.
@debug map-merge($light-weights, ("lighter": 200));
// ("lightest": 100, "light": 300, "lighter": 200)

// map-merge() usado para sobre-escribir un valor.
@debug map-merge($light-weights, ("light": 200));
// ("lightest": 100, "light": 200)

@debug map-remove($font-weights, "regular"); // ("medium": 500, "bold": 700)
@debug map-remove($font-weights, "regular", "bold"); // ("medium": 500)
@debug map-remove($font-weights, "bolder");
// ("regular": 400, "medium": 500, "bold": 700)

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

@debug map-values($font-weights); // 400, 500, 700


Nota: Los ejemplos en Sass serían idénticos si quitáramos los ;


Funciones de Selectores

  • is-superselector($super, $sub): Devuelve el booleano true si $super encaja con al menos todos los elementos con los que selector $sub encaja.
  • selector-append($selectors...): Combina $selectors sin usar combinadores descendentes, esto es, sin espacios entre ellos.
  • selector-extend($selector, $extendee, $extender): Extiende $selector usando la regla @extend.
  • selector-nest($selectors...): Combina $selectors como si estuvieran anidados.
  • selector-replace($selector, $original, $replacement): Devuelve una copia de $selector con todas las instancias de $original reemplazadas por $replacement.
  • selector-unify($selector1, $selector2): Devuelve un selector que encaja solo con elementos que encajen en $selector1 y en $selector2. Devuelve null si no encaja ninguno.
  • simple-selectors($selector): Devuelve una lista de selectores simples en $selector.


SCSS

@debug is-superselector("a", "a.disabled"); // true
@debug is-superselector("a.disabled", "a"); // false
@debug is-superselector("a", "sidebar a"); // true
@debug is-superselector("sidebar a", "a"); // false
@debug is-superselector("a", "a"); // true

@debug selector-append("a", ".disabled"); // a.disabled
@debug selector-append(".accordion", "__copy"); // .accordion__copy
@debug selector-append(".accordion", "__copy, __image"); // .accordion__copy, .accordion__image

@debug selector-extend("a.disabled", "a", ".link"); // a.disabled, .link.disabled
@debug selector-extend("a.disabled", "h1", "h2"); // a.disabled

@debug selector-nest("ul", "li"); // ul li
@debug selector-nest(".alert, .warning", "p"); // .alert p, .warning p
@debug selector-nest(".alert", "&:hover"); // .alert:hover
@debug selector-nest(".accordion", "&__copy"); // .accordion__copy

@debug selector-replace("a.disabled", "a", ".link"); // .link.disabled
@debug selector-replace("a.disabled", "h1", "h2"); // a.disabled

@debug selector-unify("a", ".disabled"); // a.disabled
@debug selector-unify("a.disabled", "a.outgoing"); // a.disabled.outgoing
@debug selector-unify("a", "h1"); // null
@debug selector-unify(".warning a", "main a"); // .warning main a, main .warning a

@debug compound-selectors("a.disabled"); // a, .disabled
@debug compound-selectors("main.blog:after"); // main, .blog, :after


Nota: Los ejemplos en Sass serían idénticos si quitáramos los ;


Funciones de Introspección

  • call($function, $args...): Invoca $function con sus $args y devuelve el resultado.
  • content-exists(): Devuelve el booleano true si un mixin ha pasado un bloque @content, o false en caso contrario (o si es llamada fuera del mixin).
  • feature-exists($feature): Devuelve el booleano true si una cierta implementación de Sass soporta una $feature, o false en caso contrario.
  • function-exists($name): Devuelve el booleano true si existe una función llamada $name, o false en caso contrario.
  • get-function($name, $css: false): Devuelve la función llamada $name.
  • global-variable-exists($name): Devuelve el booleano true si existe una variable global llamada $name, o false en caso contrario.
  • inspect($value): Devuelve $value en formato string. Pensado para debug.
  • mixin-exists($name): Devuelve el booleano true si existe un mixin llamado $name, o false en caso contrario.
  • type-of($value): Devuelve el tipo de $value.
  • variable-exists($name): Devuelve el booleano true si existe una variable llamada $name en el ámbito actual, o false en caso contrario.


SCSS

@debug feature-exists("at-error"); // true
@debug feature-exists("unrecognized"); // false

@debug function-exists("scale-color"); // true
@debug function-exists("add"); // false

@debug global-variable-exists("var1"); // false

$var1: value;
@debug global-variable-exists("var1"); // true

@debug inspect(10px 20px 30px); // unquote("10px 20px 30px")
@debug inspect(("width": 200px)); // unquote('("width": 200px)')
@debug inspect(null); // unquote("null")
@debug inspect("Helvetica"); // unquote('"Helvetica"')

@debug mixin-exists("shadow-none"); // false

@mixin shadow-none {
box-shadow: none;
}

@debug mixin-exists("shadow-none"); // true

@debug type-of(10px); // number
@debug type-of(10px 20px 30px); // list
@debug type-of(()); // list

@debug variable-exists("var1"); // false

$var1: value;
@debug variable-exists("var1"); // true

h1 {
// $var2 is local.
$var2: value;
@debug variable-exists("var2"); // true
}


Nota: Los ejemplos en Sass serían prácticamente idénticos si quitáramos los ; y las { }.


Interpolado

La interpolación es algo que podemos utilizar casi en cualquier lugar de una hoja de Sass/SCSS para incrustar el resultado de una expresión SassScript en CSS, si bien su uso más común es inyectar valores en Strings. Para ello, debemos encerrar dicha expresión mediante #{ } en cualquiera de los siguientes lugares:

  • Selectores en reglas de estilo
  • Nombres de propiedades en declaraciones
  • Valores de propiedades personalizadas
  • Directivas (@)
  • Herencias (@extends)
  • @imports de CSS
  • Strings con o sin comillas
  • Funciones especiales
  • Funciones de CSS
  • Comentarios de tipo loud


Un ejemplo de uso en selectores:

SCSS

@mixin corner-icon($name, $top-or-bottom, $left-or-right) {
.icon-#{$name} {
background-image: url("/icons/#{$name}.svg");
position: absolute;
#{$top-or-bottom}: 0;
#{$left-or-right}: 0;
}
}

@include corner-icon("mail", top, left);


Sass

@mixin corner-icon($name, $top-or-bottom, $left-or-right)
.icon-#{$name}
background-image: url("/icons/#{$name}.svg")
position: absolute
#{$top-or-bottom}: 0
#{$left-or-right}: 0



@include corner-icon("mail", top, right)


CSS

.icon-mail {
background-image: url("/icons/mail.svg");
position: absolute;
top: 0;
left: 0;
}



Y otro de uso en Strings:

SCSS

@mixin inline-animation($duration) {
$name: inline-#{unique-id()};

@keyframes #{$name} {
@content;
}

animation-name: $name;
animation-duration: $duration;
animation-iteration-count: infinite;
}

.pulse {
@include inline-animation(2s) {
from { background-color: yellow }
to { background-color: red }
}
}

.example {
unquoted: #{"string"};
}


Sass

@mixin inline-animation($duration)
$name: inline-#{unique-id()}

@keyframes #{$name}
@content


animation-name: $name
animation-duration: $duration
animation-iteration-count: infinite


.pulse
@include inline-animation(2s)
from
background-color: yellow
to
background-color: red

.example
unquoted: #{"string"}


CSS

.pulse {
animation-name: inline-u9mvd993f;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes inline-u9mvd993f {
from {
background-color: yellow;
}
to {
background-color: red;
}
}

.example {
unquoted: string;
}



Referencias


Fecha de publicación: 15/04/2019
Asignaturas: aplicaciones webdiseño de interfaces web
Temas: css css3 sass scss less preprocesadores
Utilizamos cookies propias y de terceros para mejorar su experiencia en la navegación. Al seguir navegando entendemos que acepta su uso.
Si lo desea, consulte nuestras políticas de privacidad y cookies
ENTENDIDO
[X] Cerrar

Contacta conmigo


[X] Cerrar

Acceso alumnos