Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Jimi Wikman
    Jimi Wikman

    Enklare hantering av CSS med SASS

    Om du som jag sitter ofta med näsan i CSS så vet du att det snabbt blir en ganska komplicerad massa av kod. I de fall då designen dessutom justeras lite här och där, dvs då du inte kodar för egen del utan mot en kund, så kan det dessutom lätt bli lite för många varianter på färger och liknande. Det är då det är skönt att kunna jobba med variabler och snippets av CSS som du kan återanvända i koden på ett enkelt sätt.

     

    Under många år så jobbade jag med CSS utan en så kallad preprocessor, men på senare tid så har jag fastnat för SASS. SASS är kort och gott ett skal som du lägger på din CSS där du kan använda variabler och kodsnippets. Skalet processas sedan och variablerna omvandlas till vanlig CSS. Att jobba med variabler är mycket befriande då du har bättre kontroll på exempelvis fonter och färger vilket är trevligt om du som jag kommer från en design bakgrund, eller jobbar mot externa designbyråer där man nästan alltid får en grafisk profil som ska implementeras.

     

    När du jobbar med SASS så skapar du en separat fil namngiven med .sass eller den nyare .scss ändelsen. I den filen skriver du css koden med variabler och sedan processar du den filen och får ut en vanlig .css fil med samma namn. Hur du sätter upp SASS beror lite på vilket operativsystem du jobbar i och vilken editor du jobbar i. Jag jobbar mest i en editor som heter PHPStorm på min mac och där är det väldigt enkelt att komma igång, speciellt om du som jag har tillägget Compass som automatiskt genererar CSS filerna när du arbetar.

     

    När du jobbar med SASS så finns det flera saker som är användbara förutom att jobba med variabler, men vi börjar där. Här är en enkel början där vi definierar basfärgerna och grundfonterna:

    $darkColor = #333333;

    $lightColor = #dedede;

    $backgroundColor = #ffffff;

    $contrastColorLight = #4F80B5;

    $contrastColorDark = #556270;

    $fontStack = arial, tahoma;

    $fontColorDark = #333;

    $fontColorLight = #fff;

    $linkColor = #333;

    Utifrån detta kan vi nu börja skriva kod och använda variablerna i våra CSS expressions:

    body{

    background-color:$backgroundColor;

    font-family: $fontStack;

    color: $fontColorDark;

    }

     

    h1{

    display:block;

    background-color: $contrastColorDark;

    color: $fontColorLight;

    }

    Detta genererar då följande CSS när vi processar SASS filen till CSS:

    body{

    background-color:#ffffff;

    font-family: arial, tahoma;

    color: #333;

    }

     

    h1{

    display:block;

    background-color: #556270;

    color: #ffffff;

    }

    Vill vi sedan ändra en färg eller en font så gör vi det i variabeln och processar SASS filen för att uppdatera CSS filen med det nya värdet överallt där den är satt i koden. En ändring och du kan uppdatera dussintals eller hundratals med css expressions!

     

    SASS kan mycket annat också som att nästla kod på ett mycket smart sätt, använda så kallade mixins för att lägga in hela snippets med CSS, modularisera genom att splitta upp i olika partials som sedan kan hänvisas in i koden vid behov, inkludera hela CSS filer som en del av kodmassan, använda extend funktionaliteten till att återanvända kod istället för att upprepa den och så klart den kraftfulla funktionen för att utföra beräkningar direkt i css för att exempelvis beräkna bredd och höjd i olika situationer.

     

    Jag tänkte prat mer om dessa funktioner i framtida bloggposter om det är någon som tycker det verkar intressant?



    User Feedback

    Recommended Comments

    There are no comments to display.



    Guest
    Add a comment...

    ×   Pasted as rich text.   Paste as plain text instead

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...