Što je SASS?
SASS je jezik sa stilom koji je dizajnirao Hampton Catlin. To je kratica za Syntactically Awesome Style Sheets. To je skriptni jezik predprocesora koji se može interpretirati ili sastaviti u kaskadne tablice stilova. Riječ je o stabilnijoj i snažnijoj verziji CSS-a koja strukturno opisuje stil bilo kojeg dokumenta. SASS je puko proširenje za CSS. To uključuje nove značajke kao što su varijable, ugniježđena pravila, mixins, ugrađeni uvoz, ugrađene funkcije koje pomažu u manipuliranju bojom i drugim vrijednostima. Sve su to u potpunosti kompatibilne s CSS-om.
definicija
To je CSS predprocesor koji pomaže u smanjenju ponavljanja s CSS-om i zauzvrat štedi vrijeme. Smatra se stabilnijim i snažnijim u usporedbi s CSS-om. Opisuje stil dokumenta vrlo jasno i strukturno. To pomaže u bržem i boljem obavljanju posla. U svim svojim značajkama prednost je u odnosu na CSS. Omogućuje definiranje varijabli koje mogu započeti znakom $. Dodjeljivanje varijable može se obaviti korištenjem dvotočka. Također podržava logično gniježđenje koje CSS nema. SASS korisniku omogućuje ugniježđen kôd koji se može umetnuti jedan u drugog.
Razumijevanje SASS-a
SASS se smatra snažnim, stabilnim i brzim. Razlog za to je što ima različita svojstva poput varijabli, gniježđenja, mješavine itd. Krenimo kroz njih po jedan i bolje razumijemo SASS.
1. Varijable:
Varijable omogućuju korisniku da definira određene vrijednosti i ponovo ih koristi preko koda. Te su varijable slične JavaScript-u. Bilo koju varijablu možete lako definirati dodavanjem znaka $.
Primjer : $ varijabla-ime: varijabla-vrijednost;
Korisnik može definirati bilo koji broj varijabli po potrebi. Jednom kada se varijable sastave, zamjenjuju se njihovim stvarnim vrijednostima u CSS-u.
2. Gnijezđenje:
Gniježđenje pomaže u definiranju dječjih odabirača unutar roditelja. CSS ne podržava to, pa stoga SASS čini optimiziranijim kodnim jezikom. Pomaže u pisanju čistijeg i manje ponavljajućeg koda.
3. Mixins:
Mixin je još jedna korisna značajka koja može smanjiti suvišnost i omogućava ponovnu upotrebu koda. Slično je s funkcijama gdje se jednom definirani kôd može ponovno koristiti bilo koji broj puta.
4. Partija i uvoz:
Partials su zasebne datoteke koje mogu sadržavati kôd koji kod čini modularnim. Pomoću ove značajke lako možete imati odvojene datoteke za različite komponente. Nazivno ime uvijek se definira dodavanjem podvlake ispred imena.
Kako djeluje SASS?
Da biste dobili kôd, morate koristiti SASS predprocesor. To pomaže u prevođenju SASS koda u CSS. Taj je postupak poznat kao prolazni. To je slično sažimanju, ali ovdje umjesto pretvaranja ljudskog prijenosnog koda u strojni kod, prijevod se vrši s jednog ljudsko čitljivog jezika na drugi. Transkripcija s SASS na CSS je lagana. Sve varijable koje su definirane u SASS zamjenjuju se vrijednostima u CSS-u. To olakšava stvaranje i održavanje različitih CSS datoteka za vašu aplikaciju.
Kako koristiti SASS?
Korak u nastavku uputit će vas na korištenje SASS-a najjednostavnijeg načina.
- Napravite demo mapu bilo gdje u vašem sustavu.
- Unutar ove mape stvorite dvije mape / CSS i / scss.
- Nakon što se stvore ove dvije mape, idite na / scss mapu i stvorite datoteku koja se zove demo.scss Ovo proširenje je scss, što znači da je riječ o SASS datoteci.
- Idite u naredbeni redak i pomaknite se do demo mape.
- Nakon što se nađete u ovoj mapi, gledati ćete kako se vaše scss datoteke sastavljaju u CSS. Unesite naredbu ispod da biste gledali:
Sass - pazi scss: CSS
Sat je zastava koja otkriva promjene i sastavlja scss datoteku u konačnu CSS datoteku koja se može koristiti u vašoj aplikaciji.
Prednosti SASS-a
- SASS korisniku omogućuje pisanje čistog koda. To olakšava rukovanje i manje CSS-a se koristi za izgradnju programa.
- Sadrži manje koda što olakšava brži rad odgovarajućeg CSS-a.
- Ona je stabilnija, snažnija i elegantnija. Koriste ga dizajneri i programeri i pomaže im u učinkovitijem i bržem radu.
- Kompatibilan je s CSS-om i stoga se mogu koristiti sve CSS knjižnice.
- Pruža sadržaje poput gniježđenja koji pomažu u pisanju ugniježđene sintakse i korištenje funkcija poput manipulacije bojama, matematičkih funkcija i drugih vrijednosti.
Zašto bismo trebali koristiti SASS?
Ispod je pet glavnih točaka zbog kojih biste trebali koristiti SASS:
- Varijable: Za razliku od CSS-a gdje se uvijek morate vratiti i provjeriti postojeći stilovi, SASS ima varijable koje pohranjuju podatke i mogu se ponovo koristiti. Sve vrijednosti boja, složenica fontova itd. Mogu se pohraniti i koristiti kad god je to potrebno.
- @import: CSS ima @import koji povlači sve ostale stilove, ali ne stvara drugi HTTP zahtjev. SASS je predprocesor koji će povući sve datoteke prije nego što sastavi CSS. Kao rezultat, CSS stranicom obrađuje jedan HTTP zahtjev. Zahtjev se može podijeliti na dijelove i pregledniku će i dalje poslužiti samo jedna stranica.
- Funkcije boja: SASS ima različite funkcije koje su slične CSS-u. Sve se to jednostavno može koristiti u SASS-u.
- @extend: @extend nam omogućuje dijeljenje skupa CSS svojstava s jednog odabirača na drugi.
- Mixins: Miksine su deklaracije koje se mogu upotrebljavati na cijelom mjestu.
Zašto nam je potreban SASS?
SASS je brži i učinkovitiji. SASS kod možete ponovo koristiti i tako štedi vrijeme. Pretvorba koda iz SASS-a u CSS nije brzopleta i stoga je prikladno koristiti ga kako bi se moglo uštedjeti vrijeme.
Prava publika za učenje SASS tehnologija
Bez obzira na to koji programer koji koristi CSS i traži efikasniju i manje dugotrajnu tehnologiju za izradu web aplikacija može koristiti SASS i iskusiti nove značajke.
Kako vam ova tehnologija pomaže u razvoju u karijeri?
To je napredna verzija CSS-a. Kad upoznate SASS, lako možete dobiti slobodne poslove i poslove s velikim tvrtkama. To vam pomaže da brže radite i pokažete svoje vještine pomoću značajki koje pruža.
Zaključak
SASS je vrlo učinkovit način zamjene CSS-a. Sa varijablama, gniježđenjem, mixinom i ostalim značajkama pomaže u pružanju boljih rezultata od CSS-a. Kad CSS zamijenite sa SASS, kôd možete lako ponovo koristiti, umjesto da ponovo i ponovo pišete isti komad. Stoga upotrijebite SASS i postanite odlučniji u svojim aplikacijama.
Preporučeni članak
Ovo je vodič kroz Što je SASS? Ovdje smo razgovarali o konceptima, definiciji, radu, prednostima i karijernom rastu SASS-a. Možete i proći naše druge predložene članke da biste saznali više -
- Što je Bootstrap i kako ga koristiti?
- Što je VMware? U čemu je njegova upotreba?
- Što radi aplikacijski poslužitelj?
- Što je nasljeđivanje Java?
- Glavne prednosti i nedostaci SAS-a