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

Trabajar con Sass y Compass en WordPress

Sass y Compass en WordPress

Si quieres trabajar con Sass y Compass en WordPress para crear tu propio tema te recomiendo que te bases en uno tipo _s. Tiene un CSS mínimo y está pensado precisamente para crearlo desde cero.

Entiendo que ya utilizas Sass y Compass en tus proyectos, si no sabes de que te hablo empieza mirándote la estupenda presentación de Sass y Compass de Leandro D’Onofrio (@dzignus) y visita el “site” del proyecto http://sass-lang.com/ donde te explican en qué consiste y cómo instalártelo según tu sistema operativo.

Sigue leyendo