Compass-like mixins

První Compass verze 0.6.1 vznikla již v roce 2009 a Compass získal na popularitě. Byl ale dost pomalý a hlavně v roce 2014 proběhl poslední hotfix a od té doby již není nadále vyvíjen ani spravován. Některé funkcionality mi ale v základním Sassu chyběly, proto jsem si složit pár základních mixinů, abych je mohl i nadále používat jako v Compassu.

Generováním CSS sprite zpětně kompatibilním s Compassem se věnuje samostatný článek.

Základní mixiny a funkce

Základem jsou následující mixin a funkce s drobným nastavením. První funkce image-url podobně jako v Compassu doplní relativní adresu k obrázkům. Druhý vloží celý obrázek ve formátu base64. Poslední mixin vytvoří font-face pravidlo pro daný font. Formátování výsledného CSS je totožné jako u ukázkových CSS při stažení fontu z FontSquirrel.

Zdrojový Scss kód

// Základní nastavení
$fontPath: "../fonts/";
$imagePath: "../img/";

// Doplnění plné URL pro obrázek a vložení Base64 inline obrázku
@function image-url($path){
    @return url(quote($imagePath + $path))
}
// Pro inlinování je nutný doplněk do Grunt/Gulp/Webpacku apod...
@function inline-image($path){
    @return inline(quote($path))
}

// Přejato a upraveno z https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6
@function str-replace($string, $search, $replace: "") {
    $index: str-index($string, $search);

    @if $index {
        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }

    @return $string;
}
@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
    $src: null;
    $srcEot: null;

    $extmods: (
        eot: "?#iefix",
        svg: "#" + str-replace($name, " ", "_")
    );

    $formats: (
        otf: "opentype",
        ttf: "truetype",
        eot: "embedded-opentype"
    );

    @each $ext in $exts {
        $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
        $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
        @if $ext == "eot"{
            $srcEot: append($srcEot, url(quote($fontPath + $path + ".eot")) );
        }
        $src: append($src, url(quote($fontPath + $path + "." + $extmod)) format(quote($format)), comma);
    }

    @font-face {
        font-family: quote($name);
        font-style: $style;
        font-weight: $weight;
        src: $srcEot;
        src: $src;
    }
}

Inlinování obrázků a CSS sprite

Mixin samotný nevloží do CSS už data v base64 formátu, na to je nutný další balíček do devstacku. Jedná se o nástroj PostCSS, do kterého se přidávají pluginy jako například Autoprefixer. Pro inlinování obrázků je to plugin Assets.

Na CSS sprite existují do PostCSS také pluginy, případně se dá využít řešení od Michala na systém SVG ikon. Ukázka konfigurace pro Grunt:

postcss: {
    options: {
        processors: [
            autoprefixer({browsers: '>1%'}),
            assets({
                loadPaths: [wwwAssetsPath+'img/']
            })
        ]
    },
    dist: {
        src: '<%= wwwAssets %>css/*.css'
    }
}

Použití

Použití je totožné jako v Compassu a je velmi jednoduché. V případě font-face mixinu lze v posledním parametru vyjmenovat, které všechny formáty písem mají být obsaženy. Zdrojové CSS:

body{
    background-image: image-url("bg.jpg") repeat;
    background-image: inline-image("bg.jpg");
}

@include font-face($font_family_for_text, "opensans-bold-webfont", bold, null, eot woff2 woff ttf);

Výsledné CSS poté vypadá takto:

body{
    background-image: url("../img/bg.jpg") repeat;    
    background-image: url('data:image/jpeg;...');
}
@font-face{
    font-family: "OpenSans";
    font-weight: bold;

    src: url("../fonts/opensans-bold-webfont.eot");
    src: url("../fonts/opensans-bold-webfont.eot?#iefix") format("embedded-opentype"),
        url("../fonts/opensans-bold-webfont.woff2") format("woff2"),
        url("../fonts/opensans-bold-webfont.woff") format("woff"),
        url("../fonts/opensans-bold-webfont.ttf") format("truetype");
}

---

Používáte jiné vlastní mixiny a funkce v Sassu? Podělte se v komentářích