Naslovna » Front-end programiranje » Šta je SASS? Kako se koristi?

Šta je SASS? Kako se koristi?

Front-end programiranje CSS CSS predprocesor front-end razvoj SASS
Katarina-Glorija Grujić
10 Jul 2024
sass

Verovatno ste već čuli za CSS – jezik koji koristimo da opišemo izgled web stranica. Ali, da li ste čuli za SASS? SASS je CSS predprocesor koji olakšava i unapređuje način na koji pišemo CSS kod. Evo zašto je korisno upoznati se sa SASS-om:

Šta je SASS i zašto ga je korisno znati

SASS, što je skraćenica od “Syntactically Awesome Style Sheets”, je jezik koji proširuje mogućnosti CSS-a. Omogućava nam da pišemo CSS kod na efikasniji način. SASS nam donosi prednosti kao što su varijable, ugnježdeni selektori, mixin-i, i još mnogo toga.

Kako SASS unapređuje čist CSS i kako nam pomaže

SASS čini CSS kod čistijim, organizovanijim i lakšim za održavanje i čitanje. Na primer, vrednosti koje se često koriste možemo da izdvojimo u varijable i zatim njih da koristimo umesto tih vrednosti. Na ovaj način, ukoliko je potrebno promeniti neku od vrednosti, možemo je promeniti na samo jednom mestu. Takođe, ugnježdeni selektori omogućavaju jasniju strukturu CSS-a, dok mixin-i omogućavaju ponovno korišćenje koda.

Kako se SASS koristi

Da biste koristili SASS, prvo morate instalirati SASS predprocesor. Zatim možete kreirati SASS datoteke sa ekstenzijom .scss ili .sass, u zavisnoti od toga koju verziju SASS-a želite da koristite. Nakon toga, koristite komandu ili alat kako biste preveli vaše SASS datoteke u standardne CSS datoteke koje pretraživači mogu razumeti.

Primeri korišćenja SASS proširenja

Promenljive – definisanje i korišćenje:

Čist CSS:

.header {
    background-color: #3498db;
    color: white;
}
.footer {
    background-color: #3498db;
    color: black;
}
.button {
    background-color: #3498db;
    color: white;
    border: 2px solid #3498db;
}

Upotreba promenljivih:

$primary-color: #3498db;
.header {
    background-color: $primary-color;
    color: white;
}
.footer {
    background-color: $primary-color;
    color: black;
}
.button {
    background-color: $primary-color;
    color: white;
    border: 2px solid $primary-color;
}

2. Primer koriščenja mixin-a:

čist CSS:

.section1 {
    background: url("../images/image1.jpg");
    background-size: cover;
    border-radius: 20px;
    height: 100%;
    width: 45%;
    color: white;
    display: flex;
    align-items: end;
}
.section2 {
    background: url("../images/image2.jpg");
    background-size: cover;
    border-radius: 20px;
    height: 100%;
    width: 45%;
    color: white;
    display: flex;
    align-items: end;
}

Upotreba mixin-a:

@mixin section {
    background-size: cover;
    border-radius: 20px;
    height: 100%;
    width: 45%;
    color: white;
    display: flex;
    align-items: end;
}
.section1 {
    background: url("../images/image1.jpg");
    @include section;
}
.section2 {
    background: url("../images/image2.jpg");
    @include section;
}

Zaključak

SASS predstavlja moćan alat koji čini razvoj web stranica efikasnijim i čitljivijim. Upoznavanje SASS-a omogućava vam da budete produktivniji i da iskoristite sve prednosti koje ovaj predprocesor pruža.