Pozdrav prijatelji!

Ovaj detaljan vodič pretprocesorom Sass za početnike. Ovdje ćemo se upoznati sa Sass pretprocesorom, njegovim prednostima, sintaksom i razmotriti njegovu upotrebu uz primjere.

Cool

Plus

Mucanje

Sponzor izdanja - hosting partner: partnerwp.ru

Možete preuzeti sve Sass/CSS primjere i prilagođeni Gulp projekt za ovaj vodič s GitHuba.

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

Prednosti Sass-a

• Kompatibilan sa različite verzije CSS, zahvaljujući kojem 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 predprocesora, koji je apsorbirao mnogo iskustva tijekom mnogih godina svog postojanja;
• Izvrsna prilika za korištenje Sass okvira koji olakšavaju život programeru. Jedan takav okvir je Bourbon, koji koristimo u nekim izdanjima Jedija kada pišemo Sass;
• Sintaksa. Možete odabrati jednu od dvije sintakse koja vam je bliža - pojednostavljenu (SASS) i proširenu CSS-u (SCSS).

Kada sam se prvi put upoznao sa CSS pretprocesorima, ja, kao i mnogi drugi web programeri početnici, nisam u potpunosti razumio ideju korištenja CSS pretprocesora. Zašto napraviti dodatni sloj, koristiti neke alate, komplicirati CSS, pomislio sam. Ali s vremenom sam počeo shvaćati da je pisanje CSS-a iz dana u dan postalo mučenje, da su se morale ponavljati mnoge radnje, 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 predprocesor, diverzificirati svoj razvoj, pa čak i malo se zabaviti pisanjem nekih više ili manje složenih funkcija.

Postavljanje okoline

Kao okruženje za rad sa Sassom u ovoj lekciji, kao iu drugim našim lekcijama, koristit ćemo Sass verziju za upravitelja zadataka Gulp ( gutljaj-sass). Za korištenje izvorne Ruby verzije ili kompajliranje Sass-a pomoću posebnog softvera, možete pročitati upute u uredu. web stranica. Ova lekcija prvenstveno je praktične prirode, stoga se nećemo zadržavati na mogućim opcijama povezivanja s projektom; spojit ćemo Sass na najpopularniji način, koristeći Gulp.

Provjerite jeste li instalirali najnovija verzija Node.js i Gulp. Ako Node.js nije instaliran, preuzmite ga i instalirajte. Nakon instalacije Node.js, instalirajte gulp s naredbom "npm i -g gutljaj"(Windows) ili "sudo npm i -g gulp"(Linux, OS X). Pročitaj: .

Npm i --save-dev gulp gulp-sass

Var gulp = require("gulp"), // Connect Gulp sass = require("gulp-sass"); // Povežite Sass paket gulp.task("sass", function() ( // Kreirajte zadatak "sass" return gulp.src(["sass/**/*.sass", "sass/**/* .scss "]) // Uzmi izvor.pipe(sass((outputStyle: "expanded")).on("error", sass.logError)) // Pretvori Sass u CSS pomoću gulp-sass .pipe(gulp. dest(" css")) // Učitaj rezultat u mapu css)); gulp.task("watch", function() ( gulp.watch(["sass/**/*.sass", "sass/**/*.scss"], ["sass"]); // Gledaj iza sass datoteka u sass mapi)); gulp.task("zadano", ["gledaj"]);

Obratite pozornost na redak 6 - ovdje koristimo jedan od izlaznih stilova za rezultirajuću datoteku: ugniježđeni- ugniježđeno, prema zadanim postavkama; proširena- prošireno; kompaktan- kompaktan, kada se selektor i njegova svojstva u vitičastim zagradama prikazuju u jednom retku; komprimiran- stisnut. Štoviše, zahvaljujući obradi .on("greška", sass.logError) Ako dođe do pogreške, nećemo morati ponovno učitati Gulpfile izvršnu naredbu i vidjet ćemo u kojem retku Sass datoteke imamo pogrešku. U primjerima ću koristiti izlazni stil proširena radi jasnoće.

Moraš imati sljedeća struktura projekt u vašem datotečni sustav:

• moj projekt/
  • css/
    • zajednički.css
  • sass/
    • zajednički.sass
  • čvor_moduli/
  • gulpfile.js
  • paket.json

Započinjemo izvršavanje Gulpfilea naredbom gutljaj u terminalu mape projekta.

Ovdje preuzimamo sve Sass datoteke iz direktorija sass/ svoj projekt i prenesite gotov CSS rezultat u mapu css/. Osim toga, ovdje utvrđujemo opažanje gledati za promjene u Sass datotekama i automatsku kompilaciju u CSS, ako do takvih promjena dođe. Rezultirajuća css datoteka uključena je u izgled.

Ako postoji nešto što ne razumijete o postavljanju Gulp paketa u u ovom primjeru, pročitajte Gulp priručnik.

Nakon što je naše okruženje konfigurirano i Sass uspješno pretvoren u CSS prilikom spremanja *.sass datoteka u direktorij sass/, možete sigurno nastaviti učiti i provoditi primjere koje ćemo danas analizirati u praksi.

Sass sintaksa

Postoje 2 varijante pisanja Sass, 2 sintakse: SASS i SCSS. Većina stara verzija Sass pisanje 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, šireći se CSS sintaksa , Sassy CSS. SCSS je napisan kao obični CSS, ali poboljšan dodatnim značajkama Sass-a. Ekstenzija datoteke sa SCSS sintaksom - *.scss.

Vrlo važno! Sintaksa uvlačenja zahtijeva vrlo striktno pridržavanje uvlačenja ugniježđenih svojstava, a ako naiđete na pogreške prilikom pokretanja Gulp-a ili implicitne pogreške bez navođenja retka u konzoli, najvjerojatnije je pogreška u netočnim uvlakama. Još jedan važan detalj - ako koristite tabove kao uvlake, prevodilac će izbaciti grešku kada pokušate pretvoriti Sass, koji osim tabova koristi i razmake kao uvlake. Ili koristite samo tabulatore 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 color: $primary-color	$font-stack: Helvetica, sans-serif; $primarna-boja: #333; tijelo (font: 100% $font-stack; boja: $primary-color; )

Osim osnovnih pravila pisanja (vitičaste zagrade, točka-zarez na kraju redaka), SASS i SCSS razlikuju se i po pisanju nekih funkcija. Zato budite oprezni kada koristite primjere s interneta, provjerite koja se točno sintaksa koristi. Ako je prilično velik primjer s interneta izrađen u SCSS stilu, a vaš projekt napisan u SASS-u, možete ga uvesti u svoju glavnu datoteku bez mijenjanja sintakse i ekstenzije datoteke pomoću direktive @uvoz, na primjer, ako ste preuzeli datoteku vrtuljak.scss, tada ga možete povezati sa svojim glavni.sass linija @import "vrtuljak". Također možete učiniti suprotnu situaciju, kada trebate uvesti *.sass datoteke u main.scss datoteku. U našem primjeru s Githuba uvozimo sve _x.x.sass datoteke u jednu zajednički.sass, gdje je x.x broj naslova primjera iz ovog članka.

Koristit ćemo sintaksu uvlačenja.

1. Proširenje CSS-a sa Sassom

1.1 Pravila ulaganja

Sass daje programerima sjajnu priliku za ugniježđivanje CSS pravila unutar drugih, čime se smanjuje vrijeme utrošeno na pisanje/kopiranje dugačkih selektora i čini kod strukturiranijim, s jasnom hijerarhijom.

1.2 Povezivanje s nadređenim selektorom

Ako želite proširiti selektor bez stvaranja novog pravila, možete vezati dodatne selektore na gotov selektor pomoću znaka & . Izvana izgleda kao stvorenje izbornik djeteta u hijerarhiji, ali koristeći & , proširujemo nadređeni selektor umjesto da stvaramo podređeni.

Obratite pozornost na pravilo tijelo.firefox &, što nam omogućuje da dobijemo novi lanac iz bilo kojeg elementa prije trenutnog ako je postavljen na kraju & .

Dodatno, nadređeno vezanje može se koristiti za stvaranje složenih selektora:

1.3 Ugniježđena svojstva

Radi praktičnosti, možete rastaviti sufiks prostora naziva svojstva u privitke. Na primjer, margina-vrh, margina-dno margina-lijevo, margina-pravo imati zajednički temelj margina i može se podijeliti na sljedeće priloge:

1.4 Selektori zamjenskih znakova

Ponekad se dogodi situacija kada nekoliko elemenata na stranici koristi istu CSS bazu, isti skup svojstava, specifičnih samo za njih. Ova osnovna CSS pravila mogu se pakirati kao selektor zamjenskih znakova za korištenje na više mjesta u Sass-u. Selektori zamjenskih znakova izvedeni su pomoću direktive @proširi.

2. SassScript

SassScript vam omogućuje da značajno proširite mogućnosti Sass-a korištenjem prilagođenih varijabli, aritmetike i drugih funkcija. SassScript se može koristiti za automatsko generiranje novi selektori i svojstva.

2.1 Varijable u Sass-u

Stvarno je super značajka moći 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 na brojevima, kao što su zbrajanje (+), oduzimanje (-), dijeljenje (/) i modul (%). Operatori usporedbe (<, >, <=, >=, ==, !=) također su podržani za brojeve.

Osim toga, Sass ima mogućnost ulančavanja (spajanja) nizova.

Kao što vidimo iz primjera $zbroj: 10 + 20 / 2, prioritet se promatra u izvođenju aritmetičkih operacija - prvo dijeljenje, zatim zbrajanje. Za definiranje redoslijeda operacija možete koristiti zagrade, kao u matematici. Imajte na umu da prilikom dodavanja 12 px + 8 px, dobit ćemo 20 px.

Također obratite pozornost na retke 2 i 9, ovdje koristimo interpolaciju za postavljanje dinamičkih vrijednosti bilo gdje u Sass datoteci, uključujući mjesto gdje imamo naziv svojstva, naziv selektora ili bilo koji redak.

Interpolacija- ovo je dobivanje nove vrijednosti pomoću drugih.

Najčešća uporaba interpolacije u Sass-u je dobivanje nove vrijednosti za varijablu njezinim "integriranjem" u vrijednost druge varijable, kroz konstrukciju #{} , Na primjer:

Ne možete samo umetnuti varijablu u niz bez korištenja interpolacije, kao što možete učiniti u PHP-u, na primjer, u dvostruki navodnici. Svakako koristite interpolaciju u varijable.

2.3 Operacije s cvijećem

Boje u Sassu se mogu zbrajati, oduzimati, dijeliti i množiti. Sve aritmetičke operacije izvode se 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 zamutiti I transparentizirati ili kontrolirajte neprozirnost HEX boje pomoću funkcije rgba.

3. Direktive i pravila

3.1 @uvoz

Možete uvesti u svoju Sass datoteku sass, scss I css datoteke pomoću direktive @uvoz, dok će svi mixini i varijable raditi u glavnoj datoteci u koju se uvoz događa.

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

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

Kako bi se druga datoteka u potpunosti uvezla u glavnu Sass datoteku, ekstenzija datoteke mora biti *.sass, *.scss ili *.css.

Pogledajmo neke primjere.

Sljedeće datoteke su uvezene oni neće:

Sljedeće datoteke htjeti uvozni:

Pažnja! U novim verzijama gutljaj-sass za uvoz CSS datoteka u Sass morate navesti .css ekstenziju

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

Datoteke koje počinju podvlakom nazivaju se fragmenti i ne zahtijevaju navođenje podvlaka ili proširenja prilikom uvoza. Na primjer, datoteka _zaglavlje.sass može se uvesti ovako: @import "zaglavlje".

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

#main @import "primjer"

3.2 @korijenski

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

Nismo gledali sve direktive koje se nalaze u Sassu, već samo one najčešće korištene u praksi. Ako ste zainteresirani dublje zaroniti u Sass direktive, pogledajte dokumentaciju.

4. Izrazi

Sass podržava korištenje izraza i funkcija za raznim uvjetima, implementacije petlje, itd.

4.1 Direktiva @if().

Direktiva @ako() omogućuje vam izvršavanje SassScripta pod određenim uvjetima i ima sljedeću sintaksu:

4.2 @za Direktivu

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

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

4.3 @svaka Direktiva

Ako želite iterirati kroz popis vrijednosti umjesto samo brojeva, možete koristiti direktivu @svaki:

4.4 @while direktiva

@dok prolazi kroz stilske blokove dok je izraz pravi.

5. Mixins

dlakavica- Blokovi Sass koda (ili mixins predložaka), koji mogu uzeti argumente (po izboru) i mogu značajno proširiti mogućnosti pisanja stilova i smanjiti vrijeme utrošeno na primjenu istih pravila, pa čak i cijelih CSS blokova. To je nešto poput funkcije koja može uzeti argument, obaviti veliku količinu posla i dati rezultat ovisno o ulaznom parametru.

Mixin se deklarira direktivom @mixin, nakon objave mora biti naznačeno Ime dlakavi. Poziva se mixin direktivom @uključi, koji uzima ime mixina i proslijeđene argumente, ako ih ima.

Prijatelji, pogledali smo glavne značajke Sass-a, koje su dovoljne za plodan rad sa CSS stilovima web stranica. Neke direktive i značajke nisu uključene u ovaj priručnik, ali ako ste zainteresirani za učenje o svim značajkama Sassa, bit će korisno.

Odmah ću odgovoriti na pitanje - kako raditi sa Sass stilovima na gotovoj web stranici, je li stvarno potrebno urediti gotov CSS i učitati ga putem FTP-a? Ne, ne možete to učiniti. Trebali biste imati lokalnu kopiju svojih Sass stilova ili čak cijelu stranicu i nakon završetka rada implementirati (uploadati) putem FTP-a gotovi stilovi. Za to možete koristiti Gulp paket vinil-ftp. Ili postavite Sass okruženje na svom poslužitelju za kompajliranje datoteka učitanih putem FTP/sFTP.

To je sve za danas. Hvala na pozornosti!

Što je Sass, zašto je potreban, njegove mogućnosti, instalacija i kako ga koristiti u svojim projektima

Što je Sass

Sass(Syntactically Awesome Stylesheets) jedan je od najnaprednijih, najstabilnijih pretprocesora s bogatim značajkama. Vrlo je popularan među programerima. Sass je više napredan verzija CSS-a koja ima mnogo više značajki, a Sass je dizajniran za pojednostavljenje kaskadni stilski listovi.

Sass sintaksa ima 2 vrste: SASS I SCSS. SCSS je sličniji CSS-u, dok je SASS drugačiji u nedostatku vitičaste zagrade. Ugniježđeni elementi implementirani su uvlačenjem. Ovo je sintaksa koju ćemo ovdje koristiti.

Zašto ti treba Sass?

Da bismo razumjeli zašto je Sass potreban, nabrojimo neke od njih: mogućnosti:

1. Sass dopušta gniježđenje CSS pravila jedno u drugo
2. Ugniježđenje svojstava
3. Korištenje varijabli
4. Aritmetička podrška
5. Operacije s cvijećem
6. Mogućnost uvoza sass datoteke sass, scss I css datoteke
7. Korištenje Mixina
8. I mnogo više

Ukratko, zašto vam treba Sass: to ubrzava I pojednostavljuje razvojni proces.

Kako koristiti Sass

postoje različite načine počnite koristiti Sass:

1. Korištenje aplikacija (Koala, CodeKit, Compass i druge)
2. Korištenje naredbenog retka
3. Korištenje upravitelja zadataka
4. Jednostavno pretvorite Sass u CSS pomoću mrežnih usluga

Razmislite o korištenju Sass za voditelja zadataka Gutljaj. Prije nego započnete instalaciju, preporučljivo je upoznati se s osnovama Gulp-a.

Instalacija i povezivanje gulp-sass

Za instaliranje dodatka gutljaj-sass našem projektu, otvorite naredbeni redak u mapi projekta. Unesite sljedeću naredbu:

npm i gulp - sass -- save - dev

Dodatak će se instalirati u mapu node_modules, a odgovarajući unos bit će dodan u datoteku package.json. Nakon uspješne instalacije trebamo povezati se naš paket u datoteci gulpfile.js.

var gutljaj = zahtijevaju ("gutljaj");

sass = require("gut-sass"); sass.

Kreirajmo sada zadatak

gutljaj. zadatak ("sass", funkcija ()( return gulp . src ( "app/sass/main.sass" ) . pipe ( sass (). on ( "greška" , sass . logError )) . cijev ( gutljaj . dest ( "app/css" )); gutljaj.src

- Što uzimamo za obradu?.cijev(sass())

- Pretvorite Sass u CSS sass() - u zagradama možete navesti dodatne postavke prikazati CSS
na odlasku. proširena Na primjer, sass((outputStyle: "
")) - potpuno prošireni CSS. ugniježđeni Ostala značenja: kompaktan(zadano) - svaki selektor uključen, komprimiran različita linija

- sve u jednom redu. .on("greška", sass.logError).

Ako iznenada pogriješimo, možemo prikazati poruku na ekranu gdje se nalazi. Da bismo to učinili, dodajmo gutljaj-sass Izvršimo naš stvoreni zadatak . U naredbeni redak ulazimo.

gutljaj sass Gulp je automatski pretvorio SASS u CSS i stvorio datoteku.

Ako ne trebate odabrati jednu datoteku, već nekoliko, možete odabrati sve datoteke odjednom. Da bismo to učinili, promijenimo malo redak u kojem odabiremo sass datoteke za konverziju:

gutljaj. src("app/sass/**/*.sass")

sass/**/*.sass- znači odabir svih datoteka (s ekstenzijom .drsko) u svim mapama mape sass.

Da rezimiramo: povezao dodatak gutljaj-sass, stvorio je zadatak sass i dodan izlaz greške (ako se pojavi). Sada možete izvršiti zadani zadatak. one. naš tax gulp-sass pokrenut će se naredbom gutljaj.

gutljaj. zadatak("default" , ["sass" ]);

Dobivamo sljedeći gulpfile.js

var gutljaj = zahtijevaju ("gutljaj");

var sass = require("gulp-sass");

gutljaj. zadatak ("sass", funkcija ()( return gulp . src ( "app/sass/**/*.sass" ) . cijev ( sass (). on ( "greška", sass . logError )) . cijev ( gutljaj .dest("app/css")))); gutljaj. zadatak("default" , ["sass" ]); Pogledajmo neke značajke Sassa koristeći primjere.

Ima ih ogroman broj, razmotrimo samo najpopularnije. S

Ugniježđenje svojstava

puni popis

možete pronaći na službenim stranicama.

Ugniježđenje pravila

Korištenje $varijabli Aritmetičke operacije s brojevima Aritmetičke operacije s bojama

Sass dopušta

css pravila

, biti ugniježđeni jedan u drugi. Unutarnje pravilo primjenjuje se samo unutar selektora vanjskih pravila. Ne postoji drugi način da se ovo prevede, izraz je pametan, ali u stvarnosti je sve jednostavnije, samo pogledajte primjer:

Scss datoteka

#glavni p (

boja : #00ff00 ;

širina: 97%;

Redbox (

1 2 3 4 5 6 7 8

css pravila

, biti ugniježđeni jedan u drugi. Unutarnje pravilo primjenjuje se samo unutar selektora vanjskih pravila. Ne postoji drugi način da se ovo prevede, izraz je pametan, ali u stvarnosti je sve jednostavnije, samo pogledajte primjer:

Scss datoteka

boja pozadine: #ff0000;

boja : #00ff00 ;

širina: 97%;

boja : #000 ; Sastavljen CSS#main p .redbox (

Sass dopušta

10 11 12

Ovo pomaže u izbjegavanju ponavljanja nadređenog selektora i čini grupu mnogo lakšom za razumijevanje

Scss datoteka

css slojevi

s velikim brojem ugniježđenih selektora. Na primjer:

#glavni (

p, div (

veličina fonta: 2em;

Redbox (

11 12 13 14

Ovo pomaže u izbjegavanju ponavljanja nadređenog selektora i čini grupu mnogo lakšom za razumijevanje

Scss datoteka

težina fonta: podebljano;

prije (

s velikim brojem ugniježđenih selektora. Na primjer:

veličina fonta: 3em;

#glavni p ,

#glavni (

#glavni div (

veličina fonta: 2em;

#glavni p a ,

#main div a ( #glavni prije ( Upućivanje na roditelja selektora (&) Nije jasno zašto su ga Sass programeri tako nazvali. Općenito, pojednostavljeno rečeno, to se može nazvati referencom na sebe. Ako se ne varam, tako se zove Lessova dokumentacija (da vas podsjetim da je Les preuzeo mnoge stvari od sassa, a posudio je i ovaj dizajn). Mnogi će se vjerojatno zapitati čemu ovo? Počnimo s činjenicom da bi bez ove konstrukcije bilo nemoguće implementirati jednu pseudo-klasu. Ili drugi primjer, moramo osigurati druge stilove elemenata ovisno o tome koja klasa ima

Sass dopušta

1 2 3 4 5 6 7 8 9 10

#glavni (

tijelo

html dokument

tekst-ukras: podcrtano;

tijelo .firefox & (

težina fonta: normalna;

Redbox (

1 2 3 4 5 6 7 8 9 10

težina fonta: podebljano;

tijelo

a :hover (

tekst-ukras: podcrtano;

tijelo .firefox a (

težina fonta: normalna;

Mislim da je sve jasno s pseudo-klasama. Pogledajmo pobliže liniju tijelo.firefox &. Što se ovdje događa? Ako se iza nekog elementa pojavi poveznica na vas (ovdje to može biti kao singl html element, a klasa, id, apsolutno nije važna), onda to govori prevoditelju da ovaj raspored poništava standardno ugniježđivanje elemenata. Prevodilac će ukloniti takav element iz standardni tok . Ako pogledate gornji primjer, možda ćete dobiti osjećaj da će se kompajlirati css u kojem će biti tijelo.firefox a , ali ne. Referenca na sebe slijedi element s klasom, tako da će prevodilac generirati tijelo.firefox a

Sass dopušta

1 2 3 4 5 6 7 8 9

Ovo pomaže u izbjegavanju ponavljanja nadređenog selektora i čini grupu mnogo lakšom za razumijevanje

(standardno ugniježđivanje elemenata je poništeno). Ovo je prilično temeljna stvar i treba je razumjeti. Početnici koji su tek prešli na neki predprocesor ne razumiju baš kako funkcionira samoreferenciranje i često pišu kod koji ne radi. Samo trebate zapamtiti ovo.

#glavni (

html dokument

boja: crna;

Redbox (

1 2 3 4 5 6 7 8 9

Ovo pomaže u izbjegavanju ponavljanja nadređenog selektora i čini grupu mnogo lakšom za razumijevanje

boja: crvena;

boja: crna

#glavni (

#glavni a (

boja: crna;

#main a:hover ( U gornjem primjeru možete vidjeti da je referenca na sebe&:lebdjeti uloženo u#glavni i uloženo u a , stoji sam, nema elemenata ispred njega, tako da standardno gniježđenje radi i kompajler generira.

#main a:lebdjeti U različitim vremenima svijet je živio tehničke revolucije . To se događalo u naletima. Grubo rečeno, bronca, i bam, stiglo je željezno doba. Sada ne znamo tko je izumio kotač ili plug, ali u to su vrijeme ta otkrića bila revolucionarne naravi i promijenila su živote kako pojedinaca tako i cijelog čovječanstva. U životu weba, ili točnije, u životu dizajnera izgleda, dogodile su se tri inovacije koje su promijenile njihove živote, i to radikalno. Prvi su, naravno, kaskadni listovi stilova, ali to je bilo u ranim danima weba. Drugi je jquery, sada je putovanje kroz DOM model postalo jednostavno i praktično, plus različite efekte . I treće, ovo je već više moderno doba

Sass dopušta

1 2 3 4 5 6

Ovo pomaže u izbjegavanju ponavljanja nadređenog selektora i čini grupu mnogo lakšom za razumijevanje

(standardno ugniježđivanje elemenata je poništeno). Ovo je prilično temeljna stvar i treba je razumjeti. Početnici koji su tek prešli na neki predprocesor ne razumiju baš kako funkcionira samoreferenciranje i često pišu kod koji ne radi. Samo trebate zapamtiti ovo.

, ovo je BEM. Dogovorite se da jednom napišete nešto cool, a zatim to bez problema koristite na različitim projektima. U tome će vam pomoći sljedeća jezična konstrukcija Sass.

&-bočna traka (

Redbox (

1 2 3 4 5 6

Ovo pomaže u izbjegavanju ponavljanja nadređenog selektora i čini grupu mnogo lakšom za razumijevanje

(standardno ugniježđivanje elemenata je poništeno). Ovo je prilično temeljna stvar i treba je razumjeti. Početnici koji su tek prešli na neki predprocesor ne razumiju baš kako funkcionira samoreferenciranje i često pišu kod koji ne radi. Samo trebate zapamtiti ovo.

obrub: 1px puna crvena;

&-bočna traka (

#main-sidebar ( uloženo u Uzeo sam primjer iz dokumentacije. U stvarnom životu, prema BEM-u, ovo neće biti id-ik A.glavni

27.07.2017

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

Što je SASS?

SASS (Syntactically Awesome Style Sheets)- jedan od najpopularnijih. To je skup CSS funkcija koje vam omogućuju brže i učinkovitije kodiranje. SASS podržava integraciju s Firefox Firebugom. SassScript vam omogućuje stvaranje varijabli, ugniježđenih stilova i naslijeđenih selektora.

SASS omogućuje brzo i jednostavno pisanje manje (ponekad znatno manje) CSS koda i dinamičko upravljanje njime poput programskog jezika (usput, to nije programski jezik). Ovaj odličan alat za pisanje funkcionalnijeg i čišćeg CSS-a koji može ubrzati tijek rada bilo kojeg dizajnera i programera.

Zašto vam je potreban SASS?

Većina front-end okvira, uključujući Bootstrap, Materialize i Foundation, izgrađeni su s ovim izvrsnim predprocesorom. Poznavanje SASS-a pomoći će vam da koristite više značajki ovih okvira.

Kako koristiti SASS?

Postoje mnoge aplikacije koje olakšavaju i brzo počinju koristiti SASS: CodeKit, Compass, Koala itd. O njima ćete naučiti u drugim dijelovima vodiča. U ovom poglavlju nećemo koristiti nikakve aplikacije ili alate osim onih potrebnih za pokretanje SASS-a na računalu. Nećete morati brinuti o operativnom sustavu jer će sve biti jasno svim korisnicima.

Preuzmite i instalirajte SASS

SASS možete instalirati samo na stroj koji već ima instaliran Ruby:

• Ruby dolazi unaprijed instaliran na Macu, tako da možete odmah instalirati Sass Macintosh;
• Ako koristite Windows, prvo ćete morati preuzeti Ruby;
• Ruby na Linuxu može se preuzeti putem apt upravitelja paketa, rbenv ili rvm.

Nakon što je Ruby instaliran, možete instalirati SASS na svoje računalo. Otvorimo Ruby naredbeni redak i instalirajmo SASS na vaš sustav:

Gem instalirajte sass

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

Sudo gem instalirajte sass

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

SASS je instaliran. Kreirajmo mapu projekta i nazovimo je sass-basic. Stvoriti osnovni html datoteka sa sljedećim kodom:

Moj prvi SASS projekt

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

Tijelo ( poravnanje teksta: središte; ) h1 ( boja: #333; ) p ( boja: #666; )

Sada morate kompajlirati ovu datoteku pomoću naredbenog retka/terminala. Otvorimo naredbeni redak u istom direktoriju (možda ćete morati upotrijebiti naredbeni redak Ruby ako obični naredbeni redak ne radi). Upišite sljedeće i pritisnite Enter:

Sass --watch style.scss:style.css

Primijetit ćete da su generirane nove datoteke: style.css i style.css.map. Važno je napomenuti da ne morate dirati datoteku karte, baš kao ni .css datoteku. Ako želite unijeti bilo kakve promjene, to možete učiniti putem style.scss. Nećete morati ponavljati ovaj postupak svaki put kada promijenite stil. SASS kompilacija će raditi automatski kada napravite promjene u .scss datoteci.

U sljedećem poglavlju pogledat ćemo SASS varijable i zašto su one najkorisnija značajka u SASS-u (i bilo kojem drugom CSS pretprocesoru).

Prijevod članka: Potpuni vodič za Sass za početnike.
Andrew Chalkley.

Što je SASS?

SASS je skraćenica za Sintaktički izvrsne tablice stilova- metajezik u Temeljeno na CSS-u, čije se ime može prevesti kao "CSS s izvrsnom sintaksom", dizajnirao Hampton Catlin.

To je sredstvo za pojednostavljenje procesa formiranja CSS stilovi, što uvelike pojednostavljuje zadatak razvoja i kasnijeg održavanja koda.

Jeste li, primjerice, ikada, dok ste opsluživali određenog neodlučnog klijenta, morali proći kroz cijeli sadržaj stilske datoteke kako biste pronašli određenu HEX vrijednost boje kako biste je zamijenili drugom? Ili se obratiti aplikaciji kalkulatora koja nije uvijek pri ruci za izračunavanje širine stupca za predložak s više stupaca?

SASS ima alate na raspolaganju da vas oslobodi ove rutine. To uključuje varijable, dlakavi, gniježđenje I nasljeđivanje selektora.

U osnovi, SASS kod je sličan CSS-u, ali osnovni razlikovna značajka Ono što se odmah uočava je nepostojanje točke-zareza iza svakog para svojstvo-vrijednost i nepostojanje vitičastih zagrada.

Uzmimo sljedeći CSS isječak kao primjer:

#oglas_neboder
{
prikaz: blok;
širina: 120px;
visina: 600px;
}

#leaderboard_ad
{
prikaz: blok;
širina: 728px;
visina: 90px;
}

Što je ekvivalentno ovom SASS-u:

#oglas_neboder
prikaz: blok
širina: 120px
visina: 600px

#leaderboard_ad
prikaz: blok
širina: 728px
visina: 90px

SASS koristi razmak (uvlačenje na početku sljedećeg retka) od dva razmaka za označavanje ugniježđenosti fragmenata koda. ( *U zadnjem isječku, radi jasnoće, istaknuo sam ove prostore crvenom pozadinom.)

Sada kada imamo ideju o tome kako se SASS kod stvara, pogledajmo probleme koji ga čine takvim izvrsno.

Varijable.

U SASS-u, da biste deklarirali varijablu, ispred njenog imena morate staviti znak dolara $. A ako je naziv vaše varijable, recimo, crvena, tada nakon dvotočke možemo označiti sljedeću vrijednost koja joj odgovara:

SASS ima ugrađene funkcije poput potamnjenja i posvjetljivanja koje se mogu koristiti za izmjenu vrijednosti ovih vrsta varijabli.

Dakle, u sljedećem primjeru, boja fonta u paragrafima također će biti crvena, ali tamnija od one koja se koristi u h1 naslovima:

$crveno: #FF4848
$veličina fonta: 12px
h1
boja: crvena

str
boja: tamnija ($crvena, 10%)

S varijablama možete izvoditi aritmetičke operacije kao što su zbrajanje i oduzimanje, sve dok su korištene vrijednosti iste vrste podataka. Ako, na primjer, želimo primijeniti tamniju nijansu, tada sve što trebamo učiniti je oduzeti od vrijednosti boje koja se već koristi u kodu, pohranjene u varijabli, malu heksadecimalnu HEX vrijednost jednaku, recimo, #101. Isto vrijedi i za slučaj kada je potrebno promijeniti vrijednost fonta, recimo, povećati je za 10 piksela za to jednostavno dodamo piksele koji nedostaju:

str.zbrajanje_i_oduzimanje
boja: $crvena - #101
veličina fonta: $fontsize + 10px

Gniježđenje.

Postoje dvije vrste gniježđenja u SASS-u.

Ugniježđenje selektora.

Ovo je prvi tip gniježđenja, koji je sličan onom koji se koristi za HTML strukturiranje kodirati:

$veličina fonta: 12px

Zvučnik
.ime
font:
težina: podebljano
veličina: $fontsize + 10px
.položaj
font:
veličina: $veličina fonta

Ako pogledate dobiveni CSS kod, bilo kakvi komentari bit će nepotrebni. Ugniježđivanjem klase .name unutar klase .speaker ( *na isti način - koristeći dva razmaka na početku sljedećeg retka) stvara se CSS selektor .speaker.name. Isto se odnosi na sljedeći naziv klase .position, koji se nalazi nakon deklaracije svojstava za prvi selektor, što rezultira ugniježđenjem drugog selektora .speaker.position:

Ime.govornika(
težina fonta: podebljano;
veličina fonta: 22px; )
.položaj.govornika (
veličina fonta: 12px; )

Ugniježđenje svojstava.

Druga vrsta ugniježđivanja omogućuje strukturiranje svojstava s jednim prefiksom (* font-family, font-size, font-weight ili border-style, border-color, border-radius itd.):

$veličina fonta: 12px

Zvučnik
.ime
font:
težina: podebljano
veličina: $fontsize + 10px
.položaj
font:
veličina: $veličina fonta

U gornjem primjeru koristimo deklaraciju nadređenog, univerzalnog svojstva fonta: a zatim u novom retku nakon uvlačenja od dva razmaka označavamo drugi dio svojstva, koji se obično nalazi nakon crtice.

To jest, ako specificiramo font: property, on sljedeći redak nakon dva razmaka svojstvo weight:, tada će rezultat biti ekvivalentan poznatom svojstvu font-weight.

Ime.govornika(
težina fonta: podebljano;
veličina fonta: 22px; )
.položaj.govornika (
veličina fonta: 12px; )

Modul pruža podršku za sva svojstva koja sadrže crtice.

Ova vrsta ugniježđivanja izvrstan je način organiziranja i strukturiranja vašeg CSS koda i izbjegavanja nepotrebnog ponavljanja. ( *SUHO- "Nemoj se ponavljati" - "Nemoj se ponavljati." Situacije kada CSS oblikovanje određeni elementi, njihovi se stilovi ponavljaju i/ili redefiniraju negdje drugdje, što kod čini teškim za čitanje i održavanje).

dlakavica.

Još jedna velika značajka SASS-a je dlakavi.

Mixini vam omogućuju ponovno korištenje cijelih dijelova SASS koda i čak im prosljeđivanje argumenata ako je potrebno. I što je važno, također možete odrediti njihove izvorne vrijednosti.

Za definiranje mixina upotrijebite nešto posebno rezervirano u SASS-u ključna riječ@mixin , nakon čega slijedi naziv mixina koji ste odabrali. Ako postoji potreba za argumentima, onda ih navedite u zagradama. Zadane vrijednosti za argument navedene su prilikom definiranja mixina, odvojene dvotočkom. ( *Drugim riječima, mixini su CSS funkcije.)

Procedura korištenja miksina je vrlo jednostavna - nakon ključne riječi @include navedite naziv željenog miksina i u zagradama navedite potrebne parametre, ako postoje.

Pogledajte sljedeći primjer:

@mixin border-radius($amount: 5px) /* definiraj mixin */
-moz-border-radius: $iznos
-webkit-border-radius: $iznos
rubni radijus: $iznos

h1 /* koristi mixin */
@include border-radius(2px)

Zvučnik
@include border-radius

Ovaj SASS, nakon kompilacije, bit će pretvoren u CSS kod u nastavku:

h1 (
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
rubni radijus: 2x; )

Zvučnik (
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
rubni radijus: 5px; )

Za h1 zaglavlje eksplicitno smo specificirali vrijednost polumjera rubnog kuta, ali za element s nazivom klase .speaker to nismo učinili, pa je uzeta zadana vrijednost od 5px.

Nasljeđe birača.

Još izvrsno Značajka SASS sintakse je mogućnost selektora da naslijede sve stilove definirane za druge selektore. Da biste iskoristili ovu značajku, morate koristiti ključnu riječ @extend, nakon koje slijedi birač čija svojstva želite naslijediti:

h1
obrub: 4 px puni #ff9aa9

Zvučnik
@proširi h1
border-width: 2px

Što će se kompajlirati u:

h1,.zvučnik (
obrub: 4px puni #ff9aa9; )

Zvučnik (
border-width: 2px; )

(*Imajte na umu da deklaracija obruba: 4px solid #ff9aa9;)

se ne ponavlja unutar pravila sa selektorom .speaker, već umjesto toga dodaje drugi selektor prvom pravilu. Drugim riječima, nema dupliranja koda.

Isprobajte SASS na djelu.

Online.

Možete iskusiti SASS online bez prethodnog instaliranja modula na vašem lokalnom računalu. Ali prije nego počnete eksperimentirati, na dnu stranice odaberite opciju.

"Uvučena sintaksa"

Instalirano na računalu.

Sam SASS je aplikacija (dragulj) Ruby platforme. Stoga, da biste ga instalirali, ne možete bez prethodnog instaliranja same platforme i upravitelja paketa ovog programskog jezika RubyGems. Nakon uspješne instalacije same platforme i upravitelja, pokrenite sljedeću naredbu u konzoli:

gem instaliraj sass

Modul SASS može se koristiti kao alat za pretvaranje vaših SASS datoteka u datoteke CSS formata u načinu naredbenog retka.

To se može učiniti, na primjer, unosom sljedeće naredbe:

sass --watch sass_folder:stylesheets_folder

Gdje je sass_folder staza do mape koja sadrži SASS datoteke (to jest, s ekstenzijom .sass), a stylesheets_folder je staza do mape u kojoj će rezultirajuće CSS datoteke biti spremljene nakon kompilacije. Naredba --watch govori modulu da treba promatrati sve promjene u navedenoj mapi i, ako ih ima, nakon što ih spremi, pretvoriti izvorne .sass datoteke u ekvivalentne .css datoteke.

Obrnuta konverzija CSS-a u SASS.

SASS možete početi koristiti pretvaranjem stilova koji se koriste u vašim postojećim projektima u ovaj format pomoću uslužnog programa "sass-convert". Da biste to učinili, u naredbeni redak unesite put do mape čiji sadržaj treba pretvoriti ( *to jest, samo idite u željeni direktorij u kojem se nalaze izvorne datoteke

). Zatim pokrenite gore navedeni uslužni program i dajte mu sljedeće parametre:

Gdje zastavica -R specificira rekurzivan način izvođenja operacije. I sljedeća točka nakon nje. znači da će rezultirajuće .sass datoteke biti spremljene u trenutnom direktoriju. ()