Preprocessing SCSS

31Bře, 2016

Proměnné

Proměnné jsou způsobem, jak ukládat informace, které lze znovu použít v celém stylu. Lze uložit barvy, písmo, nebo jakoukoliv CSS hodnotu, kterou chceme znovu použít. Sass pro proměnou používá symbol dolaru  $. Zde je příklad:

    
    $font-stack: Helvetica, sans-serif;
    $primary-color: #333;
    body {
        font: 100% $font-stack;
        color: $primary-color;
    }
    

Když je Sass zpracován, tak za proměnné   $font-stack a $primary-color se v normálním CSS souboru přiřadí odpovídající hodnoty. To může být velmi užitečné při práci s barvami, zejména u elementů v rámci celého webu.

    
    body {
        font: 100% Helvetica, sans-serif;
        color: #333;
    }
    

Nesting/Hnízdění

V rámci HTML je jasné, že při stylování pomocí CSS je snaha dodržet jasnou a přehlednou hierarchii elementů a tříd. Při detailním stylování vnořených tříd je jasné, že udržet přehlednost v rámci CSS je poměrně složité.

Sass umožňuje hnízdění selektorů v CSS takovým způsobem, který vychází ze stejné vizuální hierarchie jako má HTML. Pokud by se měla dodržet stejná struktura v CSS jako má stylovaný HTML, jednalo by se o složitou k záležitost.

Zde je příklad některých typických stylů pro navigační element v html stránce:

    
    nav {
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        li { display: inline-block; }
        a {
            display: block;
            padding: 6px 12px;
            text-decoration: none;
        }
    }
    

Všimněte si, že selektory  ul , Li , a  jsou vnořeny do elementu  nav. To je skvělý způsob, jak uspořádat CSS a tím jej udělat více čitelným. Při vygenerování CSS bude výsledek:

    
    nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    nav li {
        display: inline-block;
    }
    nav a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
    

Rozdělení

V rámci Sass lze vytvářet dílčí soubory, které obsahují malé fragmenty CSS, které se mohou zahrnout do jiných souborů Sass. To je skvělý způsob, jak využít modularizace v CSS a tím je udržet jednodušší. Dílčím souborem je prostě soubor s názvem Sass s podtržítkem před názvem souboru. Lze jej nazvat podobně jako  _partial.scss. Podtržítko dává vědět Sass, že je soubor pouze částí a že by neměl být generován do souboru CSS. Rozdělení Sass se používá s direktivou  @import.

Import

CSS lze rozdělit do menších, lépe spravovatelný částí. Jedinou nevýhodou je, že při každém použití @import v CSS se vytváří další požadavek HTTP. 

Pro příklad mějme Sass soubory, _reset.scss a base.scss. Budeme chtít přidat soubor  _reset.scss do base.scss.

    // _reset.scss
    html,
    body,
    ul,
    ol {
        margin: 0;
        padding: 0;
    }
    

    
    // base.scss
    @import 'reset';
    body {
        font: 100% Helvetica, sans-serif;
        background-color: #efefef;
    }
    

Všimněte si, že při použití  @import 'reset', v base.scss se  nemusí zahrnout přípona  .scss. Sass je chytrý a udělá to za vás. Při generování CSS bude výsledek:

    
    html, body, ul, ol {
        margin: 0;
        padding: 0;
    }
    body {
        font: 100% Helvetica, sans-serif;
        background-color: #efefef;
    }
    

Mixins/Skupiny

V CSS je trochu únavné psát dokola některé věci a to zejména v CSS3. Mixiny umožňují vytvářet skupiny definic CSS, které lze znovu použít v celém webu. Zde je příklad pro border-radius.

    
    @mixin border-radius($radius) {
        -webkit-border-radius: $radius;
        -moz-border-radius: $radius;
        -ms-border-radius: $radius;
        border-radius: $radius;
    }
    .box { 
        @include border-radius(10px); 
    }
    

Chcete-li vytvořit mixin použíjete direktivu  @mixin s přiřazením jména. Náš mixin je pojmenovaný  border-radius. Lze také používat proměnnou $radius v závorkách. Pro aplikaci mixinu, se může použít v CSS  @include s názvem mixinu. Při generování bude vaše CSS vypadat takto:

    
    .box {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        border-radius: 10px;
    }
    

Rozšíření/dědičnost

To je jedna z nejužitečnějších vlastností Sass. Použití @extend umožňuje sdílet sadu vlastností CSS z jednoho selektoru do druhého. To pomáhá udržet Sass velmi přehledným. V příkladu je vytvořena jednoduchá série zpráv.

    
    .message {
        border: 1px solid #ccc;
        padding: 10px;
        color: #333;
    }
    .success {
        @extend .message;
        border-color: green;
    }
    .error {
        @extend .message;
        border-color: red;
    }
    .warning {
        @extend .message;
        border-color: yellow;
    }
    

Uvedený kód umožňuje vzít vlastnosti CSS v .message a aplikovat je na .success , .error , & .warning. Vygenerovaný CSS umožňuje vyhnout se nutnosti psát více názvů tříd na HTML prvky.

    
    .message, .success, .error, .warning {
        border: 1px solid #cccccc;
        padding: 10px;
        color: #333;
    }
    .success {
        border-color: green;
    }
    .error {
        border-color: red;
    }
    .warning {
        border-color: yellow;
    }
    

Operátory

Velmi užitečné je v CSS používat matematiku. Sass má několik standardních matematických operátorů jako + , - , * , / a %. V příkladu je uveden jednoduchý matematický výpočet šířky .

    
    .container { width: 100%; }
    article[role="main"] {
        float: left;
        width: 600px / 960px * 100%;
    }
    aside[role="complementary"] {
        float: right;
        width: 300px / 960px * 100%;
    }
    

Byla vytvořena velmi jednoduchá flexibilní mřížka, založená na 960px. Operace v Sass převede bez větších potíží pixely na procenta. Vygenerovaný CSS bude vypadat následovně:

    
    .container {
        width: 100%;
    }
    article[role="main"] {
        float: left;
        width: 62.5%;
    }
    aside[role="complementary"] {
        float: right;
        width: 31.25%;
    }