Prije nego što možete koristiti Sass, morate ga konfigurirati u svom projektu. Ako samo želite čitati, slobodno čitajte, ali preporučujemo da prvo instalirate Sass. Instalirajte Sass da biste razumjeli sve karakteristike Sass-a.

• Prethodna obrada

  Pisanje CSS-a je zabavno samo po sebi, ali kada stylesheet postane ogroman, postaje teško održavati ga. I u ovom slučaju će nam pomoći predprocesor. Sass vam omogućava da koristite funkcije koje nisu dostupne u samom CSS-u, na primjer, varijable, ugniježđenje, miksine, nasljeđivanje i druge lijepe stvari koje vraćaju pogodnost pisanja CSS-a.

  Kada počnete koristiti Sass, predprocesor obrađuje vašu Sass datoteku i sprema je kao jednostavnu CSS datoteku koju možete koristiti na bilo kojoj stranici.

  Najlakši način da dobijete ovaj rezultat je korištenje terminala. Kada se Sass instalira, možete kompajlirati svoj Sass u CSS pomoću naredbe sass. Vi samo trebate reći Sass-u gdje da dobije Sass fajl i u koji CSS fajl da ga kompajlira. Na primjer, pokretanjem naredbe sass input.scss output.css u terminalu, govorite Sass-u da uzme jednu Sass datoteku, input.scss, i prevede je u output.css.

• Varijable

  Razmišljajte o varijablama kao o načinu pohranjivanja informacija koje želite koristiti tijekom pisanja svakog stila projekta. Možete pohraniti boje, fontove ili bilo koje druge CSS vrijednosti koje želite koristiti u varijablama. Za kreiranje varijable u Sass-u morate koristiti simbol $. Pogledajmo primjer:

  SCSS sintaksa

  $font-stack: Helvetica, sans-serif; $primary-color : #333 ; tijelo (font: 100% $font-stack; boja: $primary-color;)

  Sass sintaksa

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

  Kada se Sass obradi, on uzima vrijednosti koje smo postavili u $font-stack i $primary-color i umeće ih u običnu CSS datoteku na mjesta gdje smo naveli varijable kao vrijednosti. Ovo čini varijable moćnom karakteristikom, na primjer kada radite sa bojama brenda koje se koriste na cijeloj web lokaciji.

  tijelo (font: 100% Helvetica, sans-serif; boja: #333; )

• Nestings

  Kada pišete HTML, vjerovatno ste primijetili da ima jasnu ugniježđenu i vizualnu hijerarhiju. Ovo nije slučaj sa CSS-om.

  Sass će vam omogućiti da ugnijezdite CSS selektore na isti način kao u HTML vizualnoj hijerarhiji. Ali zapamtite da pretjerano ugniježđenje čini vaš dokument manje čitljivim i razumljivim, što se smatra lošom praksom.

  Da bismo razumjeli na što mislimo, evo tipičnog primjera stilova navigacije na web stranici:

  SCSS sintaksa

  nav ( ul ( margina : 0 ; padding : 0 ; stil liste : nijedan ; ) li ( prikaz : inline-block ; ) a ( prikaz : blok; padding : 6px 12px; dekoracija teksta: nijedan ; ))

  Sass sintaksa

  nav ul margin : 0 padding : 0 stil liste : nema li display : inline-block a display : blok padding : 6px 12px text-decoration : nema

  Jeste li primijetili da su selektori ul , li i a ugniježđeni unutar navigacijskog selektora? Ovo je odličan način da svoj CSS fajl učinite čitljivijim. Kada generišete CSS datoteku, izlaz će biti otprilike ovako:

  nav ul ( margina: 0; padding: 0; stil liste: nijedan;) nav li (prikaz: inline-block;) nav a (prikaz: blok; padding: 6px 12px; text-decoration: nijedan;)

• Fragmentacija

  Možete kreirati isječke Sass datoteke koji sadrže male isječke CSS-a koji se mogu koristiti u drugim Sass datotekama. Ovo je odličan način da svoj CSS učinite modularnim i lakšim za održavanje. Fragment je jednostavna Sass datoteka čije ime počinje donjom crtom, na primjer, _partial.scss. Donja crta u imenu datoteke Sass govori kompajleru da je to samo isječak i da se ne treba kompajlirati u CSS. Sass fragmenti su uključeni pomoću @import direktive.

• Uvoz

  CSS ima funkciju uvoza koja vam omogućava da svoju CSS datoteku podijelite na manje i učinite ih lakšim za održavanje. Ali ova metoda ima značajan nedostatak: svaki put kada koristite @import u CSS-u, u CSS-u se kreira još jedan HTTP zahtjev. Sass preuzima ideju uvoza datoteka putem @import direktive, ali umjesto kreiranja zasebnog HTTP zahtjeva, Sass uvozi datoteku specificiranu u direktivi u onu gdje je pozvana, tj. Izlaz je jedan CSS fajl sastavljen od nekoliko fragmenata.

  Na primjer, imate nekoliko isječaka Sass datoteke - _reset.scss i base.scss. I želimo da uvezemo _reset.scss u base.scss.

  SCSS sintaksa

  // _reset.scss html, body, ul, ol ( margina: 0; padding: 0; ) // base.scss @import "reset" ; tijelo (font: 100% Helvetica, sans-serif; boja pozadine: #efefef;)

  Sass sintaksa

  // _reset.sass html , body , ul , ol margin : 0 padding : 0 // base.sass @import reset body font : 100% Helvetica , sans-serif background-color : #efefef

  Imajte na umu da koristimo @import "reset"; u datoteci base.scss. Kada uvezete datoteku, ne morate navesti ekstenziju .scss. Sass je pametan jezik i sam će shvatiti. Kada se CSS generiše dobićete:

  html , body , ul , ol ( margina : 0 ; padding : 0 ; ) body ( font : 100% Helvetica , sans-serif ; boja pozadine : #efefef ; )

• miksini (miksini)

  Neke stvari u CSS-u su prilično zamorne za pisanje, posebno u CSS3, gdje povrh toga često morate koristiti veliki broj prefiksa dobavljača. Miksini vam omogućavaju da kreirate grupe CSS deklaracija koje ćete koristiti više puta na vašoj web lokaciji. Dobro je koristiti miksine za prefikse dobavljača. Primjer za radijus granice:

  SCSS sintaksa

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

  Sass sintaksa

  =border-radius ($radius) -webkit-border-radius: $radius -moz-border-radius: $radius -ms-border-radius: $radius border-radius: $radius .box +border-radius (10px)

  Da kreirate mixin, koristite direktivu @mixin + naziv mixina. Nazvali smo naš mixin border-radijus. Takođe, u mixin-u koristimo promenljivu $radius unutar zagrada, čime nam omogućavamo da prenesemo šta god želimo u varijablu. Kada kreirate mixin, možete ga koristiti kao CSS parametar tako što ćete započeti poziv sa @include i imenom mixina. Kada se vaš CSS kompajlira, dobićete ovo:

  .box ( -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px;)

• Produžetak/nasljeđivanje

  Ovo je jedna od najkorisnijih karakteristika Sass-a. Koristeći @extend direktivu, možete naslijediti skupove CSS svojstava od jednog selektora do drugog. Ovo vam omogućava da vaš Sass fajl držite "čistim". U našem primjeru, pokazat ćemo vam kako stilizirati obavijesti o greškama, upozorenjima i uspjehu koristeći druge Sass funkcije koje idu ruku pod ruku s klasama šablona ekstenzije.

  Klasa šablona je posebna vrsta klase koja se ispisuje samo kada koristite ekstenziju - ovo će održati vaš prevedeni CSS čistim i urednim.

  SCSS sintaksa

  %equal-heights ( display : flex ; flex-wrap : wrap ; ) %message-shared ( granica : 1px solid #ccc ; padding : 10px ; boja : #333 ; ) .message ( @extend %message-shared ; ) . uspjeh ( @extend %message-shared ; border-color : zelena ; ) .error ( @extend %message-shared ; border-color : crvena ; ) .warning ( @extend %message-shared ; border-color: žuta ; )

  Sass sintaksa

  // Ovaj dio koda neće ući u CSS jer %equal-heights nikada nije proširen.%equal-heights display : flex flex-wrap : omotač // Ovaj dio koda će završiti u CSS-u jer je %message-shared proširen.%message-shared border : 1px solid #ccc padding : 10px color : #333 .message @extend %message-shared .success @extend %message-shared border-color : zelena .error @extend %message-shared border-color : crveno .warning @extend %message-shared border-color : žuto

  Gornji kod govori klasama .message , .success , .error i .warning da se ponašaju kao %message-shared . To znači da gdje god se pozove %message-shared, .message , .success , .error i .warning će također biti pozvani. Magija se dešava u generisanom CSS-u, gde svaka od ovih klasa prima CSS svojstva, baš kao %message-shared. Ovo će vam omogućiti da izbjegnete pisanje mnogih klasa u HTML elementima.

  Možete proširiti većinu jednostavnih CSS selektora dodavanjem klasa šablona u Sass, međutim, korištenje predložaka je najlakši način da osigurate da ne proširite klasu gdje god da se koristi u vašim stilovima, što bi moglo dovesti do nenamjernih skupova stilova u vašem CSS-u. .

  Kada generirate svoj CSS, izgledat će kao u primjeru ispod. Imajte na umu da %equal-heights ne ulazi u CSS jer nikada nije korišten.

  .message, .success, .error, .warning (bord: 1px solid #cccccc; padding: 10px; color: #333;).success (border-color: green;).error (border-color: red;). upozorenje (boja ivice: žuta ;)

• Matematički operatori

  Upotreba matematike u CSS-u je veoma korisna. Sass ima nekoliko standardnih matematičkih operatora kao što su + , - , * , / i % . U našem primjeru radimo jednostavnu matematiku kako bismo izračunali širinu aside i article .

  SCSS sintaksa

  .container ( širina : 100% ; ) članak [ uloga = "glavna" ] ( float : lijevo ; širina : 600px / 960px * 100% ;) sa strane [ role = "komplementaran" ] ( float : desno ; širina: 300px / 960px * 100% ;)

  Sass sintaksa

  .širina kontejnera : 100% članak [ uloga = "glavni" ] float : lijeva širina : 600 px / 960 px * 100% u stranu [ uloga = "komplementaran" ] float : desna širina : 300 px / 960 px * 100%

  Napravili smo jednostavnu responzivnu modularnu mrežu širine 960 piksela. Koristeći matematičke operatore, uzeli smo rezultirajuće podatke sa vrijednostima piksela i bez puno truda ih pretvorili u procente. Prevedeni CSS izgleda ovako:

  .container ( širina : 100% ; ) članak [ uloga = "glavni" ] ( plutajući : lijevo ; širina : 62,5% ; ) na stranu [ uloga = "komplementaran" ] ( plutajući : desno ; širina : 31,25% ; )

27.07.2017

Ova serija SASS tutorijala namijenjena je početnicima i iskusnim programerima. Ovo je prvi vodič od četiri dijela koji će vas provesti kroz predprocesor, instalirati ga i naučiti o nekim njegovim karakteristikama.

Šta je SASS?

SASS (Sintaktički sjajni stilski listovi)- jedan od najpopularnijih. To je skup CSS funkcija koje vam omogućavaju da kodirate brže i efikasnije. SASS podržava integraciju sa Firefox Firebugom. SassScript vam omogućava da kreirate varijable, ugniježđene stilove i naslijeđene selektore.

SASS omogućava brzo i jednostavno pisanje manje (ponekad značajno manje) CSS koda i dinamičko upravljanje njime kao programskim jezikom (usput rečeno, to nije programski jezik). To je odličan alat za pisanje funkcionalnijeg i čistijeg CSS-a koji može ubrzati radni tok bilo kojeg dizajnera i programera.

Zašto vam treba SASS?

Većina front-end okvira, uključujući Bootstrap, Materialize i Foundation, izgrađena je sa ovim odličnim predprocesorom. Poznavanje SASS-a će vam pomoći da koristite više funkcija ovih okvira.

Kako koristiti SASS?

Postoje mnoge aplikacije koje olakšavaju i ubrzavaju početak korištenja SASS-a: CodeKit, Compass, Koala, itd. O njima ćete naučiti u drugim dijelovima tutorijala. U ovom poglavlju nećemo koristiti nikakve aplikacije ili alate osim onih potrebnih za pokretanje SASS-a na računaru. Nećete morati da brinete o operativnom sistemu jer će sve biti jasno svim korisnicima.

Preuzmite i instalirajte SASS

Možete instalirati SASS samo na mašini koja već ima instaliran Ruby:

• Ruby dolazi unaprijed instaliran na Mac, tako da možete odmah instalirati Sass Macintosh;
• Ako koristite Windows, morate prvo preuzeti Ruby;
• Ruby na Linuxu se može preuzeti preko apt menadžera paketa, rbenv ili rvm.

Nakon što je Ruby instaliran, možete instalirati SASS na svoju mašinu. Otvorimo Ruby komandnu liniju i instalirajmo SASS na vaš sistem:

Gem install sass

Ako gornja naredba ne radi, možda ćete morati koristiti naredbu sudo:

Sudo gem install sass

Ako želite provjeriti SASS verziju koristite sljedeću naredbu:

SASS je instaliran. Kreirajmo projektni folder i nazovimo ga sass-basic. Kreirajte osnovnu html datoteku sa sljedećim kodom:

Moj prvi SASS projekat

Zdravo prijatelju, učim SASS i stvarno je super.

Body (poravnanje teksta: centar; ) h1( boja: #333; ) p( boja: #666; )

Sada morate kompajlirati ovu datoteku koristeći komandnu liniju/terminal. Otvorimo komandnu liniju u istom direktorijumu (možda ćete morati da koristite Ruby komandnu liniju ako obična komandna linija ne radi). Upišite sljedeće i pritisnite Enter:

Sass --gledajte style.scss:style.css

Primijetit ćete da su generirani novi fajlovi: style.css i style.css.map. Vrijedi napomenuti da ne morate dodirivati ​​mapu, baš kao i .css datoteku. Ako želite napraviti bilo kakve promjene, to možete učiniti putem style.scss. Ne morate ponavljati ovaj proces svaki put kada promijenite stilove. SASS kompilacija će raditi automatski kada unesete promjene u .scss datoteku.

U sledećem poglavlju ćemo pogledati SASS varijable i zašto su one najkorisnije karakteristike u SASS-u (i bilo kom drugom CSS pretprocesoru).

Zdravo svima! Kako brzo vrijeme leti. Nisam čak ni primijetio kako sam prešao sa stilova pisanja sa običnog Css na Sass preprocesor. Ali ranije nisam razumio - kakav je Sass, za šta je potreban, vjerovatno je za super napredne profesionalce u rasporedu. Da, korištenje predprocesora je korak do novog nivoa u razvoju weba, ali tu nema ništa strašno ni komplicirano, a u to ćete se uvjeriti čitajući ovaj članak do kraja.

Dakle, šta je dobro u vezi sa predprocesorom i Sassom konkretno? Odmah ću reći da postoje i drugi, kao što su Less, Stylus itd. Svi rade po istom principu, ali svaki ima svoje karakteristike. Sass je stekao veliku popularnost među profesionalcima, čineći učenje mnogo lakšim. Samo što je tehnologija popularnija, zajednica je veća i dokumentacija je obimnija.

Predprocesori su dizajnirani da rasterete programera većine rutinskih zadataka prilikom pisanja koda, čime se povećava brzina i kvalitet rada. Pored CSS predprocesora, postoje i HTML predprocesori, na primjer, Pug (Jade).

Struktura članka

Dokumentacija

Programer Sassa je Francuz Hugo Giraudel, koji već neko vrijeme živi u Njemačkoj. Naravno, dokumentacija je na engleskom, ali ja je lično dobro razumijem (važno je znati tehnički engleski). Ali postoji i prevod na ruski. Ja bih ipak preporučio englesku verziju, ovo je zato da se navikneš na nju i učiš engleski sve dublje. Ali ni ruski nije ništa gori.

• Engleska dokumentacija: http://www.sass-lang.com
• Ruska dokumentacija: https://sass-scss.ru

Prevođenje Sass u Css

Za softver za prevođenje Sass-a u Css, koristim Sass dodatak za upravljanje zadacima. Generalno, Sass je aplikacija (Gem) jezika Ruby. Stoga, ako želite bez Gulpa, za prevođenje u Css morat ćete instalirati platformu programskog jezika Ruby. Neću vam sada pokazivati ​​kako se to radi, o tome možete pročitati na službenoj web stranici.

Sintaksa - Sass, Scss

Odmah da napomenem da postoje 2 sintakse za pisanje koda: Sass i Scss.

Sintaksa Sassa se neznatno razlikuje od Scss-a. Scss više liči na običan Css kod, a Sass eliminira vitičaste zagrade i zareze između pravila. Također postoje razlike u načinu na koji su neke funkcije napisane i morate paziti koju sintaksu odaberete. Ekstenzije datoteka za Sass − *.sass, a za Scss - *.scss. Sass sintaksa je starija, a Scss je došao kasnije kako bi početnicima olakšao učenje. I sam sam počeo da proučavam ovaj preprocesor u Scss-u, tako ga je bilo lakše razumeti. Sada sam prešao na Sass, meni je zgodnije.

Ako govorimo o Sass-u, onda je njegova struktura koda izgrađena na osnovu udubljenja (uostalom, u njoj nema vitičastih zagrada) i ovdje treba biti oprezan, jer i tabulator (TAB - 4 razmaka) i obični razmaci ( obično je to dvostruki razmak). Uvijek koristim tabulator.

Zapamtite! Ako koristite tabulator kao uvlačenje, onda treba isključiti razmake kako bi sve bilo isto. I obrnuto - ako koristite razmake, onda tabulator treba isključiti. U suprotnom, kompajler će izbaciti grešku.

Sass

.maincontent .main-title font-size: 30px font-weight: 700 margin: 0 0 30px .description margin-bottom: 30px p color: #444444 font-size: 16px line-height: 22px

Scss

.maincontent ( .main-title (font-size: 30px; font-weight: 700; margin: 0 0 30px; ) .description ( margin-bottom: 30px; p (color: #444444; font-size: 16px; line). -visina: 22px; ) ) )

Većina uređivača koda (na primjer, Sublime Text) ima oznake uvlačenja u obliku pruga, što nas sprečava da se zbunimo. U primjerima ispod koristit ću Sass sintaksu.

Pojednostavite svoj život uz Sass

Ugniježđenje pravila

To je ono što mi se svidjelo kod Sass-a od samog početka, to je bilo upravo ugniježđenje CSS pravila jedno u drugo. Ovo štedi mnogo vremena, a kod je strukturiran i lak za čitanje. Na primjer, ako želimo pisati stilove za elemente određenog roditeljskog kontejnera, onda u Css-u moramo svaki put specificirati roditeljsku klasu, na primjer ovako:

Glavni .naslov (veličina fonta: 30px; boja: #444; ) .glavni .podnaslov (veličina fonta: 20px; ) .glavni .opis (veličina fonta: 14px; margina dna: 30px; )

Odnosno, svuda navodimo roditeljsku klasu.main, a to, zauzvrat, nije sasvim zgodno. Koristeći Sass, možete to napisati ovako:

Scss

.main ( .title (font-size: 30px; color: #444; ) .subtitle (font-size: 20px; ) .description (font-size: 14px; margin-bottom: 30px; ) )

Sass

.main .title font-size: 30px boja: #444 .subtitle font-size: 20px .description font-size: 14px margin-bottom: 30px

Slažem se, izgleda mnogo urednije, a kod možete pisati brže, jer roditeljsku klasu.main pišemo samo jednom. Ako želite da me pratite bez instaliranja Rubyja i bilo kakvog sličnog softvera, možete koristiti online kompajler za demonstraciju.

Ugniježđena svojstva

Pored pravila ugniježđenja u Sass-u, postoji mogućnost ugniježđenja svojstava. Na primjer, evo kako napisati vrijednosti margina:

Sass

.main .title margina: gore: 10px desno: 15px dolje: 10px lijevo: 15px

Css

.main .title ( margin-top: 10px; margin-right: 15px; margin-bottom: 10px; margin-left: 15px; )

Povezivanje birača ili spajanje - & sign

Možemo ubrzati pisanje našeg koda i učiniti ga još kompaktnijim korištenjem konkatenacije (povezivanja) pomoću simbola - & . Kako radi? Na primjer, imamo klase kao što su: .main-title, .main-subtitle, .main-description. U Sass-u ove klase se mogu napisati na sljedeći način:

Glavni &-title font-size: 30px boja: #444 &-subtitle font-size: 20px &-description font-size: 14px margin-bottom: 30px

Glavni-naslov (veličina fonta: 30px; boja: #444;) .glavni-podnaslov (veličina fonta: 20px;) .glavni-opis (veličina fonta: 14px; margina-dno: 30px; )

Korišćenje simbola & povezujemo se s korijenskom klasom, odnosno u ovom slučaju nema potrebe stalno ponavljati root.main . Istovremeno, imajte na umu da nismo kreirali nijedan podređeni element.

/* Link */ a ( boja: crvena; ) a: lebdjeti ( boja: plava; ) /* Pseudoelementi */ .main::before ( sadržaj: ""; prikaz: blok; veličina fonta: 20px; ) .main ::posle (sadržaj: ""; prikaz: blok; veličina fonta: 30px; )

Ponekad morate specificirati lanac selektora do trenutnog elementa. Možete ga, naravno, premjestiti u korijen, ali kako ne biste prekinuli ugniježđenje, možete ga napisati na sljedeći način:

Glavni .kontejner i širina: 700px

Container.main (širina: 700px)

Kretanjem & nakon selektora, promijenili smo red dockinga, tj. class.container u ovom slučaju je roditelj.

Vezanje za roditeljski selektor, ali jedan nivo više

Iznad, kao primjer, demonstrirao sam Sass kod:

Glavni &-title font-size: 30px boja: #444 &-subtitle font-size: 20px &-description font-size: 14px margin-bottom: 30px

Sada zamislite da u .main-title bloku postoji još jedan element koji treba eksplicitno stilizirati koristeći cijeli lanac roditelja. Dugo sam jednostavno specificirao ime korijena (u ovom slučaju - .main), ali to nije baš zgodno. Počeo sam brčkati po Sass dokumentaciji i našao rješenje. U stvari, sve je jednostavno - moramo deklarirati vezu do roditelja i koristiti je gdje je potrebno.

Ovako sam to radio ranije:

Glavni &-title font-size: 30px boja: #444 .main__icon // navedite root.main, inače, ako koristite & će se povezati sa .main-title color: #444 širina: 20px &-subtitle font-size : 20px & -description font-size: 14px margin-bottom: 30px

A sada možete uraditi ovo:

Glavni $self: & // link do nadređene &-title font-size: 30px boja: #444 #($self)__icon // umjesto & koristite vezu do nadređene boje: #444 širina: 20px &-podnaslov font-size: 20px &-description font-size: 14px margin-bottom: 30px

Ako ste primijetili, deklarirali smo referencu na roditelja - $self: & . Ovo me pomalo podsjeća na referencu na objekt (ovo) koji je pokrenuo događaj u javaScript-u. Sada, na pravom mjestu, možemo ga jednostavno nazvati #($self) . Ispostavilo se kako je sve jednostavno, ali sam se češao po glavi i mislio da u Sass-u nema rješenja za ovaj problem.

Glavni-naslov (font-size: 30px; boja: #444; ) .main-title .main__icon (boja: #444; širina: 20px; ) .main-subtitle (font-size: 20px; ) .main-description ( font-size: 14px; margin-bottom: 30px; )

Predlošci

Često se dešava da nekoliko elemenata ima istu stilsku osnovu, ali se međusobno razlikuju po samo nekoliko pravila. Uzmimo za primjer dugmad. Ako uzmemo istu veličinu dugmadi, onda se mogu razlikovati jedni od drugih samo po boji: crvena, zelena, siva itd. Ako koristite čisti Css, morat ćete specificirati sve boje gumba u osnovnim stilovima, odvojene zarezima, ili kreirati osnovnu klasu. Ali u Sassu je mnogo lakše:

%button background-color: #666 granica: 1px čvrsta #666 padding: 0 20px veličina fonta: 15px visina linije: 40px visina: 40px .button-green @extend %button background-color: zelena boja granice: zelena . button-red @extend %button boja pozadine: crvena boja obruba: crvena

Button-green, .button-red (boja pozadine: #666; granica: 1px čvrsta #666; padding: 0 20px; veličina fonta: 15px; visina linije: 40px; visina: 40px; ) .button-green ( boja pozadine: zelena; boja obruba: zelena; ) .button-red (boja pozadine: crvena; boja obruba: crvena; )

Šablon u ovom slučaju je birač dugmeta % (ovo je označeno znakom - %). Ovo je zgodno jer sam selektor šablona nigdje nije uključen, a njegove stilove nasljeđuju drugi selektori putem direktive - @extend. Ovaj šablon se može koristiti koliko god puta želite, čime se smanjuje količina koda.

SassScript

U Sass-u, kao iu programskim jezicima, postoje funkcije kao što su: kreiranje varijabli, aritmetičke operacije (sabiranje, oduzimanje, dijeljenje, množenje, itd.), iteracije (petlje), funkcije (miksinovi) i još mnogo toga. Odnosno, Sass je vrsta programskog jezika, koji je opet dizajniran da pojednostavi pisanje koda i značajno ubrza rad.

Varijable

Varijabla u Sassu počinje znakom $ , a ime je napisano latinicom, na primjer: $color . Treba napomenuti da su znakovi: “ — " i " _ » su zamjenjivi. Na primjer, ako ste pozvali $color-red , tada možete pozvati $color_red . Varijabla je definirana na sljedeći način: $name: vrijednost, na primjer: $color: #f6f6f6 .

Varijabla deklarirana izvan bilo kojeg nivoa ugniježđenja dostupna je globalno, tj. može se koristiti svuda. Ako definirate varijablu na bilo kojoj razini ugniježđenja selektora, ona će biti dostupna samo na ovoj razini. Da bi funkcionirao globalno u cijelom dokumentu, morate navesti ključnu riječ !global.

Naslov $font-size: 10px !global font-size: $font-size .subtitle font-size: $font-size

Općenito, varijable su divna stvar; samo ih trebate deklarirati i unijeti vrijednost, a zatim ih možete koristiti koliko god želite, bilo gdje. Na primjer, možemo definirati boje dajući im određena imena, veličinu fonta, familiju fontova itd. i bilo kakva značenja uopšte.

Direktive

@extend

Gore smo se dotakli ove direktive kada smo proučavali prazan šablon. Ponovo učvrstimo svoja znanja. Korišćenjem @extend možemo kopirati pravila bilo kojeg selektora. Na primjer, tokom rasporeda može se dogoditi da element “ A"i element" B"mogu biti slični po izgledu. U ovom slučaju možete napisati pravila za element "A", a za "B" možete jednostavno kopirati stilove elementa "A", malo redefinirajući potrebna svojstva.

Block_a background-color: #cccccc granica: 5px solid #999999 padding: 20px font-size: 30px visina: 150px širina: 150px .block_b @extend .block_a padding: 15px

Block_a, .block_b (boja pozadine: #cccccc; granica: 5px čvrsta #999999; padding: 20px; veličina fonta: 30px; visina: 150px; širina: 150px; ) .block_b (ispuna: 15px; )

U ovom primjeru napravili smo 2 identična kvadrata. Za kvadrat “B” samo smo redefinirali padding: 15px. Ovako funkcionira @extend. Često koristim ovu direktivu.

@import

Ova direktiva vam omogućava da kombinujete nekoliko stilskih datoteka u jednu. Ovo je vrlo zgodno, posebno ako je projekat velik. Ne treba se brkati sa direktivom koja postoji u Css-u - @import. U Css-u, traženi atribut je − url().

U stvari, zgodnije je pisati stilove u različite datoteke i svaki ima svoju svrhu. Na primjer, cijeli okvir stranice može se podijeliti na regije: header.sass, sidebar.sass, footer.sass. Možete prikupiti sve u glavnom fajlu main.sass koristeći @import. Datoteke regije se također mogu navesti korištenjem donje crte na početku naziva datoteke, na primjer: _header.sass, _sidebar.sass, _footer.sass. Takve datoteke se nazivaju fragmenti. Prilikom uvoza fragmenata nije potrebno specificirati ekstenziju datoteke.

Jednostavan uvoz

@import "header.sass" @import "sidebar.sass" @import "footer.sass"

Uvoz fragmenata

@import "header" @import "sidebar" @import "footer"

Datoteke fragmenata mogu imati sljedeće ekstenzije: *.sass, *.scss ili *.css. Na primjer, glavna datoteka može imati ekstenziju *.sass, i zaglavlje stranice, na primjer, s ekstenzijom *.scss. Odnosno, nije važno koju ekstenziju ima vaš glavni fajl. Treba napomenuti da se prilikom uvoza sve varijable i miksini (o njima ćemo govoriti u nastavku) prenose u glavni fajl u koji se vrši uvoz.

Također možete odrediti uvoz nekoliko datoteka odvojenih zarezima: @import “header”, “sidebar”, “footer”.

Imajte na umu da se uvoz dešava na mjestu gdje ste naveli direktivu @import. To se obično radi na početku dokumenta.

@at-root

Direktiva @at-root govori sam za sebe i ako se prevede na ruski, zvučaće ovako - "iz korijena". Drugim riječima, pomjeramo selektor u korijen, poništavajući lanac roditeljskih selektora. Ovdje, naravno, možete postaviti pitanje: „Zašto je potrebna ova direktiva ako možete ručno premjestiti selektor u korijen?“ Odgovor je jednostavan - pogodnost pisanja koda bez narušavanja strukture. Kada naučite da radite sa Sass-om u najvećoj meri, shvatićete ovo.

Glavni &-title font-size: 30px boja: #444 @at-root .main__icon boja: #444 širina: 20px

Glavni-naslov (veličina fonta: 30px; boja: #444; ) .main__icon (boja: #444; širina: 20px; )

Kontrolne direktive i izrazi

@if direktiva

Ova direktiva izvršava stilove ako izraz zatvoren u njoj vraća bilo koju vrijednost osim false I null.

$color: zelena .header @if $color == zelena boja pozadine: zelena @else if $color == plava boja pozadine: plava @else boja pozadine: #f6f6f6

Zaglavlje (boja pozadine: zelena; )

Onima koji su upoznati barem s osnovama programskog jezika (na primjer, javaScript ili Php) neće biti teško razumjeti. Suština je ovdje ista, glavna stvar je znati sintaksu pisanja koda.

@za direktivu

U programskom jeziku (opet u Javascriptu ili Php) koristeći Za možete podesiti ciklus. U Sass-u ova direktiva radi istu stvar - stvara petlju. Za svaku iteraciju (ponavljanje) koristi se varijabla brojača koja mijenja izlazne podatke.

Direktiva ima 2 oblika pisanja: 1. @for $var from<начало>kroz<конец>i 2. @za $var od<начало>to<конец>. Ako želite da posljednja znamenka bude uključena u petlju, tada koristite " kroz". Pogledajmo primjer:

@za $i od 1 do 6 .elem-item-#($i) background-image: url("images/image-#($i).jpg")

Elem-stavka-1 (slika pozadine: url("images/image-1.jpg"); ) .elem-item-2 (slika pozadine: url("images/image-2.jpg"); ) . elem-item-3 (slika pozadine: url("images/image-3.jpg"); ) .elem-item-4 (slika pozadine: url("images/image-4.jpg"); ) . elem-item-5 (slika pozadine: url("images/image-5.jpg"); )

Za određivanje konačne vrijednosti koristio sam ključnu riječ " to". U ovoj situaciji, ciklus se završava na broj - 5 . Obratite pažnju kako kompaktno izgleda Sass kod.

@svaka direktiva

Direktiva @svaki baš kao i @for, prikazuje vrijednosti u petlji i zgodan je jer, osim brojeva, možete iterirati određene vrijednosti. Uzmimo gornju petlju i promijenimo je na neke vrijednosti.

@svaki $bgItem u životinjama, jezeru, moru, pejzažu, prirodi .elem-item-#($bgItem) background-image: url("images/image-#($bgItem).jpg")

Element-životinja (pozadinska slika: url("images/image-animal.jpg"); ) .elem-stavka-jezero (pozadinska slika: url("images/image-lake.jpg"); ) . elem-item-more ( background-image: url("images/image-sea.jpg"); ) .elem-item-landscape (pozadinska slika: url("images/image-landscape.jpg"); ) . elem-item-nature (pozadinska slika: url("images/image-nature.jpg"); )

U ovom slučaju, varijabla brojača se ne kreira, a broj iteracija ovisi o broju kreiranih vrijednosti nakon ključne riječi " in". Vrijednosti se izlaze kroz varijablu (u ovom primjeru - $bgItem), čije ime može biti proizvoljno.

Miksini (funkcije)

Miksini (miksini) su vrsta funkcije, kao u programskom jeziku, koja je dizajnirana da se riješi koda koji se ponavlja. Miksovi mogu sadržavati cijele isječke stila, koji su dozvoljeni u Sass-u. Pogledajmo primjer radi veće jasnoće.

@mixin align-center pozicija: apsolutni vrh: 50% lijevo: 50% transformacija: translate(-50%, -50%) .container @include align-center

Miksin se kreira sa @mixin direktivom, nakon čega sledi razmak odvojen imenom miksina, kao i opciono prosleđenim parametrima. Odmah da napomenem da su crtice (-) i donje crte (_) u nazivu mixina zamjenjive. Miksin može sadržavati ne samo pravila, već i selektore. Gore sam dao primjer elementarnog mixina bez parametara.

Mixin se poziva sa @include direktivom, a zatim, odvojeno razmakom, označavamo ime kreiranog mixina. U gornjem primjeru, ovo je centriranje bloka duž ose X i Y ose koristeći apsolutno pozicioniranje. Ako ovo morate često koristiti, složit ćete se da je lakše samo pozvati mixin nego pisati stilove za centriranje iznova i iznova.

Sada pogledajmo mixin sa parametrima (argumentima).

@mixin granica ($width, $color) granica: širina: $width stil: puna boja: $color .square @include border(2px, #ccc)

Kvadrat ( širina ivice: 2px; stil ivice: čvrsta; boja ivice: #ccc; )

Kao što vidite, iza imena mixina u zagradama navodimo argumente, u ovom slučaju širinu i boju ivice. Ovo je najjednostavniji mixin koji sam dao radi jasnoće. U praksi, možete pronaći složenije miksine koristeći različite uslove i varijable. Ali nemojmo sada sve komplikovati; uvijek treba početi s nečim malim i jednostavnim, a zatim ići naviše kako idemo prema gore.

Ovim završavam moj kratki pregled Sass preprocesora. Zašto mali? Da, jer ovo nije sve što sam ti rekao. Općenito, koristeći gore navedeno, možete bezbedno početi koristiti Sass umjesto Css sada. Možete saznati više o Sass-u pozivajući se na dokumentaciju koju sam dao gore.

Pa, hvala svima na pažnji! Kao i uvijek, postavljajte pitanja u komentarima i pretplatite se ili na telegram kanal ili na email newsletter (forma na bočnoj traci sa desne strane) kako ne biste propustili ništa zanimljivo.

Vidimo se u mojim drugim objavama...

Članak "SASS za dizajnere i više" za 2013-02-21 preimenovan je u " SASS sintaksa" i ažurirano (2014-02-17)

Sass- ovo je predprocesorski jezik; predprocesori kompiliraju CSS kod koji pišemo u procesorskom jeziku (SASS) u čisti CSS kod.

SASS dokumentacija je više namenjena programerima, tako da dizajneri nisu uvek voljni da počnu da rade sa SASS-om. Osim toga, prednosti korištenja SASS-a iz perspektive dizajnera nisu uvijek jasno navedene.

U ovom članku želim pokriti nekoliko jednostavnih principa. Nisam stručnjak za SASS, ali moram naglasiti da je korištenje sass-a mudra odluka.

Koje su to prednosti? Bićete u mogućnosti da logički strukturirate svoj kod, čime ćete ubrzati proces pisanja koda; broj ponavljanja će se značajno smanjiti (varijable će nam pomoći u tome), kod će postati mnogo lakši za održavanje. SASS jezik olakšava rad na projektu, bez obzira ko ste - programer ili dizajner. Istina je.

Varijable

U SASS ime varijabla počinje znakom dolara ($). Vrijednosti varijable su identične vrijednostima svojstava CSS-a.

Počnimo s osnovama, odnosno varijablama. Pogledajmo varijable na osnovu sljedećeg primjera. Mi obično koristimo više boja u dokumentu. Kao rezultat toga, morate pisati vrijednosti boja u hex ili rgb formatu iznova i iznova. Ako želimo promijeniti bilo koju boju, morat ćemo automatski zamijeniti cijeli dokument. Međutim, ne možemo biti sigurni da nećemo uhvatiti nepotrebnu vrijednost.

A (boja: #822733;).summary (boja: #822733;).copyright (boja: #822733;)

Na primjer, možete imati nekoliko pravila koja određuju tamnocrvenu boju za željene birače. SASS jezik nam omogućava da uradimo sledeće: na početku dokumenta možemo definisati promenljivu koja se zove $brand-colour, a zatim u dokument, umesto same vrednosti, staviti ime varijable. Zatim, ako trebamo promijeniti boju, samo trebamo promijeniti vrijednost varijable $brand-colour i to će promijeniti boju svih pravila koja koriste varijablu $brand-colour.

// Moja SASS biblioteka boja $brand-colour: #822733; a (boja: $brand-colour;).sažetak (boja: $brand-colour;).copyright (boja: $brand-colour;)

Numeričke vrijednosti za varijable

Varijable mogu sadržavati ne samo nizove, već i brojeve kojima možete manipulirati. Ako koristite mreže ili skale izgleda zasnovane na određenim vrijednostima, vjerojatno ćete koristiti ove vrijednosti u cijeloj datoteci stila. Na primjer, ako stalno koristite vrijednost od 10px, tada možete definirati varijablu kao što je $unit = 10px. Ova varijabla se može više puta koristiti u vašem kodu. Umjesto imena varijable, kao i obično, bit će zamijenjena vrijednost (10px).

Ali šta ako trebate udvostručiti vrijednost varijable? Na primjer, želite udvostručiti donju marginu elementa. Koristeći SASS možete dodati jednostavnu matematiku (+ , - , * , / , %), na primjer u našem slučaju:

$unit = 10px; h1, h2, h3 ( margin-bottom: $unit;) p ( margin-bottom: $unit;) na stranu ( margin-bottom: $unit*2; /* 20px */) footer (margin-top: $unit* 4; /* 40px */)

Nečistoće

Nečistoća može se uporediti sa blokom deklaracija koji se ponavlja u kodu. Ovo je dio koda koji možete koristiti bilo gdje u dokumentu. Ne samo da ćete eliminisati nepotrebno ponavljanje, već ćete i kod učiniti čišćim, jer ćete se osloboditi potrebe da koristite istu klasu za različite elemente.

Na primjer, na svojoj web stranici imate separator koji često koristite. Na primjer, možete ga koristiti da razbijete glavne blokove (na primjer, članke i zaglavlje) ili čak paragrafe. Razdjelnik ima donji padding, donju marginu, ivicu i sjenu.

Da biste kreirali ivicu, elementu možete dodati klasu .shadow-border. Ali ovo će značajno zagaditi vašu html i css datoteku.

Shadow-border ( border-bottom: 1px solid #a4a4a4; -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); box-shadow: 0px 2px 5px 0px rgba(200,202) , 0.6); padding-bottom: 20px; margin-bottom: 40px; )

Ako želite ispravnu strukturu u css datoteci i čistu html oznaku, morate dodati gornje pravilo odgovarajućim html elementima. Vrijedi napomenuti da ako postoji mnogo elemenata s graničnikom, to će značajno "pokvariti" datoteku stila, što će otežati održavanje datoteke stila.

Zaglavlje, članak, p.intro ( border-bottom: 1px solid #a4a4a4; -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); box-shadow: 0px 2px 5px 0px rgba(20 , 200, 200, 0.6); padding-bottom: 20px; margin-bottom: 40px; )

Koristeći @mixin, možete definirati ime za oglasni blok. Ovo ime ne bi trebalo ni na koji način biti povezano sa vašim HTML-om.

@mixin shadow-border ( border-bottom: 1px solid #a4a4a4; -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); box-shadow: 0px 2px 5px 0px0,rgba(200 , 200, 0.6); padding-bottom: 20px;margin-bottom: 40px;)

Zatim, da biste uključili mixin u element, trebate samo uključiti ime mixina: @include shadow-border;

@mixin shadow-border ( border-bottom: 1px solid #a4a4a4; -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); box-shadow: 0px 2px 5px 0px0,rgba(200 , 200, 0.6); padding-bottom: 20px;margin-bottom: 40px;) članak ( @include shadow-border;) header ( @include shadow-border;) p.intro ( @include shadow-border;)

Izgleda dobro.

Opcije za Mixins

Parametri za miksine su navedeni u zagradama iza imena miksina; Sadržaj mixina je zatvoren u vitičastim zagradama.

@mixin border-radius($radius: 1px) ( -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; ) /* USE */ .example-class( background-color: #900; @include border-radius(20px); )

Ugniježđenje nečistoća

Ponekad je vrlo zgodno moći ugnijezditi jednu nečistoću u drugu. Na primjer, moramo dodati mixin na već postojeći mixin:

$border-colour: #a4a4a4; $unit: 10px; @mixin suptilna senka ( -webkit-box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6); box-shadow: 0px 2px 5px 0px rgba(200, 200, 200, 0.6in); shadow-border ( @include subtle-shadow; border-bottom: $unit/10 solid $border-colour; padding-bottom: $unit*2; margin-bottom: $unit*4;) article ( @include shadow-border ;) zaglavlje ( @include shadow-border;) p.intro ( @include shadow-border;)

Prilozi

Miksini nisu jedina stvar koju možete staviti u CSS selektore (ili bolje rečeno, blokove deklaracije u sass fajlu). U SASS-u možete gnijezde elemente jedan unutar drugog. Ovo će eliminirati duple selektore i učiniti kod lakšim za čitanje.

/* regularni CSS */ .module h3 (font-weight: bold;) .module p (padding-bottom: 10px;)

/* pisati u SASS */ .module ( h3( font-weight: bold;) p ( padding-bottom: 10px;) )

Prilozi i upiti @media

Prilozi postaju nevjerovatno korisni kada radite s medijskim upitima. Obično, kada radite s medijskim upitima, morate kreirati dodatne stilove za različite rezolucije ekrana, a ponekad čak i kreirati zasebnu datoteku stila.

/* prozor za pregled - bilo koji, uključujući pretraživače koji ne podržavaju @media */ članak (font-size: 14px; line-height: 25px;) article h2 (font-size: 18px; padding-bottom: 15px;) /* za okvire za prikaz od 300px i šire (prvo mobilni uređaj) */ samo ekran @media i (min-širina: 300px) (članak (visina linije: 20px;širina: 90%;) članak h2 (padding-bottom: 10px;) ) / * za okvire za prikaz od 600px i šire */ samo ekran @media i (min-width: 600px) ( članak (visina linije: 25px;width: 80%;) članak h2 (padding-bottom: 15px;) ) /* za 900px okviri za prikaz i šire */ samo ekran @media i (min-width: 900px) (članak (širina: 60%;)) /* za 1200px okvire za prikaz i šire */ samo ekran @media i (min-width: 1200px) (članak (font-size: 16px; line-height: 30px; širina: 50%;) članak h2 (font-size: 21px; line-height: 35px; padding-bottom: 20px;) )

SASS, s druge strane, omogućava vam da ugnijezdite sve medijske upite direktno unutar elemenata. Ovo će vam olakšati pronalaženje i uređivanje stilova koji utiču na prilagodljivi izgled.

Članak (font-size: 14px; line-height: 25px; h2 (font-size: 18px; padding-bottom: 15px; ) samo @medijski ekran i (min-width: 300px) (line-height: 20px; širina: 90%; h2 ( padding-bottom: 10px; ) ) samo ekran @media i (min-width: 600px) (visina linije: 25px; širina: 80%; h2 (padding-bottom: 15px;)) samo @media ekran i (min. širina: 900px) ( širina: 60%; ) samo ekran @medija i (min. širina: 1200px) (veličina fonta: 16px; visina linije: 30px; širina: 50%; h2 (font- veličina: 21px; visina linije: 35px; padding-bottom: 20px; ) ) )

Uvoz, @import operator u SASS

@import operator
omogućava vam da uključite sadržaj CSS(SCSS) datoteke treće strane u trenutnu CSS(SCSS) datoteku.
@import nije dozvoljeno umetati nakon bilo koje deklaracije osim @charset ili drugog @importa.

Da biste uključili sadržaj, na primjer, _style_two.scss, trebate napisati ovako:

@import "style_two.scss"; /* povezivanje bez donje crte */

Bitan: ako povežete ne određenu datoteku, već mapu, tada se css datoteke neće generirati za datoteke koje počinju sa _ .
Na primjer, posjedovanje datoteke style.scss će rezultirati kreiranjem style.css , ali posjedovanje datoteke _some.scss neće. Dakle, donja crta znači da datoteka nije samostalni stilski list i da se može uvesti samo u drugi stilski list.

Petlje u SASS-u

Sintaksa za naredbu petlje (svaku) je sljedeća: $var in . $var je ime varijable i navedite vrijednost varijable $var.
Umjesto $var, vrijednosti iz , tada se sadržaj ciklusa prikazuje u datoteci stila (prema broju vrijednosti ).
Na primjer:

SCSS

@svaka $animal u pumi, morski puž, čaplja, salamander ( .#($animal)-icon ( background-image: url("/images/#($animal).png"); ) )

Sastavljeno na:

CSS

.puma-icon ( background-image: url("/images/puma.png"); ) .sea-slug-icon (pozadinska slika: url("/images/sea-slug.png"); ) .egret -icon (pozadinska slika: url("/images/egret.png"); ) .ikona-salamandra (pozadinska slika: url("/images/salamander.png"); )

@extend operator

Često postoji situacija u kojoj jedna klasa treba da ima sve stilove druge klase, pored sopstvenih stilova. Najčešće rješenje je korištenje dvije klase; prvi sadrži opće stilove, drugi - specifične.

Operator @extend izbjegava ove probleme dopuštajući jednom selektoru da naslijedi stilove od drugog selektora. Na primjer:

SCSS

.error ( border: 1px #f00; background-color: #fdd; ) .error.intrusion ( background-image: url("/image/hacked.png"); ) .seriousError ( @extend .error; border-width : 3px;)

Sastavljeno na:

CSS

.error, .seriousError ( granica: 1px #f00; boja pozadine: #fdd; ) .error.intrusion, .seriousError.intrusion ( background-image: url("/image/hacked.png"); ) .seriousError ( border-width: 3px; )

Zdravo prijatelji!

Ovo je detaljan vodič za pretprocesor Sass za početnike. Ovdje ćemo se upoznati sa Sass predprocesorom, njegovim prednostima, sintaksom i razmotriti njegovu upotrebu na primjerima.

Cool

Plus

Mucaj

Sponzor izdanja - hosting partner: partnerwp.ru

Sve Sass/CSS primjere i prilagođeni Gulp projekt za ovaj vodič možete preuzeti sa GitHub-a.

Sass je jedan od najrazvijenijih i najstabilnijih CSS predprocesora, kao i jedan od najpopularnijih predprocesora među profesionalcima.

Prednosti Sass

• Kompatibilan sa različitim CSS verzijama, zahvaljujući čemu možete koristiti bilo koju CSS biblioteku u svom projektu;
• Veliki broj različitih funkcija za svaku priliku. Malo se CSS predprocesora može pohvaliti tako bogatom funkcionalnošću;
• Sass je jedan od najstarijih CSS pretprocesora, koji je upisao mnogo iskustva tokom mnogo godina svog postojanja;
• Odlična prilika za korištenje Sass okvira koji olakšavaju život programeru. Jedan takav okvir je Bourbon, koji koristimo u nekim izdanjima Jedaja kada pišemo Sass;
• Sintaksa. Možete odabrati jednu od dvije sintakse koja vam je bliža - pojednostavljenu (SASS) i proširenu nalik CSS-u (SCSS).

Kada sam se prvi put upoznao sa CSS preprocesorima, ja, kao i mnogi drugi web programeri početnici, nisam u potpunosti razumeo ideju korišćenja CSS preprocesora. Zašto napraviti dodatni sloj, koristiti neke alate, zakomplikovati CSS, pomislio sam. Ali s vremenom sam počeo shvaćati da je pisanje CSS-a iz dana u dan postalo mučenje, siva rutina; mnoge akcije su se morale ponavljati, selektori, svojstva, pa čak i cijeli blokovi CSS koda morali su se kopirati da bi se postigao željeni rezultat. Danas ću vam, koristeći primjere, pokazati kako možete pojednostaviti svoj rad koristeći Sass pretprocesor, diverzificirati svoj razvoj, pa čak i malo se zabaviti pisanjem nekih manje ili više složenih funkcija.

Postavljanje okruženja

Kao okruženje za rad sa Sass-om u ovoj lekciji, kao iu drugim našim lekcijama, koristićemo Sass verziju za Gulp task manager ( gulp-sass). Da biste koristili originalnu verziju Ruby-a ili kompajlirali Sass koristeći poseban softver, možete pročitati upute u kancelariji. web stranica. Ova lekcija je prvenstveno praktične prirode, tako da se nećemo zadržavati na mogućim opcijama za povezivanje s projektom, već ćemo povezati Sass na najpopularniji način, koristeći Gulp.

Provjerite imate li instaliranu najnoviju verziju Node.js i Gulp. Ako Node.js nije instaliran, preuzmite ga i instalirajte. Nakon instaliranja Node.js, instalirajte gulp pomoću naredbe "npm i -g gutljaj"(Windows) ili "sudo npm i -g gutljaj"(Linux, OS X). Pročitajte: .

Npm i --save-dev gulp gulp-sass

Var gulp = require("gulp"), // Povezivanje Gulp sass = require("gulp-sass"); // Povežite Sass paket gulp.task("sass", function() ( // Kreirajte zadatak "sass" return gulp.src(["sass/**/*.sass", "sass/**/* .scss "]) // Uzmite source.pipe(sass((outputStyle: "expanded")).on("error", sass.logError)) // Pretvorite Sass u CSS koristeći gulp-sass .pipe(gulp. dest(" css")) // Učitaj rezultat u css folder)); gulp.task("watch", function() (gulp.watch(["sass/**/*.sass", "sass/**/*.scss"], ["sass"]); // Gledajte iza sass datoteka u sass folderu)); gulp.task("default", ["watch"]);

Obratite pažnju na red 6 - ovdje koristimo jedan od stilova izlaza za rezultirajuću datoteku: ugniježđen- ugniježđeno, po defaultu; proširena- proširena; kompaktan- kompaktan, kada se selektor i njegova svojstva u vitičastim zagradama prikazuju u jednom redu; komprimiran- kompresovano. Osim toga, zahvaljujući obradi .on("greška", sass.logError) Ako dođe do greške, nećemo morati ponovo učitavati naredbu za izvršavanje Gulpfile i vidjet ćemo na kojoj liniji Sass datoteke imamo grešku. U primjerima ću koristiti izlazni stil proširena radi jasnoće.

Trebali biste imati sljedeću strukturu projekta na vašem sistemu datoteka:

• moj projekat/
  • css/
    • common.css
  • drsko/
    • common.sass
  • node_modules/
  • gulpfile.js
  • package.json

Počinjemo izvršavanje Gulpfile sa naredbom gutljaj u terminal foldera projekta.

Ovdje uzimamo sve Sass datoteke iz direktorija drsko/ vaš projekat i otpremite gotov CSS rezultat u fasciklu css/. Osim toga, ovdje uspostavljamo zapažanje gledati za promjene u Sass datotekama i automatsku kompilaciju u CSS, ako do takvih promjena dođe. Rezultirajuća css datoteka je uključena u izgled.

Ako ste zbunjeni oko postavljanja Gulp paketa u ovom primjeru, pročitajte Gulp priručnik.

Nakon što je naše okruženje konfigurirano i Sass je uspješno konvertiran u CSS prilikom spremanja *.sass datoteka u direktorij drsko/, možete bezbedno nastaviti sa učenjem i primeniti primere koje ćemo danas analizirati u praksi.

Sass sintaksa

Postoje 2 varijante pisanja Sass, 2 sintakse: SASS i SCSS. Najstariji pravopis Sass je sintaksa uvlačenja. Ovo je pravopis koji ćemo koristiti u našoj lekciji. Ekstenzija datoteke za ovu sintaksu je *.sass. Druga opcija je sintaksa, proširenje CSS sintakse, Sassy CSS. SCSS je napisan kao običan CSS, ali je poboljšan dodatnim karakteristikama Sass-a. Ekstenzija datoteke sa SCSS sintaksom - *.scss.

Veoma važno! Sintaksa uvlačenja zahtijeva vrlo striktno pridržavanje uvlačenja ugniježđenih svojstava, a ako dođe do grešaka pri pokretanju Gulp-a ili implicitnih grešaka bez navođenja linije u konzoli, najvjerovatnije je greška u netačnim uvlačenjima. Još jedan važan detalj - ako koristite tabove kao uvlake, kompajler će izbaciti grešku kada pokušate da konvertujete Sass, koji osim tabova koristi i razmake kao uvlake. Ili koristite samo tabove ili samo razmake.

SASS i SCSS sintaksa:

SASS - Sintaksa uvlačenja	SCSS - sintaksa proširenja
$font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack boja: $primary-color	$font-stack: Helvetica, sans-serif; $primary-color: #333; tijelo (font: 100% $font-stack; boja: $primary-color; )

Pored osnovnih pravila pisanja (kovrdže zagrade, tačka-zarez na kraju redaka), SASS i SCSS se razlikuju i u pisanju nekih funkcija. Zato budite oprezni kada koristite bilo koje primjere s Interneta, provjerite koja se točno sintaksa koristi. Ako je prilično veliki primjer s interneta napravljen u SCSS stilu, a vaš projekt napisan u SASS-u, možete ga uvesti u svoju glavnu datoteku bez promjene sintakse i ekstenzije datoteke pomoću direktive @import, na primjer, ako ste preuzeli datoteku carousel.scss, onda ga možete povezati sa svojim main.sass linija @import "vrtuljak". Možete učiniti i suprotnu situaciju, kada trebate uvesti *.sass datoteke u datoteku main.scss. U našem primjeru iz Githuba uvozimo sve _x.x.sass datoteke u jednu common.sass, gdje je x.x broj naslova primjera iz ovog članka.

Koristićemo sintaksu uvlačenja.

1. Proširivanje CSS-a sa Sass-om

1.1 Pravila ulaganja

Sass daje programerima odličnu priliku da ugnezde CSS pravila u druge, smanjujući na taj način vreme utrošeno na pisanje/kopiranje dugih selektora i čineći kod strukturiranijim, sa jasnom hijerarhijom.

1.2 Vezivanje za roditeljski selektor

Ako želite proširiti selektor bez kreiranja novog pravila, možete povezati dodatne selektore na gotov selektor pomoću znaka & . Na površini ovo izgleda kao kreiranje podređenog selektora u hijerarhiji, ali korištenje & , proširujemo roditeljski selektor umjesto da kreiramo podređeni.

Obratite pažnju na pravilo body.firefox &, što nam omogućava da dobijemo novi lanac iz bilo kojeg elementa prije trenutnog ako je postavljen na kraju & .

Dodatno, roditeljsko vezivanje se može koristiti za kreiranje složenih selektora:

1.3 Ugniježđena svojstva

Radi praktičnosti, možete razbiti sufiks imenskog prostora svojstva u priloge. Na primjer, margina-vrh, margina-dno margina-lijevo, margina- prava imaju zajedničku osnovu margina i može se podijeliti na priloge na sljedeći način:

1.4 Selektori zamjenskih znakova

Ponekad se javlja situacija kada nekoliko elemenata na stranici koristi istu CSS bazu, isti skup svojstava, specifičnih samo za njih. Ova osnovna CSS pravila mogu biti upakovana kao džoker selektor za upotrebu na više mjesta u Sass-u. Selektori zamjenskih znakova su zaključeni pomoću direktive @extend.

2. SassScript

SassScript vam omogućava da značajno proširite mogućnosti Sass-a kroz korištenje prilagođenih varijabli, aritmetičkih i drugih funkcija. SassScript se može koristiti za automatsko generiranje novih selektora i svojstava.

2.1 Varijable u Sass

Zaista je super funkcija biti u mogućnosti definirati varijable koje se mogu koristiti bilo gdje u vašoj Sass datoteci. Boje, zadane vrijednosti, jedinice, sve se to može uzeti u varijablu i koristiti u budućnosti. Varijabla je definirana ovako: $name: vrijednost.

2.2 Operacije s brojevima i nizovima + interpolacija

Sass vam daje mogućnost korištenja standardnih aritmetičkih operacija nad brojevima, kao što su sabiranje (+), oduzimanje (-), dijeljenje (/) i modul (%). Operatori poređenja (<, >, <=, >=, ==, !=) su takođe podržani za brojeve.

Uz to, Sass ima mogućnost spajanja (povezivanja) nizova.

Kao što možemo vidjeti iz primjera $zbroj: 10 + 20 / 2, prioritet se posmatra u izvođenju aritmetičkih operacija - prvo dijeljenje, pa sabiranje. Da biste definirali redoslijed operacija, možete koristiti zagrade, kao u matematici. Imajte na umu da prilikom dodavanja 12px + 8px, dobićemo 20px.

Također obratite pažnju na redove 2 i 9, ovdje koristimo interpolaciju za postavljanje dinamičkih vrijednosti ​​bilo gdje u Sass datoteci, uključujući i mjesto gdje imamo ime svojstva, ime selektora ili na bilo koji red .

Interpolacija- ovo je dobijanje nove vrednosti korišćenjem drugih.

Najčešća upotreba interpolacije u Sass-u je da se dobije nova vrijednost za varijablu tako što će je "integrirati" u vrijednost druge varijable, kroz konstrukciju #{} , Na primjer:

Ne možete jednostavno umetnuti varijablu u string bez upotrebe interpolacije, kao što to možete učiniti u PHP-u sa dvostrukim navodnicima. Obavezno koristite interpolaciju u varijable.

2.3 Operacije sa cvijećem

Boje u Sass-u se mogu dodavati, oduzimati, dijeliti i množiti. Sve aritmetičke operacije se izvode za svaku boju posebno: crvenu, zelenu i plavu.

Imajte na umu da kada dodajete rgba boje, posljednji parametar neprozirnosti od 0,75 ne smije se razlikovati od ostalih u izrazu, inače dodavanje neće uspjeti. Umjesto toga, možete podesiti rgba alfa kanal pomoću opacify I transparentnost ili kontrolirajte neprozirnost HEX boje koristeći rgba funkciju.

3. Direktive i pravila

3.1 @import

Možete uvesti u svoju Sass datoteku sass, scss I css datoteke koristeći direktivu @import, dok će svi miksini i varijable raditi u glavnoj datoteci u koju se vrši uvoz.

@import će raditi kao običan CSS @import ako:

• prisutan na putanji do datoteke http://;
• datoteka se poziva putem url();
• ili uvoz sadrži parametre medija.

Da bi drugi fajl bio u potpunosti uvezen u glavnu Sass datoteku, ekstenzija datoteke mora biti *.sass, *.scss ili *.css.

Pogledajmo neke primjere.

Sljedeće datoteke su uvezene neću:

Sljedeći fajlovi će uvezeno:

Pažnja! U novim verzijama gulp-sass da biste uvezli CSS fajlove u Sass, morate navesti ekstenziju .css

Moguće je uvesti više datoteka, odvojenih zarezima: @import "header", "media".

Pozivaju se datoteke koje počinju donjom crtom fragmenti i ne zahtijevaju navođenje donjih crta ili ekstenzija prilikom uvoza. Na primjer, fajl _header.sass može se uvesti ovako: @import "header".

Imajte na umu da se uvoz događa na lokaciji gdje navedete direktivu @import. Shodno tome, moguće je izvršiti ugniježđeni uvoz na mjestu gdje je to potrebno:

#main @import "example"

3.2 @at-root

Direktiva @at-root podiže pravila sadržana u njemu do korijena, poništavajući lanac od roditelja. Ovdje je sve jednostavno:

Nismo pogledali sve direktive koje se nalaze u Sassu, već samo one koje se najviše koriste u praksi. Ako ste zainteresirani za dublje zaroniti u Sass direktive, pogledajte dokumentaciju.

4. Izrazi

Sass podržava upotrebu izraza i funkcija za različite uslove, implementacije petlje, itd.

4.1 Direktiva @if().

Direktiva @if() dozvoljava izvršavanje SassScript-a pod određenim uslovima i ima sljedeću sintaksu:

4.2 @za Direktivu

@for prikazuje blok sa stilovima određeni broj puta. Možete postaviti varijablu brojača u vrijeme izvođenja.

Možete odrediti kroz umjesto do, ako trebate ići od 1 do 11 uključujući, a ne samo do 10, kao u primjeru.

4.3 @svaka direktiva

Ako želite iterirati kroz listu vrijednosti, a ne samo brojeve, možete koristiti direktivu @svaki:

4.4 Direktiva @while

@while petlja kroz stilske blokove dok je izraz istinito.

5. Miksini

Hagfish- Sass blokovi koda (ili miksine šablona), koji mogu uzeti argumente (opciono) i mogu značajno proširiti mogućnosti pisanja stilova i smanjiti vrijeme utrošeno na primjenu sličnih pravila, pa čak i cijelih CSS blokova. To je nešto poput funkcije koja može uzeti argument, obaviti ogromnu količinu posla i proizvesti rezultat ovisno o ulaznom parametru.

Miksin je deklarisan direktivom @mixin, nakon objave mora biti naznačeno Ime hagfish. Poziva se po mixin direktivi @include, koji uzima ime mixina i proslijeđene argumente, ako ih ima.

Prijatelji, pogledali smo glavne karakteristike Sass-a, koje su dovoljne za plodonosan rad sa CSS stilovima web stranica. Neke direktive i funkcije nisu uključene u ovaj vodič, ali ako ste zainteresovani da saznate više o svim karakteristikama Sass-a, biće korisno.

Odmah ću odgovoriti na pitanje - kako raditi sa Sass stilovima na gotovoj web stranici, da li je zaista potrebno uređivati ​​gotov CSS i uploadati ga putem FTP-a? Ne, ne možete to učiniti. Trebali biste imati lokalnu kopiju vaših Sass stilova ili čak cijelu stranicu i, nakon završetka rada, implementirajte (uploadujte) gotove stilove putem FTP-a. Za to možete koristiti Gulp paket vinyl-ftp. Ili postavite Sass okruženje na vašem serveru da kompajlira fajlove otpremljene preko FTP/sFTP.

To je sve za danas. Hvala vam na pažnji!