Title
×
close

Nekaj o meni:


Moje ime je Borut Bukovnik, in po izobrazbi sem elektrotehnik-elektronik. Kljub temu, da me elektronika zanima sem našel še večje zanimanje, in to je izdelava spletnih strani, in tudi malo programiranja.

Kar nekaj časa nazaj me je začelo zanimati programiranje, in dobil sem ogromno željo po izdelavi programa za naključna števila (loterija emoji_emotions). Prijatelji programerji, so ves čas govorili o C#, in sem poskušal izdelati brez vsakega znanja, program naključnih števil. Razumljivo, da mi ni šlo, ampak ustavilo me ni emoji_emotions. Brskati sem začel po spletu, in našel nek program za naključna števila, napisan v Python-u. Seveda, če ne bi bil jaz, ga nebi preizkusil. Naložil sem si Python in napisal (prepisal) kratek program in voila, izpisal mi je 7 števil.

Ker mi je bilo super zanimivo, prepisovanje iz spleta mislim, sem se odločil da grem na tečaj. Vpisal sem se na tečaj (na mojeznanje.si) in tako se je začelo. Kmalu sem spoznal še druge stvari, med njimi tudi HTML, in ker me je tako navdušil, je to še danes moje prvo zanimanje, kljub izobrazbi. Tako sem dokončal tečaje za Python, HTML, CSS, JavaScript, Bootstrap, jQuery in druge.

Ker hodim v službo mi preostane malo časa za izdelavo spletne strani in ostalega, vendar pa boste na moji spletni strani našli vse, kar sem jaz odnesel od tečajev. Na tej spletni strani so v bistvu zapiski skozi moje šolanje. Še vedno se učim, in upam da bo v prihodnosti to moj poklic.

Hvala za obisk in srečno!

close

Sass vadnica

Sass je CSS predprocesor, ki zmanjša čas ponavljanja CSS-a, in s tem prihranimo ogromno časa. Preden nadaljujete z branjem tega dokumenta, morate poznati HTML in CSS. Dodan primer prikazuje kako lahko nastavimo določene atribute, kot je to barva, ozadje, zamike, oblazinjenje itn. in to potem vnašamo v posamezne razrede.

Sass vadnica

Kaj Sass sploh je?

  1. SASS pomeni Syntactically Awesome StyleSheet (slo. Sintaktični super slog)
  2. Sass je CSS razširitev
  3. Sass je CSS predprocesor
  4. Sass je združljiv z vsemi CSS različicami
  5. Sass zmanjša ponavljanje CSS-a in tako prihrani čas

Sass namestitev

Najprej namestimo Sass paket. Gremo v PHP Storm Terminal, kamor vpišemo (pot kamor ga želimo namestiti) npm install -g sass, kjer se namesti celoten paket Sass/SCSS. Lahko tudi namestimo Less (slo. manj), in sicer z ukazom npm install --global less. Po namestitvi se odpravimo v nastavitve (ang. Settings) oz. pritisnemo Ctrl+Alt+S, kjer izberemo Tools/File Watchers. Izberemo +, in potem izberemo (odvisno kaj smo namestili) Sass ali Less. Nato pritisnemo OK in Apply.


Sass namestitev 1
Sass namestitev 2
Sass namestitev 3

Zakaj je Sass sploh uporaben?

Ko začnemo izdelovati spletno stran, običajno začnemo z oblikovanje, najprej body, h1, p, span, div itn. potem si še izdelamo tabele, sezname, tipke itn. do dobimo neko prezentacijo. In ko želimo oblikovati tabele, lahko tudi samo glave ali odstavke, običajno rabimo neko ozadje in barvo, kar seveda ne dela težav pri slogu, ki ima 10 vrstic.

Predstavljajte si, da imamo 1000 vrstic kode samo za slog, in ko zamenjamo nekaj ozadij in barv, pozabimo kakšno barvo ali zamike in še kaj drugega. V takšnem primeru pride prav SASS, kjer določimo barvo s preprostim ukazom $color-green: #adff2f. Ko delamo slog preprosto pokličemo barvo, ki smo jo shranili, z ukazom color: $color-green;

Prvi SASS primer - barve

Pisava v rdeči pisavi in zelenim ozadjem.

Pisava v zeleni barvi in rdečim ozadjem

Pisava v modri barvi in črnim ozadjem

Pisava v črni pisavi in modrem ozadju

    Sass:
    $barva1: red
    $barva2: greenyellow
    $barva3: skyblue
    $barva4: black

    .p1
    color: $barva1
    background-color: $barva2
    .p2
    color: $barva2
    background-color: $barva1
    .p3
    color: $barva3
    background-color: $barva4
    .p4
    color: $barva4
    background-color: $barva3
            
    CSS:
    .p1 {
        color: red;
        background-color: greenyellow;
    }
    .p2 {
        color: greenyellow;
        background-color: red;
    }
    .p3 {
        color: skyblue;
        background-color: black;
    }
    .p4 {
        color: black;
        background-color: skyblue;
    }
            

Drugi SASS primer - oblazinjenje

Pisava v rdeči pisavi in zelenim ozadjem.

Pisava v zeleni barvi in rdečim ozadjem

Pisava v modri barvi in črnim ozadjem

Pisava v črni pisavi in modrem ozadju

    Sass:
    $barva1: red
    $barva2: greenyellow
    $barva3: skyblue
    $barva4: black
    $padding: 20px

    .p1
      color: $barva1
      background-color: $barva2
    .p2
      color: $barva2
      background-color: $barva1
    .p3
      color: $barva3
      background-color: $barva4
    .p4
      color: $barva4
      background-color: $barva3
    .padding
      padding: $padding
                    
    CSS:
    .p1 {
        color: red;
        background-color: greenyellow;
    }
    .p2 {
        color: greenyellow;
        background-color: red;
    }
    .p3 {
        color: skyblue;
        background-color: black;
    }
    .p4 {
        color: black;
        background-color: skyblue;
    }
    .padding {
        padding: 20px;
    }
                    

Tretji SASS primer - zamiki

Pisava v rdeči pisavi in zelenim ozadjem.

Pisava v zeleni barvi in rdečim ozadjem

Pisava v modri barvi in črnim ozadjem

Pisava v črni pisavi in modrem ozadju

    Sass:
    $barva1: red
    $barva2: greenyellow
    $barva3: skyblue
    $barva4: black
    $padding: 20px
    $margin-top: 20px
    $margin-left: 40px
    $margin-right: 80px
    $margin-bottom: 5px

    .p1
      color: $barva1
      background-color: $barva2
    .p2
      color: $barva2
      background-color: $barva1
    .p3
      color: $barva3
      background-color: $barva4
    .p4
      color: $barva4
      background-color: $barva3
    .padding
      padding: $padding
    .margin-top
      margin-top: $margin-top
    .margin-left
      margin-left: $margin-left
    .margin-right
      margin-right: $margin-right
    .margin-bottom
      margin-bottom: $margin-bottom
                    
    CSS:
    .p1 {
        color: red;
        background-color: greenyellow;
    }
    .p2 {
        color: greenyellow;
        background-color: red;
    }
    .p3 {
        color: skyblue;
        background-color: black;
    }
    .p4 {
        color: black;
        background-color: skyblue;
    }
    .padding {
        padding: 20px;
    }
    .margin-top {
        margin-top: 20px;
    }
    .margin-left {
        margin-left: 40px;
    }
    .margin-right {
        margin-right: 80px;
    }
    .margin-bottom {
        margin-bottom: 5px;
    }
                    

Kako SASS deluje?

Brskalnik SASS kode ne razume, zato potrebujemo SASS predpomnilnik, da kodo pretvorimo v CSS. Pomeni, da moramo sestaviti CSS kodo, v katero uvozimo SASS ukaze. SASS podpira tudi komentarje, ki se začnejo z /* in končajo */.

    /* vpišemo komentar */
    

primer komentiranja v sass

    SASS:
    /* prva barva je namenjena ozadju */
    $ozadje: yellow
    /* druga barva za besedilo */
    $besedilo: black
    .odstavek
      background-color: $ozadje
      color: $besedilo
            
    CSS:
    /* prva barva je namenjena ozadju */
    /* druga barva za besedilo */
    .odstavek {
        background-color: yellow;
        color: black;
    }
            
  1. Sass lastnosti:
  2. Spremenljivke
  3. @global
  4. nesting
  5. @import
  6. @mixin & @include
  7. @extend