Compass-like mixins

Pavel CSS

Ukázka několika Sass mixinů, které umožní používat stejné funkce jako v již zastaralém Compassu. A to vše pouze s čistým Sassem a dalšími Node balíčky do devstacku.

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

Přidat komentář

Právě odpovídáte na existující komentář. Zrušit

Komentáře

Roman Janko

http://rjwebdesign.cz 21.8.2018 16:27

Hezké, nicméně https://github.com/Igosuki/compass-mixins

Odpovědět

Pavel

http://www.kutac.cz/blog/ 22.8.2018 09:36

Zajímavý balíček. Nějak ale nechápu, jak dokáže udělat inline obrázků a sprite. Nenašel jsem tam žádný balíček, který to dělá a čistý SASS to podle mě neumí.

No a navíc hodně mixinů ve složce CSS3 doplňuje prefixované verze. To není ale chování, které v dnešní době očekávám. Navíc když existuje Autoprefixer, který doplní automaticky jen ty nejnutnější podle nastavení podpory prohlížečů.

Přesto pokud někdo potřebuje plnou podporu všech mixinů, může se to hodit.

Roman Janko

http://rjwebdesign.cz 22.8.2018 09:50

Ten link jsem sem hodil proto, protože mi po opuštení Compassu (a RUBY) kvůli rychlosti buildění chyběly nějaké mixiny.

Sprity jsou dneska k čemu? Myslím, že v dnešní době fontových ikon, SVG už nemají zastoupení.

Jinak s autoprefixerem souhlasím, ale pokud to myslíš, jako součástí nějakého tasku v task runneru (Gulp / Grunt) tak i tam si najdeš modul na sprity či inline-obrázky a spoustu dalších věcí.

Novinky z blogu

Zachycení událostí CSS animací v Javascriptu

CSS animace dokázaly na mnoha místech nahradit Javascript, který byl dříve jedinou schůdnou možností. Nejen pro svou jednoduchost jsou stále populárnější. Jenže co, když chci...

Další články