Përpara se të përdorni Sass, duhet ta konfiguroni atë në projektin tuaj. Nëse thjesht dëshironi të lexoni, atëherë mos ngurroni - lexoni, por ju rekomandojmë që fillimisht të instaloni Sass. Instaloni Sass për të kuptuar të gjitha veçoritë e Sass.

• Parapërpunimi

  Shkrimi i CSS është argëtues në vetvete, por kur fleta e stileve bëhet e madhe, bëhet e vështirë për t'u ruajtur. Dhe në këtë rast, paraprocesori do të na ndihmojë. Sass ju lejon të përdorni veçori që nuk janë të disponueshme në vetë CSS, të tilla si variabla, fole, miks, trashëgimi dhe gjëra të tjera të këndshme që sjellin komoditetin e shkrimit të CSS.

  Pasi të filloni të përdorni Sass, paraprocesori përpunon skedarin tuaj Sass dhe e ruan atë si një skedar të thjeshtë CSS që mund ta përdorni në çdo sajt.

  Mënyra më e lehtë për të marrë këtë lloj rezultati është përdorimi i terminalit. Pasi të instalohet Sass, mund ta përpiloni Sass-in tuaj në CSS duke përdorur komandën sass. Thjesht duhet t'i tregoni Sass se ku ta marrë skedarin Sass dhe në cilin skedar CSS ta përpilojë atë. Për shembull, duke ekzekutuar sass input.scss output.css në një terminal, ju i thoni Sass të marrë një skedar Sass, input.scss dhe ta përpilojë atë në output.css.

• Variablat

  Mendoni për variablat si një mënyrë për të ruajtur informacionin që dëshironi të përdorni në të gjitha stilet e projektit tuaj. Ju mund të ruani ngjyrat, grumbujt e shkronjave ose çfarëdo vlere CSS që dëshironi të përdorni në variabla. Për të krijuar një variabël në Sass, duhet të përdorni simbolin $. Le të shqyrtojmë një shembull:

  Sintaksa SCSS

  $ font-stack: Helvetica, sans-serif; $ ngjyra kryesore: # 333; trupi (fonti: 100% $ font-stack; ngjyra: $ ngjyra kryesore;)

  Sintaksa Sass

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

  Kur Sass analizohet, ai merr vlerat që kemi specifikuar në $ font-stack dhe $ primar-color dhe i fut ato në një skedar të rregullt CSS ku kemi specifikuar variabla si vlera. Kështu, variablat bëhen një veçori e fuqishme, për shembull, kur punoni me ngjyrat e korporatave të përdorura në të gjithë sitin.

  trupi (fonti: 100% Helvetica, sans-serif; ngjyra: # 333;)

• Folezimi

  Ndërsa shkruani HTML, ndoshta keni vënë re se ai ka një hierarki të qartë të mbivendosur dhe vizuale. Ky nuk është rasti me CSS.

  Sass do t'ju lejojë të futni përzgjedhësit CSS në të njëjtën mënyrë si në hierarkinë vizuale të HTML. Por mbani mend se shumë fole e bën dokumentin tuaj më pak të lexueshëm dhe më pak të lexueshëm, gjë që konsiderohet praktikë e keqe.

  Për të kuptuar se çfarë nënkuptojmë, këtu është një shembull tipik i stileve të navigimit të faqes në internet:

  Sintaksa SCSS

  nav (ul (diferencë: 0; mbushje: 0; stili i listës: asnjë;) li (ekrani: blloku i linjës;) a (ekrani: bllok; mbushja: 6 px 12 px; dekorimi i tekstit: asnjë;))

  Sintaksa Sass

  nav ul margin: 0 mbushje: 0 në stilin e listës: asnjë në ekran: inline-bllokoni një ekran: mbushje bllok: 6px 12px dekorim teksti: asnjë

  A e keni vënë re se përzgjedhësit ul, li dhe a janë të vendosur brenda përzgjedhësit nav? Kjo është një mënyrë e shkëlqyer për ta bërë skedarin tuaj CSS më të lexueshëm. Kur gjeneroni skedarin CSS, do të merrni diçka të tillë në dalje:

  nav ul (diferenca: 0; mbushja: 0; stili i listës: asnjë;) nav li (ekrani: blloku i linjës;) nav a (ekrani: bllok; mbushja: 6 px 12 px; dekorimi i tekstit: asnjë;)

• Fragmentimi

  Ju mund të krijoni copa skedarësh Sass që përmbajnë copa të vogla të CSS që mund të përdoren në skedarë të tjerë Sass. Kjo është një mënyrë e shkëlqyer për ta bërë CSS-në tuaj modulare dhe gjithashtu të lehtë për t'u mirëmbajtur. Një fragment është një skedar i thjeshtë Sass, emri i të cilit fillon me një nënvizim, si p.sh. _partial.scss. Nënvizimi në emrin e skedarit Sass i tregon përpiluesit se ky është vetëm një fragment dhe nuk duhet të përpilohet në CSS. Pjesët Sass përfshihen duke përdorur direktivën @import.

• Importi

  CSS ka aftësi importi që ju lejon të ndani skedarin tuaj CSS në më të vegjël dhe t'i bëni ato më të lehta për t'u mirëmbajtur. Por kjo metodë ka një pengesë të rëndësishme: sa herë që përdorni @import në CSS, një kërkesë tjetër HTTP krijohet në CSS. Sass merr idenë e importimit të skedarëve përmes direktivës @import, por në vend që të bëjë një kërkesë të veçantë HTTP, Sass importon skedarin e specifikuar në direktivë në atë ku quhet, d.m.th. dalja është një skedar CSS, i përpiluar nga disa fragmente.

  Për shembull, ju keni disa pjesë të skedarëve Sass - _reset.scss dhe base.scss. Dhe ne duam të importojmë _reset.scss në base.scss.

  Sintaksa SCSS

  // _reset.scss html, body, ul, ol (diferencë: 0; mbushje: 0;) // base.scss @import "rivendos"; trupi (fonti: 100% Helvetica, sans-serif; ngjyra e sfondit: #efefef;)

  Sintaksa Sass

  // _reset.sass html, trupi, ul, diferenca ol: 0 mbushje: 0 // base.sass @import rivendos fontin e trupit: 100% Helvetica, sans-serif sfond-ngjyra: #efefef

  Vini re se ne jemi duke përdorur @import "reset"; në skedarin bazë.scss. Kur importoni skedarin, nuk keni nevojë të specifikoni shtesën .scss. Sass është një gjuhë e zgjuar dhe do ta kuptojë. Kur krijohet CSS, ju merrni:

  html, trupi, ul, ol (diferenca: 0; mbushja: 0;) trupi (fonti: 100% Helvetica, sans-serif; ngjyra e sfondit: #efefef;)

• Përzierjet (papastërtitë)

  Disa gjëra në CSS janë mjaft të lodhshme për t'u shkruar, veçanërisht në CSS3, ku, për më tepër, shpesh duhet të përdorni një numër të madh prefiksash të shitësit. Mixins ju lejojnë të krijoni grupe deklaratash CSS që do t'ju duhet t'i përdorni disa herë në faqen tuaj. Është mirë të përdorni mixins për prefikset e shitësit. Shembull për rreze kufitare:

  Sintaksa SCSS

  @mixin border-radius (rrezja $) (-webkit-border-radius: rrezja $; -moz-border-radius: rrezja $; -ms-border-radius: rrezja $; rrezja kufitare: rreze $;) .box (@përfshi rreze-kufi (10px);)

  Sintaksa Sass

  = kufiri-rrezja (rrezia $) -webkit-border-radius: rrezja $ -moz-border-radius: rrezja $ -ms-border-radius: rrezja e kufirit $: rreze $ .box + rreze-kufitare (10 px)

  Për të krijuar një mixin, përdorni direktivën @mixin + emrin e këtij mixin. Ne e kemi emërtuar rrezen kufitare të përzierjes. Gjithashtu, në mixin, ne përdorim variablin $ radius brenda kllapave, duke i lejuar vetes të kalojmë gjithçka që duam në variabël. Pasi të keni krijuar një miksin, mund ta përdorni si parametër CSS duke filluar thirrjen me @include dhe emrin e mixin. Kur përpilohet CSS juaj, ju merrni këtë:

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

• Shtrirja / Trashëgimia

  Kjo është një nga veçoritë më të dobishme të Sass. Duke përdorur direktivën @extend, ju mund të trashëgoni grupe të vetive CSS nga një përzgjedhës në tjetrin. Kjo e mban skedarin tuaj Sass "të pastër". Në shembullin tonë, ne do t'ju tregojmë se si të stiloni sinjalizimet e gabimeve, paralajmërimeve dhe suksesit duke përdorur veçori të tjera të Sass që shkojnë krah për krah me klasat e shtesave dhe modeleve.

  Një klasë shabllon është një lloj i veçantë klase që jepet vetëm kur përdoret një shtesë - kjo do ta mbajë CSS-në tuaj të përpiluar të pastër dhe të rregullt.

  Sintaksa SCSS

  % lartësi të barabarta (ekrani: përkul; përkulje: mbështjell;)% mesazh i ndarë (kufiri: 1 px solid #cccc; mbushja: 10 px; ngjyra: # 333;) .message (@extend% message-shared;). sukses (@extend% message-shared; border-color: green;) .error (@extend% message-shared; border-color: kuqe;) .warning (@extend% message-shared; border-color: yellow;)

  Sintaksa Sass

  // Ky copë kodi nuk do të hyjë në CSS pasi% e barabartë me lartësi nuk u zgjeruan kurrë.% ekran me lartësi të barabarta: mbështjell me përkulje: mbështjell // Kjo pjesë e kodit do të përfundojë në CSS sepse% mesazh-shpërndarë është zgjeruar.% kufiri i përbashkët i mesazhit: 1 px i ngurtë #mbushje ccc: 10 pikselë ngjyra: # 333 .mesazh @extend% message-shared .success @extend% mesazh-shpërndarë-color: jeshile .error @extend% message-shared-color: e kuqe .paralajmërim @extend% mesazh-shpërndarë kufiri-ngjyra: e verdhë

  Kodi i mësipërm u thotë klasave .message, .success, .error dhe .warning që të sillen si% mesazh-shpërndarë. Kjo do të thotë se kudo që thirret % message-shared, do të thirren gjithashtu .message, .success, .error dhe .warning. Magjia ndodh në CSS-në e gjeneruar ku secila prej këtyre klasave merr vetitë css njësoj si% mesazh-shpërndarë. Kjo do t'ju lejojë të shmangni shkrimin e shumë klasave në elementë HTML.

  Ju mund të zgjeroni shumicën e përzgjedhësve të thjeshtë CSS përveç klasave të modeluara në Sass, megjithatë, shabllonimi është mënyra më e lehtë për t'u siguruar që nuk po e zgjeroni klasën kudo që përdoret në stilet tuaja, gjë që mund të çojë në stilim të paqëllimshëm në CSS tuaj. . ..

  Kur gjeneroni CSS-në tuaj, duket si shembulli më poshtë. Vini re se% e barabartë me lartësi nuk hyn në CSS, pasi nuk është përdorur kurrë.

  .message, .success, .error, .warning (kufiri: 1px solid #cccccc; mbushja: 10px; ngjyra: # 333;) .success (border-color: green;) .error (border-color: e kuqe;). paralajmërim (ngjyra e kufirit: e verdhë;)

• Operatorët e matematikës

  Përdorimi i matematikës në CSS është shumë i dobishëm. Sass ka disa operatorë standardë të matematikës si +, -, *, /, dhe%. Në shembullin tonë, ne po bëjmë disa matematikë të thjeshtë për të llogaritur gjerësinë e anës dhe artikullit.

  Sintaksa SCSS

  .container (gjerësia: 100%;) artikull [role = "main"] (lundrues: majtas; gjerësia: 600 px / 960 px * 100%;) mënjanë [role = "complementary"] (noton: djathtas; gjerësia: 300 px / 960 px * njeqind% ; )

  Sintaksa Sass

  .gjerësia e kontejnerit: 100% artikull [role = "kryesore"] float: gjerësia majtas: 600 px / 960 px * 100% mënjanë [role = "plotësues"] notues: gjerësia djathtas: 300 px / 960 px * 100%

  Ne kemi krijuar një rrjetë të thjeshtë modulare reaguese që është 960 px e gjerë. Duke përdorur operatorët e matematikës, ne morëm të dhënat me vlerë piksel dhe i konvertuam ato në përqindje me pak përpjekje. CSS e përpiluar duket kështu:

  .container (gjerësia: 100%;) artikulli [role = "kryesore"] (lundrues: majtas; gjerësia: 62.5%;) mënjanë [role = "plotësues"] (lundrues: djathtas; gjerësia: 31.25%;)

27.07.2017

Kjo seri mësimesh SASS është krijuar si për fillestarët ashtu edhe për zhvilluesit e avancuar. Ky është i pari nga një tutorial me katër pjesë, në të cilin do të njiheni me paraprocesorin, do ta instaloni dhe do të mësoni rreth disa prej veçorive të tij.

Çfarë është SASS?

SASS (Fletë stilesh të mrekullueshme sintaksore)- një nga më të njohurit. Është një koleksion i veçorive CSS që ju lejon të kodoni më shpejt dhe me efikasitet. SASS mbështet integrimin e Firefox Firebug. SassScript ju lejon të krijoni variabla, stile të mbivendosur dhe përzgjedhës të trashëguar.

SASS ju lejon të shkruani shpejt dhe me lehtësi më pak (nganjëherë dukshëm më pak) kodin CSS dhe ta menaxhoni atë në mënyrë dinamike si gjuhë programimi (nga rruga, nuk është një gjuhë programimi). Është një mjet i shkëlqyeshëm për të shkruar CSS më funksionale dhe më të pastërta që mund të shpejtojë rrjedhën e punës të çdo projektuesi dhe zhvilluesi.

Pse nevojitet SASS?

Shumica e kornizave frontend duke përfshirë Bootstrap, Materialize dhe Foundation janë ndërtuar me këtë paraprocesor të shkëlqyeshëm. Njohja e SASS do t'ju ndihmojë të përdorni më shumë nga veçoritë e këtyre kornizave.

Si të përdor SASS?

Ka shumë aplikacione që e bëjnë të lehtë dhe të shpejtë fillimin e përdorimit të SASS: CodeKit, Compass, Koala, etj. Ju do të mësoni rreth tyre në pjesë të tjera të tutorialit. Në këtë kapitull, ne nuk do të përdorim asnjë aplikacion ose mjet tjetër përveç atyre që kërkohen për të ekzekutuar SASS në një kompjuter. Nuk duhet të shqetësoheni për sistemin operativ, sepse gjithçka do të jetë e qartë për të gjithë përdoruesit.

Shkarkimi dhe instalimi i SASS

Mund të instaloni SASS vetëm në një makinë që tashmë ka Ruby:

• Ruby vjen i parainstaluar në Mac, kështu që ju mund ta instaloni Sass në Macintosh menjëherë;
• Nëse jeni në Windows, fillimisht duhet të shkarkoni Ruby;
• Ruby në Linux mund të shkarkohet përmes menaxherit të paketave apt, rbenv ose rvm.

Pas instalimit të Ruby në kompjuterin tuaj, mund të instaloni SASS. Le të hapim një linjë komande Ruby dhe të instalojmë SASS në sistemin tuaj:

Sass instalimi i gurëve të çmuar

Nëse komanda e mësipërme nuk funksionon, atëherë mund t'ju duhet të përdorni komandën sudo:

Sudo perlë e instaluar sass

Nëse dëshironi të kontrolloni versionin tuaj SASS, përdorni komandën e mëposhtme:

SASS është instaluar. Le të krijojmë një dosje projekti dhe ta emërojmë sass-basic. Krijoni një skedar bazë html me kodin e mëposhtëm:

Projekti im i parë sass

Përshëndetje mik Unë jam duke mësuar SASS dhe është vërtet e mrekullueshme.

Trupi (lidhja e tekstit: në qendër;) h1 (ngjyra: # 333;) p (ngjyra: # 666;)

Tani ju duhet ta përpiloni këtë skedar duke përdorur linjën / terminalin e komandës. Le të hapim një linjë komande në të njëjtën direktori (mund t'ju duhet të përdorni linjën e komandës Ruby nëse linja e zakonshme e komandës nuk funksionon). Shkruani sa vijon dhe shtypni Enter:

Sass --watch style.scss: style.css

Do të vini re se janë krijuar skedarë të rinj: style.css dhe style.css.map. Vlen të theksohet se nuk keni nevojë të prekni skedarin e hartës si dhe skedarin .css. Nëse dëshironi të bëni ndonjë ndryshim, mund ta bëni përmes style.scss. Ju nuk keni nevojë ta përsërisni këtë proces sa herë që ndryshoni stilet. Kompilimi SASS do të funksionojë automatikisht kur të bëhen ndryshime në skedarin .scss.

Në kapitullin tjetër, do t'i hedhim një vështrim variablave SASS dhe pse ato janë veçoria më e dobishme SASS (dhe në çdo paraprocesor tjetër CSS).

Pershendetje te gjitheve! Sa shpejt fluturon koha. As që e vura re se si kalova nga stilet e të shkruarit nga Css i rregullt në një paraprocesor Sass. Por nuk e kuptova më parë - çfarë lloj Sass është, për çfarë shërben, kjo është ndoshta për profesionistët super të avancuar në paraqitje. Po, përdorimi i paraprocesorëve është një hap në një nivel të ri në zhvillimin e uebit, por këtu nuk ka asgjë të tmerrshme apo të vështirë dhe do ta shihni vetë duke e lexuar këtë artikull deri në fund.

Pra, çfarë e bën të mirë paraprocesorin, dhe Sass-in në veçanti? Unë do t'ju them menjëherë se ka të tjera, si Less, Stylus etj. Të gjitha funksionojnë sipas të njëjtit parim, por secila ka karakteristikat e veta. Sass ka fituar shumë popullaritet në mesin e profesionistëve, si rezultat i të cilit është shumë më e lehtë për të mësuar. Thjesht, sa më popullore të jetë teknologjia, aq më i madh është komuniteti dhe aq më i gjerë është dokumentacioni.

Parapërpunuesit janë krijuar për të lehtësuar zhvilluesin nga shumica e detyrave rutinë kur shkruan kodin, duke rritur kështu shpejtësinë dhe cilësinë e punës. Përveç paraprocesorëve CSS, ka edhe paraprocesorë HTML si Pug (Jade).

Struktura e artikullit

Dokumentacioni

Zhvilluesi i Sass është francezi Hugo Giraudel, i cili ka jetuar në Gjermani për disa kohë. Natyrisht, dokumentacioni është në anglisht, por unë personalisht di shumë për të (është e rëndësishme të njohësh anglisht teknike). Por ka edhe një përkthim në rusisht. Unë ende do të rekomandoja versionin anglisht, kjo është për t'u mësuar dhe mësuar gjithnjë e më shumë anglisht. Por rusishtja nuk është gjithashtu më keq.

• Dokumentacioni në anglisht: http://www.sass-lang.com
• Dokumentacioni rus: https://sass-scss.ru

Përpilimi i Sass në Css

Si softuer për përpilimin e Sass në Css, unë përdor shtojcën e menaxherit të detyrave Sass. Në përgjithësi, Sass është një aplikacion (Gem) i gjuhës Ruby. Prandaj, nëse doni të bëni pa Gulp, do t'ju duhet të instaloni platformën e gjuhës programuese Ruby për t'u kompiluar në Css. Unë nuk do t'ju tregoj se si bëhet kjo tani, ju mund të lexoni në lidhje me të në faqen zyrtare të internetit.

Sintaksa - Sass, Scss

Vërej menjëherë se ekzistojnë 2 sintaksa për të shkruar kodin: Sass dhe Scss.

Sintaksa Sass ndryshon pak nga Scss. Scss duket më shumë si kodi i rregullt Css, dhe Sass i lë pa kllapa kaçurrela dhe pikëpresje midis rregullave. Ka një ndryshim edhe në shkrimin e disa funksioneve dhe duhet të keni kujdes se në cilën sintaksë zgjidhni. Shtesat e skedarëve për Sass - * .sass, dhe për Scss - * .scss. Sintaksa Sass është më e vjetër dhe Scss u prezantua më vonë për ta bërë më të lehtë për fillestarët të mësojnë. Unë vetë fillova të studioja këtë paraprocesor duke përdorur Scss, kështu që ishte më e lehtë për ta kuptuar atë. Tani kalova në Sass, për mua është më i përshtatshëm.

Nëse flasim për Sass, atëherë struktura e kodit të tij është ndërtuar në bazë të dhëmbëzimeve (në fund të fundit, nuk ka mbajtëse kaçurrelë në të) dhe këtu duhet të keni kujdes, pasi si tabuluesi (TAB - 4 hapësira) ashtu edhe hapësirat e zakonshme (zakonisht është një hapësirë ​​e dyfishtë). Unë përdor gjithmonë një tabelator.

Mbani mend! Nëse përdorni një ndalesë skedash si dhëmbëzim, atëherë hapësirat duhet të përjashtohen në mënyrë që të jetë e njëjtë kudo. Dhe anasjelltas - nëse përdorni hapësira, atëherë tabuluesi duhet të përjashtohet. Përndryshe, përpiluesi do të gjenerojë një gabim.

Sass

.maincontent .madhësia e fontit të titullit kryesor: 30 px pesha e shkronjave: 700 margjina: 0 0 30 px .përshkrim marzhi-fund: 30 px ngjyra: # 444444 madhësia e shkronjave: 16 px lartësia e rreshtit: 22x

Scss

.maincontent (.main-titulli (madhësia e shkronjave: 30 px; pesha e shkronjave: 700; margjina: 0 0 30 px;) .përshkrimi (margin-fund: 30 px; p (ngjyra: # 444444; madhësia e shkronjave: 16x; rreshti; -lartësia: 22 px;)))

Shumica e redaktuesve të kodit (për shembull, Sublime Text) kanë vija për futje, kështu që ne nuk ngatërrohemi. Në shembujt e mëposhtëm, unë do të përdor sintaksën Sass.

Duke e bërë jetën më të lehtë me Sass

Rregullat e foleve

Kjo është ajo që më pëlqeu Sass që në fillim, sepse është thjesht foleja e rregullave css të njërit në tjetrin. Kjo kursen shumë kohë, dhe kodi është i strukturuar dhe i lehtë për t'u lexuar. Për shembull, nëse duam të shkruajmë stile për elementët e një kontejneri prind të caktuar, atëherë në Css duhet të specifikojmë klasën prind çdo herë, për shembull si kjo:

Titulli kryesor (madhësia e shkronjave: 30 px; ngjyra: # 444;) .titulli kryesor (madhësia e shkronjave: 20 px;)

Kjo do të thotë, ne gjithmonë specifikojmë klasën prind .main, dhe kjo, nga ana tjetër, nuk është shumë e përshtatshme. Duke përdorur Sass, mund të shkruhet kështu:

Scss

.main (.titulli (madhësia e shkronjave: 30 px; ngjyra: # 444;) .titulli (madhësia e shkronjave: 20 px;) .përshkrimi (madhësia e shkronjave: 14 px; margjina e poshtme: 30 px;))

Sass

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

Dakord, duket shumë më i pastër dhe mund ta shkruani kodin më shpejt, sepse ne e shkruajmë klasën prind.main vetëm një herë. Nëse dëshironi të përsërisni pas meje pa instaluar Ruby dhe ndonjë softuer tjetër të ngjashëm, mund të përdorni përpiluesin në internet për demonstrim.

Vetitë e mbivendosura

Përveç rregullave të folezimit në Sass, ekziston mundësia e vetive të folezimit. Për shembull, ja se si të shkruani vlerat e marzhit:

Sass

.main margjina e titullit: lart: 10 pikselë djathtas: 15 px poshtë: 10 px majtas: 15 px

Css

.main .titulli (margin-lart: 10px; margin-djathtas: 15px; margjina-poshtë: 10px; margjina-majtas: 15px;)

Lidhja ose bashkimi i përzgjedhësit - shenjë &

Shkrimi i kodit tonë mund të përshpejtohet dhe të bëhet edhe më kompakt duke përdorur lidhjen (lidhjen) duke përdorur simbolin - & ... Si punon? Për shembull, ne kemi klasa si: .main-title, .main-subtitle, .main-description. Në Sass, këto klasa mund të shkruhen si më poshtë:

Madhësia e shkronjave kryesore dhe e titullit: 30 px ngjyra: # 444 & -madhësia e fontit të nëntitullit: 20 px & -përshkrimi i madhësisë së shkronjave: 14 pikselë margjina-fund: 30 px

Titulli kryesor (madhësia e shkronjave: 30 px; ngjyra: # 444;) .titulli kryesor (madhësia e shkronjave: 20 px;) .përshkrimi kryesor (madhësia e shkronjave: 14 px; diferenca e poshtme: 30 px;)

Duke përdorur simbolin & ne po lidhemi me klasën rrënjë, domethënë në këtë rast nuk ka nevojë të përsërisim vazhdimisht rrënjën.main. Në të njëjtën kohë, mbani në mend se ne nuk kemi krijuar asnjë element fëmijë.

/ * Lidhja * / a (ngjyra: e kuqe;) a: rri pezull (ngjyra: blu;) / * Pseudo-elementë * / .main :: përpara (përmbajtja: ""; shfaqja: bllok; madhësia e shkronjave: 20 px;) .main :: pas (përmbajtja: ""; shfaqja: bllok; madhësia e shkronjave: 30 px;)

Ndonjëherë ju duhet të specifikoni një zinxhir zgjedhësish deri në elementin aktual. Sigurisht, mund ta nxirrni deri në rrënjë, por për të mos prishur folenë, mund ta shkruani si më poshtë:

Kontejneri kryesor dhe gjerësia: 700 px

Kontejneri .kryesor (gjerësia: 700 px)

Duke lëvizur & pas selektorit kemi ndryshuar rendin e dokimit, pra klasa.container në këtë rast është prindi.

E detyrueshme për përzgjedhësin prind, por një nivel më lart

Më sipër, si shembull, unë demonstrova kodin Sass:

Madhësia e shkronjave kryesore dhe e titullit: 30 px ngjyra: # 444 & -madhësia e fontit të nëntitullit: 20 px & -përshkrimi i madhësisë së shkronjave: 14 pikselë margjina-fund: 30 px

Tani imagjinoni se ka një element tjetër në bllokun .main-title që duhet të stilohet në mënyrë eksplicite duke përdorur të gjithë zinxhirin prind. Për një kohë të gjatë sapo specifikova emrin e rrënjës (në këtë rast - .main), por kjo nuk është shumë e përshtatshme. Fillova të gërmoj në dokumentacionin e Sass dhe gjeta një zgjidhje. Në fakt, gjithçka është e thjeshtë - duhet të deklarojmë një lidhje me prindin dhe ta përdorim atë ku është e nevojshme.

Kështu e kam bërë më parë:

Madhësia e shkronjave kryesore dhe -titulli: 30 px ngjyra: # 444 .main__icon // specifikoni root.main, përndryshe, nëse përdorni &, do të lidhet me ngjyrën .ain-title: # 444 gjerësia: 20 px & -font nëntitull- madhësia: 20 pikselë & madhësia e shkronjave të përshkrimit: 14 px margjina-fund: 30 px

Dhe tani mund ta bëni këtë:

Vetë kryesore $: & // referenca e prindit & madhësia e shkronjave të titullit: 30 pikselë ngjyra: # 444 # ($ vetë) ikonën __ // në vend të & përdorni ngjyrën e referencës së prindit: # 444 gjerësia: 20 px & -madhësia e fontit të titrave: 20px & -përshkrimi i madhësisë së shkronjave: 14px margjina-fund: 30px

Nëse vini re, ne kemi deklaruar një referencë për prindin - $ vetë: &. Më kujton pak një referencë për objektin (këtë) që shkaktoi ngjarjen në javaScript. Tani, në vendin e duhur, mund ta quajmë thjesht # ($ vet). Rezulton se sa e thjeshtë është gjithçka, por unë e rrahja mendjen dhe mendova se nuk kishte zgjidhje për këtë problem në Sass.

Titulli kryesor (madhësia e shkronjave: 30 px; ngjyra: # 444;) .titulli kryesor .ikona kryesore__(ngjyra: # 444; gjerësia: 20 px;) .nëntitulli kryesor (madhësia e shkronjave: 20 px;) .përshkrimi kryesor ( madhësia e shkronjave: 14 px; diferenca e poshtme: 30 px;)

Modele bosh

Ndodh shpesh që disa elementë të kenë një bazë stili, por të ndryshojnë nga njëri-tjetri vetëm nga disa rregulla. Merrni për shembull butonat. Nëse marrim një madhësi të butonave, atëherë ato mund të ndryshojnë nga njëri-tjetri vetëm në ngjyrë: e kuqe, jeshile, gri, etj. Nëse përdorni Css të pastër, do t'ju duhet të specifikoni të gjitha ngjyrat e butonave në stilet bazë të ndara me presje ose të krijoni një klasë bazë. Por Sass e bën shumë më të lehtë:

% ngjyra e sfondit të butonit: # 666 kufiri: 1 px solid # 666 mbushje: 0 20 px madhësia e shkronjave: 15 px lartësia e rreshtit: 40 px lartësia: 40 px .button-jeshile @extend% ngjyra e sfondit: e gjelbër e kufirit-ngjyra: jeshile. buton-red @extend% buton sfond-ngjyra: e kuqe kufiri-ngjyra: e kuqe

Buton-jeshile, .button-e kuqe (ngjyra e sfondit: # 666; kufiri: 1px solid # 666; mbushja: 0 20px; madhësia e shkronjave: 15px; lartësia e rreshtit: 40px; lartësia: 40px;) .buton-jeshile ( ngjyra e sfondit: jeshile; ngjyra e kufirit: jeshile;) .button-e kuqe (ngjyra e sfondit: e kuqe; ngjyra e kufirit: e kuqe;)

Modeli në këtë rast është zgjedhësi i butonit% (kjo tregohet me shenjën -%). Kjo është e përshtatshme sepse vetë zgjedhësi i shabllonit nuk është i përfshirë askund dhe stilet e tij trashëgohen nga përzgjedhësit e tjerë përmes direktivës - @zgjat... Ky shabllon mund të përdoret sa herë të dëshironi, duke zvogëluar kështu sasinë e kodit.

SassScript

Në Sass, si në gjuhët e programimit, ekzistojnë mundësi të tilla si: krijimi i variablave, veprimet aritmetike (mbledhja, zbritja, pjesëtimi, shumëzimi, etj.), përsëritjet (qarqet), funksionet (përzierjet) dhe shumë më tepër. Kjo do të thotë, Sass është një lloj gjuhe programimi që është krijuar për të thjeshtuar shkrimin e kodit dhe për të shpejtuar punën herë pas here.

Variablat

Një variabël në Sass fillon me një shenjë $ , dhe emri shkruhet në latinisht, për shembull: $ color. Duhet të theksohet se shenjat: " — "dhe" _ »Janë të këmbyeshme. Për shembull, nëse keni emërtuar $ color-red, atëherë mund të thërrisni edhe $ color_red. Variabla përcaktohet si më poshtë: $ emri: vlera, për shembull: ngjyra e $: # f6f6f6.

Një variabël i deklaruar jashtë çdo niveli foleje është i disponueshëm globalisht, d.m.th. mund të përdoret kudo. Nëse keni përcaktuar një variabël në çdo nivel të foleve të përzgjedhësit, atëherë ai do të jetë i disponueshëm vetëm në këtë nivel. Që të funksionojë globalisht në të gjithë dokumentin, duhet të specifikoni fjalën kyçe globale.

Titulli $ madhësia e shkronjave: 10 px Madhësia globale e shkronjave: $ font-size .madhësia e fontit të nëntitullit: madhësia e shkronjave $

Në përgjithësi, variablat janë një gjë e mrekullueshme, ia vlen të deklaroni dhe vendosni një vlerë, dhe më pas mund t'i përdorni sa të doni, kudo. Për shembull, ne mund të përcaktojmë ngjyrat duke u dhënë atyre emra specifikë, madhësinë e shkronjave, familjen e shkronjave, etj. dhe në përgjithësi çdo vlerë.

Direktivat

@zgjat

Ne e prekëm këtë direktivë më lart kur studiuam shabllonin bosh. Le të konsolidojmë njohuritë tona edhe një herë. Nëpërmjet @zgjat ne mund të kopjojmë rregullat e çdo përzgjedhësi. Për shembull, gjatë paraqitjes mund të jetë kështu që elementi " A"Dhe elementi" B“Mund të jetë i ngjashëm në pamje. Në këtë rast, mund të shkruani rregullat për elementin "A", dhe për "B" thjesht kopjoni stilet e elementit "A", duke ripërcaktuar pak vetitë e kërkuara.

Blloku_a-ngjyra e sfondit: #cccccc kufiri: 5px solid # 999999 mbushje: 20px madhësia e shkronjave: 30px lartësia: 150px gjerësia: 150px .block_b @extend .block_a padding: 15px

Blloku_a, .blloku_b (ngjyra e sfondit: #cccccc; kufiri: 5 px solid # 999999; mbushja: 20 px; madhësia e shkronjave: 30 px; lartësia: 150 px; gjerësia: 150 px;) .blloku_b (mbushja: 15 px;)

Në këtë shembull, ne shtruam 2 sheshe identike. Për katrorin "B" ne anashkalojmë vetëm mbushjen: 15 px. Kështu funksionon @extend. Unë e përdor këtë direktivë mjaft shpesh.

@import

Kjo direktivë ju lejon të kombinoni skedarë të shumëfishtë stilesh në një. Kjo është shumë e përshtatshme, veçanërisht nëse projekti është i madh. Për të mos u ngatërruar me direktivën që ekziston në Css - @import... Në Css, atributi i kërkuar është - url ().

Në fakt, është më i përshtatshëm për të shkruar stile në skedarë të ndryshëm dhe secili ka qëllimin e vet. Për shembull, i gjithë skeleti i faqes mund të ndahet në rajone: header.sass, sidebar.sass, footer.sass. Mund të mbledhësh gjithçka në skedarin kryesor main.sass, thjesht duke përdorur @import. Skedarët e rajonit mund të specifikohen gjithashtu me një nënvizim në fillim të emrit të skedarit, për shembull: _header.sass, _sidebar.sass, _footer.sass. Këto skedarë quhen fragmente. Kur importoni fragmente, nuk është e nevojshme të specifikoni shtrirjen e skedarit.

Importi i thjeshtë

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

Importi i fragmenteve

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

Skedarët e fragmenteve mund të jenë me shtesa: * .sass, * .scss ose * .css... Për shembull, skedari kryesor mund të jetë me shtesën * .sass, dhe kokën e faqes, për shembull, me shtesën * .scss... Kjo do të thotë, nuk ka rëndësi se cila është shtrirja kryesore e skedarit. Duhet të theksohet se gjatë importimit, të gjitha variablat dhe miksat (do të flasim për to më poshtë) transferohen në skedarin kryesor në të cilin kryhet importi.

Gjithashtu, mund të specifikoni importin e disa skedarëve të ndarë me presje: @import "header", "sidebar", "footer".

Mbani në mend se importi ndodh në vendin ku keni specifikuar direktivën @import... Kjo zakonisht bëhet në fillim të dokumentit.

@ në rrënjë

Direktiva @ në rrënjë flet vetë dhe nëse përkthehet në Rusisht, do të tingëllojë kështu - "Nga rrënja"... Me fjalë të tjera, ne e zhvendosim përzgjedhësin në rrënjë, duke kapërcyer zinxhirin e përzgjedhësit prind. Këtu, natyrisht, mund të bëni pyetjen - "Pse nevojitet kjo direktivë nëse mund ta zhvendosni manualisht përzgjedhësin në rrënjë?" Përgjigja është e thjeshtë - komoditeti i shkrimit të kodit pa prishur strukturën. Kur të mësoni se si të punoni me Sass në maksimum, do ta kuptoni këtë.

Madhësia e shkronjave kryesore dhe titulli: 30 px ngjyra: # 444 @ at-root .ngjyra e ikonës kryesore: # 444 gjerësia: 20 px

Titulli kryesor (madhësia e shkronjave: 30 px; ngjyra: # 444;) ikona .main__ (ngjyra: # 444; gjerësia: 20 px;)

Direktivat dhe shprehjet e kontrollit

@Nëse direktivë

Kjo direktivë ekzekuton stile nëse shprehja e mbyllur në të kthen ndonjë vlerë tjetër përveç i rremë dhe i pavlefshëm.

$ ngjyra: jeshile .header @if $ color == e gjelbër sfond-ngjyra: jeshile @else if $ ngjyra == blu sfond-ngjyra: blu @else sfond-ngjyra: # f6f6f6

Titulli (ngjyra e sfondit: jeshile;)

Ata që janë të njohur me të paktën bazat e një gjuhe programimi (për shembull, javaScript ose Php) nuk do të jenë të vështirë për t'u kuptuar. Këtu thelbi është i njëjtë, gjëja kryesore është të njohësh sintaksën e shkrimit të kodit.

@Për direktivë

Në një gjuhë programimi (përsëri në Javascript ose Php) duke përdorur Për mund të vendosni një cikël. Në Sass, kjo direktivë bën të njëjtën gjë - krijon një lak. Për çdo përsëritje (përsëritje), përdoret një variabël numërues që ndryshon të dhënat e daljes.

Direktiva ka 2 forma shkrimi: 1. @for $ var nga<начало>përmes<конец>dhe 2. @për $ var nga<начало>te<конец>... Nëse dëshironi që shifra e fundit të përfshihet në lak, atëherë përdorni " përmes". Le të marrim një shembull:

@për $ i nga 1 në 6 .elem-item - # ($ i) sfond-imazh: url ("imazhe / imazh - # ($ i) .jpg")

Elementi-1 (imazhi i sfondit: url ("imazhe / imazh-1.jpg");). Elementi-2 (imazhi i sfondit: url ("imazhe / imazh-2.jpg");). elem-item-3 (background-image: url ("imazhe / image-3.jpg");). elem-item-4 (background-imazh: url ("imazhe / imazh-4.jpg");). elem-item-5 (sfondi-imazh: url ("imazhe / imazh-5.jpg");)

Për të treguar vlerën përfundimtare, përdora fjalën kyçe " te". Në këtë situatë, cikli përfundon me një shifër - 5 ... Vini re se sa kompakt duket kodi Sass.

@Çdo direktivë

Direktiva @secili ashtu si @for shfaq vlerat në një lak dhe është i përshtatshëm në atë që përveç numrave, mund të përsërisni mbi vlera specifike. Le të marrim ciklin e mësipërm dhe ta ndryshojmë atë në disa vlera.

@secil $ bgItem në kafshë, liqen, det, peizazh, natyrë .elem-item - # ($ bgItem) sfond-imazh: url ("imazhe / imazh - # ($ bgItem) .jpg")

Elem-item-kafshë (sfondi-imazh: url ("imazhe / imazh-animal.jpg");). elem-item-sea (sfondi-imazh: url ("imazhe / imazh-deti.jpg");). elem-item-nature (sfondi-imazh: url ("imazhe / imazh-nature.jpg");)

Në këtë rast, një variabël numërues nuk krijohet, dhe numri i përsëritjeve varet nga numri i vlerave të krijuara pas fjalës kyçe " në". Vlerat shfaqen përmes një ndryshoreje (në këtë shembull - $ bgItem), emri i së cilës mund të jetë arbitrar.

Përzierjet (funksionet)

Mixins (mixins) janë një lloj funksioni, si në një gjuhë programimi, i cili është krijuar për të hequr qafe kodin e përsëritur. Përzierjet mund të përmbajnë copa të tëra stilesh që lejohen në Sass. Le të shohim një shembull për qartësi.

@mixin align-center pozicion: krye absolute: 50% majtas: 50% transformim: përkthe (-50%, -50%) .container @include align-center

Miksin krijohet nga direktiva @mixin, e ndjekur nga emri i mixin-it, si dhe parametrat e kaluar sipas dëshirës, ​​të ndara me një hapësirë. Menjëherë, vërej se karakteret vizë (-) dhe nënviza (_) në emrin e mixin janë të këmbyeshme. Mixin mund të përmbajë jo vetëm rregulla, por edhe përzgjedhës. Më lart, unë dhashë një shembull të një miksin elementar pa parametra.

Miksin thirret nga direktiva @include dhe më pas, e ndarë me një hapësirë, ne tregojmë emrin e miksinit të krijuar. Në shembullin e mësipërm, kjo është përqendrimi i bllokut përgjatë boshtit X dhe përgjatë boshtit Y duke përdorur pozicionimin absolut. Nëse duhet ta përdorni këtë shpesh, atëherë do të pranoni se është më e lehtë të quash vetëm një miks sesa të shkruash stile të përqendrimit pa pushim.

Tani le të shohim një miksin me parametra (argumente).

Kufiri @mixin ($ gjerësia, $ ngjyra) kufiri: gjerësia: stili i gjerësisë $: ngjyra e ngurtë: $ color .square @include border (2px, #ccc)

Sheshi (gjerësia e kufirit: 2 px; stili i kufirit: i ngurtë; ngjyra e kufirit: #ccc;)

Siç mund ta shihni, pas emrit të mixin-it në kllapa, vendosim argumentet, në këtë rast, gjerësinë e kufirit dhe ngjyrën. Ky është përzierësi më i thjeshtë që kam përfshirë për qartësi. Në praktikë, ju mund të gjeni përzierje më komplekse duke përdorur kushte dhe ndryshore të ndryshme. Por le të mos e komplikojmë gjithçka tani, duhet të fillojmë gjithmonë me diçka të vogël dhe të thjeshtë, dhe më pas të vazhdojmë ndërsa shkojmë lart.

Kjo përfundon përmbledhjen time të vogël të paraprocesorit Sass. Pse e vogël? Sepse nuk është e gjitha kjo që ju thashë. Në përgjithësi, duke përdorur sa më sipër, mund të filloni me siguri të përdorni Sass në vend të Css tani. Mund të mësoni më shumë rreth Sass duke iu referuar dokumentacionit që ofrova më sipër.

Epo, faleminderit të gjithëve për vëmendjen tuaj! Si gjithmonë, ne bëjmë pyetje në komente dhe abonohemi ose në kanalin e telegramit ose në buletinin me email (formulari në shiritin anësor në të djathtë) në mënyrë që të mos humbasë asgjë interesante.

Shihemi në postimet e mia të tjera...

Artikulli "SASS për stilistë dhe jo vetëm" për 2013-02-21 u riemërua në " Sintaksa SASS"dhe përditësuar (2014-02-17)

Sassështë një gjuhë parapërpunuese; paraprocesorët përpilojnë kodin CSS që ne shkruajmë në gjuhën e përpunimit (SASS) në kod të pastër CSS.

Dokumentacioni SASS është i drejtuar më shumë për programuesit, kështu që projektuesit nuk janë gjithmonë të gatshëm të fillojnë të punojnë me SASS. Për më tepër, përfitimet e përdorimit të SASS nga këndvështrimi i projektuesve nuk janë gjithmonë të shprehura në mënyrë eksplicite.

Në këtë artikull, unë dua të mbuloj disa parime të thjeshta. Unë nuk jam ekspert i SASS, por duhet të theksoj se përdorimi i sass është një vendim i mençur.

Pra, cilat janë këto përfitime? Ju do të jeni në gjendje të strukturoni logjikisht kodin tuaj, duke përshpejtuar kështu procesin e shkrimit të kodit; numri i përsëritjeve do të zvogëlohet ndjeshëm (ndryshorët do të na ndihmojnë për këtë), kodi do të bëhet shumë më i lehtë për t'u ruajtur. Gjuha SASS e bën të lehtë punën në një projekt, pavarësisht se kush jeni - programues apo projektues. Ky është me të vërtetë rasti.

Variablat

Në SASS, emri e ndryshueshme fillon me një shenjë dollari ($). Vlerat e ndryshueshme janë identike me vlerat e pronës CSS.

Le të fillojmë me bazat, përkatësisht variablat. Le të shohim variablat bazuar në shembullin e mëposhtëm. Ne priremi të përdorim shumë ngjyra në dokumentin tonë. Si rezultat, ju duhet të shkruani vazhdimisht vlerat e ngjyrave në formatin hex ose rgb. Nëse duam të ndryshojmë ndonjë ngjyrë, do të duhet të kalojmë përmes zëvendësimit automatik në të gjithë dokumentin. Thënë kjo, nuk mund të jemi të sigurt se nuk do të kapim vlera të panevojshme.

A (ngjyra: # 822733;) .përmbledhje (ngjyra: # 822733;) .e drejta e autorit (ngjyra: # 822733;)

Për shembull, mund të keni disa rregulla që përcaktojnë ngjyrën e kuqe të errët për përzgjedhësit e dëshiruar. Gjuha SASS na lejon të bëjmë sa më poshtë: në fillim të dokumentit, ne mund të përcaktojmë një variabël me emrin $ brand-color dhe më pas në dokument, në vend të vetë vlerës, të vendosim emrin e ndryshores. Pastaj, nëse duhet të ndryshojmë ngjyrën, thjesht duhet të ndryshojmë vlerën e ndryshores $ brand-color dhe kjo do të ndryshojë ngjyrën e të gjitha rregullave që përdorin variablin $ brand-color.

// Biblioteka ime e ngjyrave SASS $ markë-ngjyra: # 822733; a (ngjyra: $ brand-color;) .përmbledhje (ngjyra: $ markë-color;) .e drejta e autorit (ngjyra: $ markë-color;)

Vlerat numerike për variablat

Variablat mund të përmbajnë jo vetëm vargje, por edhe numra që mund t'i manipuloni. Nëse jeni duke përdorur rrjete, ose nëse shkalla juaj e paraqitjes bazohet në vlera specifike, atëherë me siguri po i përdorni ato vlera në të gjithë skedarin tuaj të stilit. Për shembull, nëse jeni duke përdorur vazhdimisht 10px, atëherë mund të përcaktoni një variabël, për shembull, njësi $ = 10px. Kjo variabël mund të përdoret në mënyrë të përsëritur në kodin tuaj. Si zakonisht, vlera (10px) do të zëvendësohet për emrin e ndryshores.

Por çfarë nëse duhet të dyfishoni vlerën e një ndryshoreje? Për shembull, supozoni se dëshironi të dyfishoni kufirin e poshtëm të një elementi. Duke përdorur SASS, mund të shtoni disa matematikë të thjeshtë (+, -, *, /,%), për shembull, për rastin tonë:

njësi $ = 10 px; h1, h2, h3 (margin-fund: $ unit;) p (margin-bottom: $ unit;) anash (margin-bottom: $ unit * 2; / * 20px * /) footer (margin-top: $ unit * 4; / * 40 px * /)

papastërtitë

Përzierje mund të krahasohet me një bllok deklaratash të përsëritura në kod. Ky është një pjesë kodi që mund ta përdorni kudo në dokumentin tuaj. Ju jo vetëm që do të eliminoni përsëritjen e panevojshme, por edhe do ta bëni kodin tuaj më të pastër, pasi do të shpëtoni nga nevoja për të përdorur të njëjtën klasë për elementë të ndryshëm.

Për shembull, ju keni një ndarës në faqen tuaj që e përdorni mjaft shpesh. Për shembull, mund t'i përdorni për të thyer blloqet kryesore (për shembull, artikujt dhe kokën) apo edhe paragrafët. Ndarësi ka një mbushje të poshtme, kufirin e poshtëm, kufirin dhe hijen.

Për të krijuar një ndarës, mund të shtoni klasën.shadow-border në element. Por kjo do të "ndotë" ndjeshëm skedarin tuaj html dhe css.

Kufiri hije (kufiri-fund: 1px solid # a4a4a4; -webkit-box-shadow: 0px 2px 5px 0px rgba (200, 200, 200, 0.6); kuti-hije: 0px 2px 5px 20,0px (20,00) , 0,6); mbushje-fund: 20px; margjina-fund: 40px;)

Nëse dëshironi strukturën e duhur në skedarin css dhe shënimin e pastër html, duhet të shtoni rregullin e mësipërm në elementët përkatës html. Vlen të theksohet se nëse ka shumë elementë me një ndarës, kjo do të "prishë" ndjeshëm skedarin e stilit, gjë që e bën të vështirë mirëmbajtjen e skedarit të stilit.

Header, article, p.intro (border-fund: 1px solid # a4a4a4; -webkit-box-shadow: 0px 2px 5px 0px rgba (200, 200, 200, 0.6); box-hije: 0px 2px 0x rgba , 200, 200, 0,6); mbushje-fund: 20px; margjina-fund: 40px;)

Duke përdorur @mixin, mund të përcaktoni një emër për bllokun e deklarimit. Ky emër nuk duhet të lidhet në asnjë mënyrë me HTML-në tuaj.

@mixin shadow-border (border-fund: 1px solid # a4a4a4; -webkit-box-shadow: 0px 2px 5px 0px rgba (200, 200, 200, 0.6); box-hije: 0px 2px 0, rgba 0 , 200, 0,6); mbushje-fund: 20px; margjina-fund: 40px;)

Më pas, për të përfshirë një mixin në një element, ju vetëm duhet të përfshini emrin mixin: @include shadow-border;

@mixin shadow-border (border-fund: 1px solid # a4a4a4; -webkit-box-shadow: 0px 2px 5px 0px rgba (200, 200, 200, 0.6); box-hije: 0px 2px 0, rgba 0 , 200, 0.6); mbushje-fund: 20 pikselë; margjina-fund: 40 px;) artikulli (@përfshi kufirin e hijes;) kokën (@përfshi kufirin e hijes;) p.intro (@përfshi kufirin e hijes;)

Duket mirë.

Parametrat për papastërtitë

Parametrat për miksin janë specifikuar në kllapa pas emrit të miksinit; Përmbajtja e miksinit është e mbyllur në mbajtëse kaçurrelë.

@mixin border-radius (rrezja $: 1 px) (-webkit-border-radius: rrezja $; -moz-border-radius: rrezja e $; rrezja kufitare: rreze $;) / * PËRDORIMI * / .example-class ( ngjyra e sfondit: # 900; @përfshi rreze kufi (20 px);)

Fletët e papastërtive

Ndonjëherë është shumë e përshtatshme të jesh në gjendje të futësh një papastërti në një tjetër. Për shembull, ne duhet të shtojmë një miksin në një miksin ekzistues:

$ border-color: # a4a4a4; njësi $: 10 px; @mixin subtle-shadow (-webkit-box-shadow: 0px 2px 5px 0px rgba (200, 200, 200, 0.6); box-shadow: 0px 2px 5px 0px rgba (200, 200,0,02); shadow-border (@include subtle-shadow; border-bottom: $ unit / 10 solid $ border-color; padding-bottom: $ unit * 2; margin-bottom: $ unit * 4;) artikull (@përfshi shadow-border ;) kokë (@përfshi kufirin e hijes;) p.intro (@përfshi kufirin e hijes;)

Shtojcat

Përzierjet nuk janë e vetmja gjë që mund të futeni në përzgjedhësit CSS (ose më mirë, në blloqet e deklaratave në një skedar sass). Në SASS, mundeni elementet fole brenda njëri-tjetrit... Kjo do të eliminojë përzgjedhësit e kopjuar dhe do ta bëjë kodin tuaj më të lehtë për t'u lexuar.

/ * CSS e rregullt * / .moduli h3 (pesha e shkronjave: bold;) .moduli p (mbushje-fund: 10px;)

/ * shkruani në SASS * / .module (h3 (pesha e shkronjave: bold;) p (mbushje-fund: 10px;))

Bashkëngjitjet dhe pyetjet @ media

Bashkëngjitjet bëhen jashtëzakonisht të dobishme kur merren me pyetje mediatike. Zakonisht, kur punoni me pyetje mediatike, duhet të krijoni stile shtesë për rezolucione të ndryshme të ekranit dhe ndonjëherë edhe të krijoni një skedar stili të veçantë.

/ * viewport - çdo, duke përfshirë shfletuesit që nuk mbështesin @media * / artikull (madhësia e shkronjave: 14 px; lartësia e rreshtit: 25 px;) artikulli h2 (madhësia e shkronjave: 18 px; mbushja e poshtme: 15 px;) / * për portat e shikimit 300 pikselë dhe më të gjerë (së pari celulari) * / ekran vetëm @media dhe (gjerësia min.: 300 px) (artikull (lartësia e rreshtit: 20 pikselë; gjerësia: 90%;) artikulli h2 (mbushja-fund: 10 px;)) / * për portat e pamjes 600 pikselë dhe më të gjerë * / ekran vetëm @media dhe (gjerësia min.: 600 pikselë) (artikull (lartësia e linjës: 25 px; gjerësia: 80%;) artikulli h2 (mbushja-fund: 15 px;)) / * për 900 px portat e shikimit dhe më gjerë * / ekran vetëm @media dhe (gjerësia min.: 900 pikselë) (artikull (gjerësia: 60%;)) / * 1200 pikselë dhe më i gjerë * / ekran vetëm @media dhe (gjerësia min.: 1200 pikselë ) (artikull ( madhësia e shkronjave: 16 px; lartësia e rreshtit: 30 px; gjerësia: 50%;) artikulli h2 (madhësia e shkronjave: 21 px; lartësia e rreshtit: 35 px; mbushja e poshtme: 20 px;))

SASS, nga ana tjetër, ju lejon të futni të gjitha pyetjet e medias menjëherë brenda elementeve. Kjo do ta bëjë më të lehtë gjetjen dhe modifikimin e stileve që ndikojnë në paraqitjen e përgjegjshme.

Artikulli (madhësia e shkronjave: 14 px; lartësia e rreshtit: 25 px; h2 (madhësia e shkronjave: 18 px; mbushja e poshtme: 15 px;) vetëm ekrani @media dhe (gjerësia min: 300 px) (lartësia e rreshtit: 20 px; gjerësia: 90%; h2 (mbushje-fund: 10 px;)) ekran @media vetëm dhe (min-width: 600px) (lartësia e linjës: 25px; gjerësia: 80%; h2 (mbushje-fund: 15px;)) vetëm @media ekrani dhe (gjerësia min: 900 pikselë) (gjerësia: 60%;) Ekrani vetëm @media dhe (gjerësia minimale: 1200 pikselë) (madhësia e shkronjave: 16 px; lartësia e rreshtit: 30 px; gjerësia: 50%; h2 (font- madhësia: 21 px; lartësia e rreshtit: 35 px; mbushja e poshtme: 20 px;)))

Importimi i deklaratës @import në SASS

Operatori @Import
ju lejon të përfshini përmbajtjen e një skedari CSS (SCSS) të palës së tretë në skedarin aktual CSS (SCSS).
@import nuk lejohet të futet pas ndonjë deklarate të ndryshme nga @charset ose @import tjetër.

Për të përfshirë përmbajtjen, për shembull, _style_two.scss, duhet të shkruani si kjo:

@import "style_two.scss"; / * përfshin pa nënvizim * /

E rëndësishme: nëse përfshini jo një skedar specifik, por një dosje, atëherë skedarët css nuk do të gjenerohen për skedarët që fillojnë me _ .
Për shembull, prania e një skedari style.scss do të rezultojë në krijimin e style.css, por prania e një skedari _some.scss jo. Kështu, një nënvizim nënkupton që skedari nuk është një fletë stili e pavarur dhe mund të importohet vetëm në një fletë stili tjetër.

Llojet në SASS

Sintaksa për deklaratën e ciklit (secila) është si më poshtë: $ var in ... $ var është emri i ndryshores, dhe listoni vlerën e ndryshores $ var.
Në vend të $ var, vlerat nga , atëherë përmbajtja e lakut shfaqet në skedarin e stilit (nga numri i vlerave ).
Për shembull:

SCSS

@çdo $ kafshë në pumë, kërpudha deti, egër, salamandër (. # ($ kafshë) -ikonë (imazhi i sfondit: url ("/ imazhe / # ($ kafshë) .png");))

Përpiluar në:

CSS

.puma-icon (background-image: url ("/ images / puma.png");) .sea-slug-icon (background-image: url ("/ images / sea-slug.png");) .egret -ikonë (imazhi i sfondit: url ("/ imazhe / egret.png");) .salamander-icon (imazhi i sfondit: url ("/ imazhe / salamander.png");)

@Extend operator

Shpesh lind një situatë kur një klasë duhet të ketë të gjitha stilet e një klase tjetër, përveç stileve të veta. Zgjidhja më e zakonshme është përdorimi i dy klasave; e para përmban stile të përgjithshme, e dyta - ato specifike.

Operatori @extend i shmang këto probleme duke lejuar një përzgjedhës të trashëgojë stile nga një përzgjedhës tjetër. Për shembull:

SCSS

.error (kufiri: 1px # f00; ngjyra e sfondit: #fdd;) .error.intruzion (background-image: url ("/ image / hacked.png");) .seriousError (@extend .error; border-width : 3 px;)

Përpiluar në:

CSS

.error, .seriousError (kufiri: 1px # f00; ngjyra e sfondit: #fdd;) .error.intrusion, .seriousError.intrusion (image-background: url ("/ image / hacked.png");) .seriousError ( gjerësia e kufirit: 3 px;)

Përshëndetje miq!

Ky është një udhëzues i detajuar për paraprocesorin Sass për fillestarët. Këtu do t'i hedhim një vështrim paraprocesorit Sass, përfitimet, sintaksën dhe shembujt e përdorimit të tij.

Klasa

Plus

Zapin

Sponsor i lëshimit - partner pritës: partnerwp.ru

Të gjithë shembujt Sass / CSS dhe projekti Gulp i personalizuar për këtë tutorial mund të shkarkohen nga GitHub.

Sassështë një nga parapërpunuesit më të avancuar dhe më të qëndrueshëm CSS, dhe gjithashtu një nga paraprocesorët më të njohur në mesin e profesionistëve.

Sass përfitime

• Pajtueshmëria me versione të ndryshme të CSS, falë të cilave ju mund të përdorni çdo bibliotekë CSS në projektin tuaj;
• Një numër i madh funksionesh të ndryshme për çdo rast. Pak paraprocesorë CSS mund të mburren me një funksionalitet kaq të pasur;
• Sass është një nga paraprocesorët më të vjetër CSS dhe ka shumë përvojë ndër vite;
• Një mundësi e shkëlqyer për të përdorur kornizat Sass për ta bërë jetën më të lehtë për zhvilluesin. Një kornizë e tillë është Bourbon, të cilën e përdorim në disa versione të paraqitjes Jedi kur shkruajmë Sass;
• Sintaksë. Ju mund të zgjidhni midis dy sintaksave që janë më afër jush - të thjeshtuara (SASS) dhe të zgjeruara të ngjashme me CSS (SCSS).

Kur u njoha për herë të parë me paraprocesorët CSS, unë, si shumë zhvillues të tjerë fillestarë të uebit, nuk e kuptova plotësisht vetë idenë e përdorimit të paraprocesorëve CSS. Pse të bëni një shtresë shtesë, të përdorni disa mjete, të ndërlikoni CSS, mendova. Por me kalimin e kohës, fillova të kuptoj se nga dita në ditë shkrimi i CSS u bë një torturë, një rutinë gri, duheshin përsëritur shumë veprime, përzgjedhësit, vetitë dhe madje blloqe të tëra të kodit CSS u kopjuan për të arritur rezultatin e dëshiruar. Sot, me shembuj, do t'ju tregoj se si mund ta thjeshtoni punën tuaj duke përdorur paraprocesorin Sass, të diversifikoni zhvillimin dhe madje të argëtoheni pak ndërsa shkruani disa funksione pak a shumë komplekse.

Vendosja e mjedisit

Si një mjedis për të punuar me Sass në këtë tutorial, si në mësimet tona të tjera, ne do të përdorim versionin Sass të menaxherit të detyrave Gulp ( gëlltitës). Për të përdorur versionin origjinal të Ruby ose për të përpiluar Sass duke përdorur softuer special, mund të lexoni udhëzimet në zyrë. faqe. Ky mësim është kryesisht praktik në natyrë, kështu që ne nuk do të ndalemi në opsionet e mundshme për t'u lidhur me projektin, ne do ta lidhim Sass në mënyrën më të njohur, duke përdorur Gulp.

Sigurohuni që keni të instaluar versionin më të fundit të Node.js dhe Gulp. Nëse Node.js nuk është i instaluar, shkarkoni dhe instaloni atë. Pas instalimit të Node.js, instaloni gulp me komandën "npm i -g gllënjka"(Windows) ose "sudo npm i -g gllënjka"(Linux, OS X). Lexoni:.

Npm i --save-dev gulp gulp-sass

Var gulp = kërkoj ("gulp"), // Përfshi Gulp sass = kërkoj ("gulp-sass"); // Përfshi paketën Sass gulp.task ("sass", funksioni () (// Krijoni kthimin e detyrës "sass" gulp.src (["sass / ** / *. Sass", "sass / ** / * . dest (" css ")) // Ngarko rezultatin në dosjen css)); gulp.task ("watch", funksioni () (gulp.watch (["sass / ** / *. sass", "sass / ** / *. scss"], ["sass"]); // Duke parë prapa skedarëve sass në dosjen sass)); gulp.task ("parazgjedhur", ["orë"]);

Njoftim rreshtin 6 - këtu ne po përdorim një nga stilet për daljen në skedarin që rezulton: folezuar- i mbivendosur, sipas parazgjedhjes; zgjeruar- i vendosur; kompakte- kompakt, kur zgjedhësi dhe vetitë e tij në mbajtëset kaçurrelë shfaqen në një rresht; të ngjeshur- i ngjeshur. Përveç kësaj, falë përpunimit .on ("gabim", sass.logGabim) nëse ndodh një gabim, nuk duhet të rifreskojmë komandën e ekzekutimit të Gulpfile dhe do të shohim se në cilën linjë të skedarit Sass kemi gabimin. Në shembujt do të përdor stilin e konkluzionit zgjeruar për qartësi.

Ju duhet të keni strukturën e mëposhtme të projektit në sistemin tuaj të skedarëve:

• projekti im /
  • css /
    • e zakonshme.css
  • sass /
    • e zakonshme.sass
  • nyja_modulet /
  • gulpfile.js
  • paketim.json

Ne fillojmë ekzekutimin e Gulpfile me komandën gllabërim në terminalin e dosjes së projektit.

Këtu ne rrëmbejmë të gjithë skedarët Sass nga drejtoria sass / projektin tuaj dhe ngarkoni rezultatin e përfunduar të CSS në dosje css /... Gjithashtu, këtu kemi vendosur mbikëqyrjen shikojnë për ndryshime në skedarët Sass dhe përpilim automatik në CSS, nëse ndodhin ndryshime të tilla. Skedari css që rezulton përfshihet në paraqitje.

Nëse jeni të hutuar rreth konfigurimit të paketave Gulp në këtë shembull, lexoni tutorialin Gulp.

Pasi mjedisi ynë është konfiguruar dhe Sass është konvertuar me sukses në CSS kur ruani skedarët * .sass në drejtori sass /, mund të vazhdoni me siguri të mësoni dhe të zbatoni shembujt që do të analizojmë sot në praktikë.

Sintaksa Sass

Ka 2 mënyra për të shkruar Sass, 2 sintaksa: SASS dhe SCSS. Mënyra më e vjetër për të shkruar Sass është sintaksa e dhëmbëzimit... Është ky drejtshkrim që ne do të përdorim në tutorialin tonë. Shtesa e skedarit për një sintaksë të tillë është * .sass... Opsioni i dytë është sintaksa, duke zgjeruar sintaksën CSS, Sassy CSS. SCSS është shkruar si CSS e rregullt, por e zgjeruar me veçori shtesë Sass. Zgjatja e skedarit me sintaksë SCSS - * .scss.

Shume e rendesishme! Sintaksa e dhëmbëzimit kërkon respektim shumë të rreptë të dhëmbëzimit të vetive të mbivendosur, dhe nëse merrni gabime gjatë ekzekutimit të Gulp ose gabime të nënkuptuara pa specifikuar një rresht në tastierë, ka shumë të ngjarë që gabimi të jetë në dhëmbëzimin e gabuar. Një detaj tjetër i rëndësishëm - nëse përdorni skedat si dhëmbëzime, përpiluesi do të gjenerojë një gabim kur përpiqet të konvertojë Sass, i cili përveç skedave përdor edhe hapësirat si indentime. Ose përdorni vetëm skeda ose vetëm hapësira.

Sintaksa SASS dhe SCSS:

SASS - sintaksë e dhëmbëzimit	SCSS - sintaksa e zgjerimit
$ font-stack: Helvetica, sans-serif $ primare-color: # 333 font body: 100% $ font-stack color: $ color-primary	$ font-stack: Helvetica, sans-serif; $ ngjyra kryesore: # 333; trupi (fonti: 100% $ font-stack; ngjyra: $ ngjyra kryesore;)

Përveç rregullave bazë të drejtshkrimit (kllapa kaçurrelë, pikëpresje në fund të rreshtave), SASS dhe SCSS ndryshojnë edhe në mënyrën se si shkruhen disa funksione. Pra, kini kujdes kur përdorni ndonjë shembull nga Interneti, kontrolloni se cila sintaksë po përdoret. Nëse një shembull mjaft i madh nga Interneti është bërë në stilin SCSS dhe projekti juaj është shkruar në SASS, mund ta importoni atë në skedarin tuaj kryesor pa ndryshuar sintaksën dhe shtrirjen e skedarit duke përdorur direktivën @import, për shembull, nëse keni shkarkuar skedarin carousel.scss atëherë mund ta lidhni me tuajin kryesore.sass varg @import "carousel"... Ju gjithashtu mund të bëni të kundërtën kur duhet të importoni skedarë * .sass në skedarin main.scss. Në shembullin tonë nga GitHub, ne i importojmë të gjitha _x.x.sass skedarë në një e zakonshme.sass ku x.x është numri i titullit të shembullit nga ky artikull.

Ne do të përdorim sintaksën e indentacionit.

1. Zgjerimi i CSS me Sass

1.1 Rregullat e folezimit

Sass u jep zhvilluesve një mundësi të shkëlqyeshme për të përdorur futjen e disa rregullave CSS brenda të tjerëve, duke reduktuar kështu kohën për të shkruar/kopjuar përzgjedhës të gjatë dhe duke e bërë kodin më të strukturuar, me një hierarki të qartë.

1.2 Lidhja me një përzgjedhës prind

Nëse dëshironi të zgjeroni përzgjedhësin pa krijuar një rregull të ri, mund të lidhni përzgjedhës shtesë me përzgjedhësin e gatshëm duke përdorur shenjën & ... Nga pamja e jashtme, duket si krijimi i një përzgjedhësi fëmijësh në hierarki, por duke përdorur & , ne po zgjerojmë përzgjedhësin e prindërve në vend që të krijojmë fëmijën.

Kushtojini vëmendje rregullit trupi.firefox &, i cili na lejon të marrim një zinxhir të ri nga çdo element në atë aktual, nëse vendoset në fund & .

Përndryshe, lidhja mëmë mund të përdoret për të krijuar përzgjedhës të përbërë:

1.3 Vetitë e bashkangjitura

Për lehtësi, mund të ndani prapashtesën e hapësirës së emrit të pronës në bashkëngjitje. Për shembull, diferencë- lartë, diferencë-poshtë, diferencë- majtas, diferencë-E drejta kanë një bazë të përbashkët diferencë dhe mund të ndahet në bashkëngjitje si më poshtë:

1.4 Zgjedhësit e shablloneve

Ndonjëherë lind një situatë kur disa elementë në faqe përdorin të njëjtën bazë CSS, të njëjtin grup karakteristikash që janë specifike vetëm për ta. Këto rregulla bazë CSS mund të stilohen si një përzgjedhës shabllon për përdorim në shumë vende në Sass. Përzgjedhësit e shablloneve konkludohen duke përdorur direktivën @zgjat.

2. SassScript

SassScript ju lejon të zgjeroni ndjeshëm aftësitë e Sass përmes përdorimit të variablave të personalizuar, aritmetikës dhe funksioneve të tjera. SassScript mund të përdoret për të gjeneruar automatikisht përzgjedhës dhe prona të reja.

2.1 Variablat në Sass

Është një veçori vërtet interesante për të përcaktuar variablat që mund t'i përdorni kudo në skedarin tuaj Sass. Ngjyrat, vlerat e paracaktuara, njësitë, të gjitha këto mund të merren në një variabël dhe të përdoren në të ardhmen. Variabla përcaktohet si kjo: $ emri: vlera.

2.2 Veprimet me numra dhe vargje + interpolim

Sass ju lejon të përdorni aritmetikë standarde të numrave si mbledhja (+), zbritja (-), pjesëtimi (/) dhe moduli (%). Operatorët e krahasimit (<, >, <=, >=, ==,! =) mbështeten gjithashtu për numrat.

Përveç kësaj, Sass ka aftësinë për të lidhur (lidhur) vargjet.

Siç mund ta shihni nga shembulli Shuma e $: 10 + 20/2, përparësia vihet re në kryerjen e veprimeve aritmetike - së pari ndarja, pastaj mbledhja. Ju mund të përdorni kllapa për të përcaktuar rendin e veprimeve, si në matematikë. Vini re se kur shtoni 12 px + 8 px, do marrim 20 px.

Vini re gjithashtu linjat 2 dhe 9, këtu ne përdorim interpolim për të vendosur vlera dinamike kudo në skedarin Sass, duke përfshirë këtu ku kemi një emër pronësie, një emër përzgjedhësi ose në çdo rresht.

Interpolimi po merr një vlerë të re duke përdorur të tjerët.

Më shpesh, interpolimi në Sass përdoret për të marrë një vlerë të re të një ndryshoreje, falë "integrimit" në vlerën e një ndryshoreje tjetër, me anë të konstruksionit #{} , Për shembull:

Ju nuk mund të kapni dhe futni një ndryshore në një varg pa përdorur interpolim, siç mund të bëni në PHP, në thonjëza të dyfishta. Sigurohuni që të përdorni interpolim të ndryshueshëm.

2.3 Operacionet me ngjyra

Ngjyrat në Sass mund të shtohen, zbriten, ndahen dhe shumëzohen. Të gjitha veprimet aritmetike kryhen për secilën ngjyrë veç e veç: e kuqe, jeshile dhe blu.

Vini re se kur shtoni ngjyrat rgba, opaciteti i fundit prej 0.75 nuk duhet të jetë i ndryshëm nga të tjerët në shprehje, përndryshe shtimi do të dështojë. Në vend të kësaj, ju mund të rregulloni kanalin alfa rgba duke përdorur errësoj dhe transparente ose kontrolloni opacitetin e ngjyrës HEX duke përdorur funksionin rgba.

3. Direktivat dhe rregulloret

3.1 @import

Mund të importoni në skedarin tuaj Sass sass, scss dhe css skedarë duke përdorur direktivën @import, ndërsa të gjitha miksinat dhe variablat do të funksionojnë në skedarin kryesor në të cilin kryhet importi.

@import do të funksionojë si CSS normale @import nëse:

• shtegu i skedarit përmban http://;
• skedari thirret nëpërmjet url ();
• ose ka parametra media në import.

Në mënyrë që një skedar tjetër të importohet plotësisht në skedarin kryesor Sass, zgjatja e skedarit duhet të jetë * .sass, * .scss ose * .css.

Le të hedhim një vështrim në disa shembuj.

Skedarët e mëposhtëm janë importuar nuk do të:

Skedarët e mëposhtëm do të jetë importuar:

Kujdes! Në versionet e reja gëlltitës Shtesa css duhet të specifikohet për të importuar skedarë CSS në Sass

Është e mundur të importohen disa skedarë, të ndarë me presje: @import "header", "media".

Skedarët që fillojnë me një nënvizim emërtohen fragmente dhe kur importohen, ato nuk kërkojnë specifikimin e nënvizimit dhe zgjerimit. Për shembull, skedari _header.sass mund të importohet si kjo: @import "header".

Vini re se importi bëhet aty ku specifikoni direktivën @import... Në përputhje me rrethanat, është e mundur të bëhen importe të mbivendosura në vendin ku nevojitet:

#main @import "shembull"

3.2 @ në rrënjë

Direktiva @ në rrënjë ngre përmbajtjen e rregullave në rrënjë, duke anuluar zinxhirin nga prindi. Gjithçka është e thjeshtë këtu:

Ne nuk kemi mbuluar të gjitha direktivat që janë në Sass, por vetëm ato më të përdorurat në praktikë. Nëse jeni të interesuar të mësoni më shumë rreth direktivave Sass, shikoni dokumentacionin.

4. Shprehjet

Sass mbështet përdorimin e shprehjeve dhe funksioneve për kushte të ndryshme, implementime looping dhe më shumë.

4.1 Direktiva @if ().

Direktiva @nëse () ju lejon të ekzekutoni SassScript në kushte të caktuara dhe ka sintaksën e mëposhtme:

4.2 Direktiva @for

@për nxjerr një bllok me stile një numër të caktuar herë. Mund të vendosni një variabël numërues në kohën e ekzekutimit.

Ju mund të specifikoni përmes në vend të te nëse doni të shkoni nga 1 në 11 përfshirëse, dhe jo vetëm deri në 10, si në shembull.

4.3 Direktiva @secil

Nëse dëshironi të kaloni nëpër një listë vlerash, jo vetëm numrash, mund të përdorni direktivën @secili:

4.4 Direktiva @while

@derisa nxjerr blloqet e stilit ndërsa shprehja është e vërtetë.

5. Përzierjet

Përzierjet- Blloqe kodi Sass (ose miks shabllonesh) që mund të marrin argumente (opsionale) dhe ju lejojnë të zgjeroni ndjeshëm mundësitë e stileve të shkrimit dhe të zvogëloni kohën e shpenzuar për të aplikuar të njëjtin lloj rregullash dhe madje edhe blloqe të tëra CSS. Është si një funksion që mund të marrë një argument, të bëjë një sasi të madhe pune dhe të kthejë një rezultat në varësi të parametrit të hyrjes.

Mixin është deklaruar nga direktiva @mixin, pas shpalljes duhet treguar emri mixina. E quajtur me direktivë mixin @përfshi, e cila merr emrin e mixin dhe argumentet e kaluara, nëse ka.

Miq, ne kemi shqyrtuar tiparet kryesore të Sass, të cilat janë të mjaftueshme për punë të frytshme me stilet e faqeve CSS. Disa direktiva dhe veçori nuk përfshihen në këtë udhëzues, por nëse jeni të interesuar të mësoni për të gjitha veçoritë e Sass, do të jetë e dobishme.

Unë do t'i përgjigjem menjëherë pyetjes - si të punoni me stilet Sass në një sit të përfunduar, a keni vërtet nevojë të redaktoni CSS-në e përfunduar dhe ta ngarkoni atë përmes FTP? Jo, nuk mund ta bësh këtë. Ju duhet të keni një kopje lokale të stileve tuaja Sass apo edhe të gjithë sajtin dhe pas përfundimit të punës vendosni (ngarkoni) stile të gatshme përmes FTP. Për këtë, ju mund të përdorni paketën Gulp vinyl-ftp... Ose konfiguroni një mjedis Sass në serverin tuaj për të përpiluar skedarët e ngarkimit FTP / sFTP.

Kaq për sot. Faleminderit per vemendjen!