Mixin Sass para bocadillos (bubbles) con CSS

See the Pen ByOwPy by lureka (@lureka) on CodePen.

Como últimamente estoy utilizando en mis proyectos indicadores tipo “bocadillos” de comic (bubbles), he montado un pequeño mixin para reutilizarlo que os comparto a continuación.

A este mixin lo bautizamos como “bubble”, para qué complicarnos, al que le pasamos 4 variables:

 @mixin bubble($location, $with, $length, $color) {
 ...
}

Sigue leyendo

Sass: Pasar de “px” a “em” sin heredar tamaños

Si usamos Sass y nos encontramos con la necesidad de pasar valores de “px” a “em” podemos hacer una función muy sencilla que nos solucionará el problema.

Lo normal es que una de las primeras variables que declares en tu Sass sea el tamaño de texto base del sitio. Yo lo llamaré base-font:

$base-font: 16px

La función sería algo así:

@function em($px) {
@return ($px / $base-font) * 1em;
}

Sigue leyendo