SASS-i keele pesastatud reeglid. Töötava Sassi keskkonna ettevalmistamine. Nii tegin ma varem

Tere, sõbrad!

See üksikasjalik juhend eeltöötleja poolt Sass algajatele. Siin tutvume Sassi eelprotsessori, selle eeliste, süntaksi ja näidete abil selle kasutamisega.

Lahe

Pluss

kogelema

Väljaandja sponsor – hostimispartner: partnerwp.ru

Selle õpetuse jaoks saate GitHubist alla laadida kõik Sassi/CSS-i näited ja kohandatud Gulpi projekti.

Sass on üks arenenumaid ja stabiilsemaid CSS-i eelprotsessoreid, aga ka üks populaarsemaid eelprotsessoreid professionaalide seas.

Sassi eelised

  • Ühildub erinevad versioonid CSS, tänu millele saate oma projektis kasutada mis tahes CSS-i teeke;
  • Suur hulk erinevaid funktsioone igaks puhuks. Vähesed CSS-i eelprotsessorid võivad kiidelda nii rikkalike funktsionaalsustega;
  • Sass on üks vanimaid CSS-i eeltöötlejaid, mis on oma paljude aastate jooksul omandanud palju kogemusi;
  • Suurepärane võimalus kasutada Sassi raamistikke, mis muudavad arendaja elu lihtsamaks. Üks selline raamistik on Bourbon, mida me kasutame mõnes Jedi väljaandes Sassi kirjutamisel;
  • Süntaks. Saate valida ühe kahest teile lähedasemast süntaksist – lihtsustatud (SASS) ja laiendatud CSS-i sarnasest (SCSS).

Kui ma esimest korda CSS-i eelprotsessoritega tutvusin, ei saanud ma, nagu ka paljud teised algajad veebiarendajad, täielikult aru CSS-i eelprotsessorite kasutamise ideest. Miks teha lisakiht, kasutada mingeid tööriistu, teha CSS-i keeruliseks, mõtlesin. Kuid aja jooksul hakkasin mõistma, et CSS-i kirjutamine muutus päevast päeva piinamiseks, halliks rutiiniks; soovitud tulemuse saavutamiseks tuli paljusid toiminguid korrata, selektoreid, atribuute ja isegi terveid CSS-koodi plokke kopeerida. Täna näitan teile näidete varal, kuidas saate Sassi eelprotsessori abil oma tööd lihtsustada, oma arendust mitmekesistada ja isegi mõne enam-vähem keeruka funktsiooni kirjutamisel veidi nalja teha.

Keskkonna seadistamine

Keskkonnana Sassiga töötamiseks selles õppetükis, nagu ka teistes tundides, kasutame Gulpi tegumihalduri jaoks Sassi versiooni ( gulp-sass). Ruby originaalversiooni kasutamiseks või Sassi kompileerimiseks spetsiaalse tarkvara abil saate juhiseid lugeda kontoris. veebisait. See õppetund on eelkõige praktilist laadi, mistõttu me projektiga liitumise võimalikel võimalustel pikemalt ei peatu, vaid ühendame Sassi kõige populaarsemal viisil, kasutades Gulpi.

Veenduge, et olete installinud Uusim versioon Node.js ja Gulp. Kui Node.js pole installitud, laadige see alla ja installige. Pärast Node.js installimist installige käsuga gulp "npm i -g gulp"(Windows) või "sudo npm i -g gulp"(Linux, OS X). Loe:.

Npm i --save-dev gulp gulp-sass

Var gulp = nõuda("gulp"), // Ühenda Gulp sass = nõuda("gulp-sass"); // Ühendage Sass pakett gulp.task("sass", function() ( // Loo ülesanne "sass" return gulp.src(["sass/**/*.sass", "sass/**/* .scss "]) // Kasutage faili source.pipe(sass((outputStyle: "expanded")).on("error", sass.logError)) // Teisendage Sass CSS-iks, kasutades käsku gulp-sass .pipe(gulp. dest(" css")) // Laadige tulemus üles css-kausta)); gulp.task("watch", function() ( gulp.watch(["sass/**/*.sass", "sass/**/*.scss"], ["sass"]); // Vaata sass-failide taga sass-kaustas)); gulp.task("vaikimisi", ["vaata"]);

Pöörake tähelepanu reale 6 - siin kasutame saadud faili üht väljundstiili: pesastatud- vaikimisi pesastatud; laiendatud- laiendatud; kompaktne- kompaktne, kui selektor ja selle omadused lokkis sulgudes kuvatakse ühel real; kokkusurutud- kokkusurutud. Lisaks tänu töötlusele .on("viga", sass.logError) Kui ilmneb tõrge, ei pea me Gulpfile'i täitmiskäsku uuesti laadima ja näeme, millisel Sassi-faili real meil viga on. Näidetes kasutan väljundstiili laiendatud selguse huvides.

Sul peab olema järgides struktuuri projekt sinus failisüsteem:

  • minuprojekt/
    • css/
      • levinud.css
    • sass/
      • ühine.sass
    • node_modules/
    • gulpfile.js
    • package.json

Alustame Gulpfile'i täitmist käsuga ahmima projekti kausta terminalis.

Siin võtame kõik Sassi failid kataloogist sass/ oma projekti ja laadige valmis CSS-tulemus kausta üles css/. Lisaks teeme siin vaatluse vaata muudatuste jaoks Sassi failides ja automaatseks kompileerimiseks CSS-i, kui sellised muudatused toimuvad. Saadud css-fail sisaldub paigutuses.

Kui te ei saa millestki Gulpi pakettide seadistamisest aru selles näites, lugege Gulpi kasutusjuhendit.

Pärast meie keskkonna konfigureerimist ja Sassi edukat CSS-i teisendamist *.sass-failide salvestamisel kataloogi sass/, võite julgelt edasi õppida ja praktikas läbi viia näiteid, mida täna analüüsime.

Sassi süntaks

Sassi kirjutamiseks on 2 varianti, 2 süntaksit: SASS ja SCSS. Enamik vana versioon Sass kirjutamine on taande süntaks. Seda õigekirja me oma tunnis kasutame. Selle süntaksi faililaiend on *.sass. Teine võimalus on süntaks, laienemas CSS-i süntaks , Sassy CSS. SCSS on kirjutatud nagu tavaline CSS, kuid seda on täiustatud Sassi lisafunktsioonidega. SCSS-i süntaksiga faililaiend - *.scss.

Väga tähtis! Treppide süntaks nõuab pesastatud atribuutide taande väga ranget järgimist ja kui teil esineb Gulpi käitamisel vigu või konsoolis rida määramata kaudseid vigu, on tõenäoliselt viga valedes taandes. Veel üks oluline detail – kui kasutad taandena tabeldusmärke, siis kompilaator annab Sassi teisendamisel välja vea, mis lisaks tabeldustele kasutab taandena ka tühikuid. Kas kasutate ainult tabeldusmärke või ainult tühikuid.

SASS ja SCSS süntaks:

SASS – taande süntaks SCSS – laiendi süntaks
$font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color $font-stack: Helvetica, sans-serif; $põhivärv: #333; body ( font: 100% $font-stack; värv: $primary-color; )

Lisaks põhilistele kirjutamisreeglitele (lokkis sulud, semikoolonid ridade lõpus) ​​erinevad SASS ja SCSS ka mõne funktsiooni kirjutamise poolest. Nii et olge Interneti-näidete kasutamisel ettevaatlik, kontrollige täpselt, millist süntaksit kasutatakse. Kui üsna suur näide Internetist on tehtud SCSS-stiilis ja teie projekt on kirjutatud SASS-is, saate selle oma põhifaili importida ilma süntaksit ja faililaiendit muutmata, kasutades direktiivi @import, näiteks kui laadisite alla faili karussell.scss, siis saate selle oma seadmega ühendada peamine.sass rida @import "karussell". Võite teha ka vastupidise olukorra, kui peate importima *.sass-failid main.scss-faili. Meie Githubi näites impordime kõik _x.x.sass failid üheks ühine.sass, kus x.x on selle artikli näite pealkirja number.

Kasutame taande süntaksit.

1. CSS-i laiendamine Sassiga

1.1 Investeerimisreeglid

Sass annab arendajatele suurepärase võimaluse pesastada CSS-i reegleid teistesse, vähendades sellega pikkade selektorite kirjutamisele/kopeerimisele kuluvat aega ja muutes koodi struktureeritumaks ja selge hierarhiaga.

1.2 Vanemvalijaga sidumine

Kui soovite valijat laiendada ilma uut reeglit loomata, saate valmis valijaga siduda täiendavaid selektoreid märgi abil & . Väliselt näeb see välja nagu olend lapse valija hierarhias, kuid kasutades & , laiendame vanemavalijat, mitte ei loo alamvalijat.

Pöörake tähelepanu reeglile body.firefox &, mis võimaldab meil saada uue ahela mis tahes elemendist enne praegust, kui see on määratud lõpus & .

Lisaks saab lähteseotust kasutada ühendi selektorite loomiseks:

1.3 Pesastatud omadused

Mugavuse huvides saate jagada atribuudi nimeruumi järelliite manusteks. Näiteks, marginaal-ülemine, marginaal- alumine marginaal- vasakule, marginaal- õige on ühisosa marginaal ja saab jagada manusteks järgmiselt:

1.4 Metamärkide valijad

Mõnikord tekib olukord, kui mitu elementi lehel kasutavad sama CSS-i baasi, sama atribuutide komplekti, mis on ainult neile omased. Neid CSS-i põhireegleid saab pakkida metamärgivalijana, mida saab kasutada Sassi mitmes kohas. Metamärkide valijad tuletatakse direktiivi abil @pikendama.

2. SassScript

SassScript võimaldab teil oluliselt laiendada Sassi võimalusi kohandatud muutujate, aritmeetika ja muude funktsioonide kasutamise kaudu. SassScripti saab kasutada automaatne genereerimine uued valijad ja omadused.

2.1 Muutujad Sassis

See on väga lahe funktsioon, et saate määratleda muutujaid, mida saab kasutada kõikjal teie Sassi failis. Värvid, vaikeväärtused, ühikud, seda kõike saab muutujaks võtta ja edaspidi kasutada. Muutuja defineeritakse järgmiselt: $nimi: väärtus.

2.2 Tehted numbrite ja stringidega + interpolatsioon

Sass annab teile võimaluse kasutada arvude puhul standardseid aritmeetilisi tehteid, nagu liitmine (+), lahutamine (-), jagamine (/) ja moodul (%). Võrdlusoperaatorid (<, >, <=, >=, ==, !=) toetatakse ka numbrite puhul.

Lisaks on Sassil võimalus stringe aheldada (ühendada).

Nagu näitest näeme $summa: 10 + 20/2, järgitakse aritmeetiliste toimingute tegemisel prioriteeti – esimene jagamine, seejärel liitmine. Toimingute järjekorra määramiseks võite kasutada sulgusid, nagu matemaatikas. Pange tähele, et lisamisel 12 pikslit + 8 pikslit, me saame 20 pikslit.

Pöörake tähelepanu ka ridadele 2 ja 9, siin kasutame interpolatsiooni, et paigutada dünaamilised väärtused Sassi failis suvalisse kohta, sealhulgas kohta, kus meil on atribuudi nimi, valija nimi või mis tahes real. .

Interpolatsioon- see on uue väärtuse saamine teiste abil.

Sassi interpolatsiooni kõige levinum kasutusala on muutujale uue väärtuse saamine, "integreerides" selle konstruktsiooni kaudu teise muutuja väärtusesse. #{} , Näiteks:

Te ei saa lihtsalt muutujat stringi sisestada ilma interpolatsiooni kasutamata, nagu saate teha näiteks PHP-s topeltjutumärgid. Kasutage kindlasti muutujate interpoleerimist.

2.3 Toimingud lilledega

Sassi värve saab liita, lahutada, jagada ja korrutada. Kõik aritmeetilised toimingud tehakse iga värviga eraldi: punane, roheline ja sinine.


Pange tähele, et rgba värvide lisamisel ei tohi viimane 0,75 läbipaistmatuse parameeter erineda avaldise teistest, vastasel juhul lisamine ebaõnnestub. Selle asemel saate rgba alfa-kanalit reguleerida kasutades läbipaistmatuks muuta Ja läbipaistvaks muutma või reguleerida HEX-värvi läbipaistmatust funktsiooni rgba abil.

3. Direktiivid ja eeskirjad

3.1 @import

Saate importida oma Sassi faili sass, scss Ja css failid, kasutades käskkirja @import, samas kui kõik miksinid ja muutujad töötavad põhifailis, kuhu import toimub.

@import töötab nagu tavaline CSS @import, kui:

  • faili teel http://;
  • faili kutsutakse via url();
  • või import sisaldab meediumiparameetreid.

Teise faili täielikuks Sassi põhifaili importimiseks peab faililaiend olema *.sass, *.scss või *.css.

Vaatame mõnda näidet.

Imporditakse järgmised failid ei tee:

Järgmised failid tahe imporditud:

Tähelepanu! Uutes versioonides gulp-sass CSS-failide importimiseks Sassi peate määrama .css-laiendi

Võimalik on importida mitu komadega eraldatud faili: @import "päis", "meedium".

Nimetatakse failid, mis algavad alakriipsuga killud ja ei nõua importimisel allkriipsude ega laienduste määramist. Näiteks fail _header.sass saab importida järgmiselt: @import "päis".

Pange tähele, et import toimub kohas, kus määrate direktiivi @import. Sellest lähtuvalt on võimalik pesastatud importi teha kohas, kus see on vajalik:
#main @import "näide"

3.2 @at-root

direktiiv @at-root tõstab selles sisalduvad reeglid juure, tühistades ahela vanemast. Siin on kõik lihtne:

Me ei vaadanud kõiki Sassis olevaid direktiive, vaid ainult praktikas enim kasutatavaid. Kui soovite Sassi direktiividesse sügavamale sukelduda, vaadake dokumentatsiooni.

4. Väljendid

Sass toetab avaldiste ja funktsioonide kasutamist erinevaid tingimusi, tsüklirakendused jne.

4.1 @if() direktiiv

direktiiv @if() lubab SassScripti teatud tingimustel käivitada ja sellel on järgmine süntaks:

4.2 @direktiivi jaoks

@for kuvab teatud arv kordi stiilidega plokki. Saate seadistada loenduri muutuja käitusajal.

Saate täpsustada läbi selle asemel, kui peate minema 1-lt 11-ni (kaasa arvatud), mitte ainult 10-ni, nagu näites.

4.3 @iga direktiiv

Kui soovite korrata väärtuste loendit, mitte ainult numbreid, võite kasutada direktiivi @iga:

4.4 @while direktiiv

@samas silmused läbi stiiliplokkide, kui väljend on tõsi.

5. Segud

Hagfish- Sassi koodiplokid (või mallimikserid), mis võivad võtta argumente (valikuline) ja võivad oluliselt laiendada kirjutamisstiilide võimalusi ning vähendada sarnaste reeglite ja isegi tervete CSS-plokkide rakendamisele kuluvat aega. See on midagi funktsiooni sarnast, mis võib võtta argumente, teha tohutult tööd ja anda tulemuse sõltuvalt sisendparameetrist.

Segamine on deklareeritud direktiiviga @mixin, pärast kuulutamist tuleb see ära näidata Nimi hakkkala. Kutsutakse mixin direktiivi järgi @kaasa, mis võtab mixini nime ja edastatud argumendid, kui neid on.

Sõbrad, oleme vaadanud Sassi põhifunktsioone, millest piisab viljakaks tööks CSS-i veebisaitide stiilidega. Mõned direktiivid ja funktsioonid ei ole lisatud see juhend, kuid kui olete huvitatud Sassi kõigi funktsioonide tundmaõppimisest, on see kasulik.

Vastan kohe küsimusele - kuidas valmis veebisaidil Sassi stiilidega töötada, kas tõesti on vaja valmis CSS-i redigeerida ja FTP kaudu üles laadida? Ei, sa ei saa seda teha. Teil peaks olema oma Sassi stiilide või isegi kogu saidi kohalik koopia ja pärast töö lõpetamist juurutama (üleslaadima) FTP kaudu valmis stiilid. Selleks saate kasutada Gulpi paketti vinüül-ftp. Või seadistage oma serveris Sassi keskkond FTP/sFTP kaudu üles laaditud failide kompileerimiseks.

See on tänaseks kõik. Täname tähelepanu eest!

Mis on Sass, miks seda vaja on, selle võimalused, paigaldus ja kuidas seda oma projektides kasutada

Mis on Sass

Sass(Syntactically Awesome Stylesheets) on üks arenenumaid, stabiilsemaid ja funktsioonirikkamaid eelprotsessoreid. See on arendajate seas väga populaarne. Sass on rohkem edasijõudnud CSS-i versioon, millel on palju rohkem funktsioone ja Sass on mõeldud lihtsustamine kaskaadstiililehed.

Sassi süntaksil on kahte tüüpi: SASS Ja SCSS. SCSS sarnaneb rohkem CSS-iga, samas kui SASS erineb selle puudumisel lokkis traksid. Pesastatud elemendid rakendatakse taande abil. See on süntaks, mida me siin kasutame.

Miks sa Sassi vajad?

Et mõista, miks Sassi vaja on, loetleme mõned neist: võimalusi:

  1. Sass lubab pesitseda CSS-i reeglidüksteise sisse
  2. Kinnisvara pesitsemine
  3. Muutujate kasutamine
  4. Aritmeetiline tugi
  5. Operatsioonid lilledega
  6. Võimalus importida sass-faili sass, scss Ja css failid
  7. Mixiinide kasutamine
  8. Ja palju muud

Lühidalt, miks sa Sassi vajad: see kiirendab Ja lihtsustab arendusprotsess.

Kuidas Sassi kasutada

Olemas erinevatel viisidel alusta Sassi kasutamist:

  1. Rakenduste kasutamine (Koala, CodeKit, Compass ja teised)
  2. Kasutades käsurida
  3. Tegumihaldurite kasutamine
  4. Teisendage Sass võrguteenuste abil hõlpsalt CSS-iks

Kaaluge kasutamist Sass tegumihalduri jaoks Gulp. Enne installimise alustamist on soovitatav tutvuda Gulpi põhitõdedega.

Gulp-sassi paigaldamine ja ühendamine

Plugina installimiseks gulp-sass meie projekti jaoks avage projekti kaustas käsurida. Sisestame järgmise käsu:

npm i gulp - sass -- salvesta - dev

Plugin installitakse kausta node_modules ja vastav kirje lisatakse faili package.json. Pärast edukat installimist vajame ühendada meie pakett failis gulpfile.js.

var gulp = nõuda("gulp"); sass = nõuda("gulp-sass");

Nüüd loome ülesande sass.

ahmima. ülesanne ("sass" , funktsioon ()( return gulp . src ( "app/sass/main.sass") pipe ( sass (). on ( "error" , sass . logError )) . pipe ( gulp . dest () "rakendus/css" )); ));

gulp.src- Mida me töötlemiseks võtame?

.pipe(sass())- Teisendage Sass CSS-iks

sass()- sulgudes saate täpsustada lisaseaded kuva CSS väljapääsu juures.
Näiteks sass((outputStyle: " laiendatud")) - täielikult laiendatud CSS.
Muud tähendused: pesastatud(vaikimisi), kompaktne- iga valija sisse lülitatud erinev rida, kokkusurutud- kõik ühes reas.

Kui me äkki teeme vea, saame kuvada selle asukoha ekraanile teate. Selleks lisame .on("viga", sass.logError).

Täidame oma loodud ülesande gulp-sass. Sisestame käsureale ahmima sass.

Gulp teisendas SASS-i automaatselt CSS-iks ja lõi faili main.css.

Kui peate valima mitte ühe faili, vaid mitu, saate valida kõik failid korraga. Selleks muudame veidi rida, kus valime teisendamiseks sass-failid:

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

sass/**/*.sass- tähendab kõigi failide valimist (laiendiga .sass) kõigis sass kausta kaustades.

Kokku võtma:ühendas pistikprogrammi gulp-sass, lõi ülesande sass ja lisatud veaväljund (kui see esineb). Nüüd saate teha vaikeülesannet. Need. käsklusega käivitatakse meie maksujooks-sass ahmima.

ahmima. ülesanne("default" , ["sass" ]);

Saame järgmise gulpfile.js

var gulp = nõuda("gulp"); var sass = nõuda("gulp-sass"); ahmima. ülesanne ("sass" , funktsioon ()( return gulp . src ( "app/sass/**/*.sass") . pipe ( sass (). on ( "viga" , sass . logError )) . pipe ( gulp . dest ("app/css")) )); ahmima. ülesanne("default" , ["sass" ]);

Vaatame näidete abil mõnda Sassi funktsiooni.

Neid on tohutult palju, vaatleme ainult kõige populaarsemaid. KOOS täielik nimekiri leiate ametlikult veebisaidilt.

Reeglite pesastamine

Kinnisvara pesitsemine

$muutujate kasutamine

Aritmeetilised tehted numbritega

Aritmeetilised tehted värvidega

Sass lubab css reeglid, peavad olema üksteise sees. Sisemine reegel kehtib ainult välimise reegli valijas. Seda ei saa teisiti tõlkida, fraas on nutikas, kuid tegelikult on kõik lihtsam, vaadake lihtsalt näidet:

Scss-fail

#peamine p (

värv : #00ff00 ;

laius: 97%;

Redbox (

taustavärv : #ff0000 ;

värv : #000 ;

Koostatud CSS

1 2 3 4 5 6 7 8

#peamine p (

värv : #00ff00 ;

laius: 97%;

#main p .redbox (

taustavärv : #ff0000 ;

värv : #000 ;

See aitab vältida vanemvalija kordamist ja muudab rühma palju paremini mõistetavaks css kihid suure hulga pesastatud valijatega. Näiteks:

Scss-fail

10 11 12

#main (

laius: 97%;

p , div (

fondi suurus: 2 em;

fondi kaal: paks;

pre(

fondi suurus: 3em;

Koostatud CSS

11 12 13 14

#main (

laius: 97%;

#peamine p ,

#main div (

fondi suurus: 2 em;

#peamine p a ,

#main div a (

fondi kaal: paks;

#main pre (

fondi suurus: 3em;

Viide valijate vanemale (&)

Pole selge, miks Sassi arendajad seda nii nimetasid. Üldiselt võib seda lihtsamalt öeldes nimetada viitamiseks iseendale. Kui ma ei eksi, siis less’i dokumentatsioon seda nii nimetab (tuletan meelde, et less võttis palju asju sassist ja see laenas ka selle kujunduse). Tõenäoliselt küsivad paljud, mille jaoks see on? Alustame sellest, et ilma selle konstruktsioonita poleks võimalik ühtki pseudoklassi rakendada. Või veel üks näide, peame pakkuma muid elemendistiile, olenevalt sellest, millisel klassil on keha html dokumenti. Toon teile näite ametlikust dokumentatsioonist.

Scss-fail

1 2 3 4 5 6 7 8 9 10

fondi kaal: paks;

tekst-kaunistus: puudub;

&:hõljuma (

tekst-kaunistus: allajoonimine;

keha .firefox & (

fondi kaal: tavaline;

Koostatud CSS

1 2 3 4 5 6 7 8 9 10

fondi kaal: paks;

tekst-kaunistus: puudub;

a :hover (

tekst-kaunistus: allajoonimine;

keha .firefox a (

fondi kaal: tavaline;

Arvan, et pseudoklassidega on kõik selge. Vaatame joont lähemalt body.firefox &. Mis siin toimub? Kui mõne elemendi taha ilmub link iseendale (siin võib see olla nagu üksik html element, ja klass, id, pole absoluutselt oluline), siis annab see kompilaatorile teada, et see paigutus tühistab elementide standardse pesastamise. Kompilaator eemaldab sellise elemendi standardne voog. Kui vaadata ülaltoodud näidet, võib tekkida tunne, et kompileeritakse css, milles see on keha.firefox a, kuid mitte. Viide iseendale järgneb elemendile koos klassiga, nii et kompilaator genereerib keha.firefox a(elementide standardne pesastamine on tühistatud). See on üsna põhimõtteline asi ja seda tuleb mõista. Algajad, kes on äsja mõnele eelprotsessorile üle läinud, ei saa päris hästi aru, kuidas enesele viitamine töötab, ja kirjutavad sageli koodi, mis ei tööta. Peate seda lihtsalt meeles pidama.

Scss-fail

1 2 3 4 5 6 7 8 9

#main (

värv: must;

fondi kaal: paks;

&:hõljuma (

värv: punane;

Koostatud CSS

1 2 3 4 5 6 7 8 9

#main (

värvus: must

#main a (

fondi kaal: paks;

#main a:hover (

värv: punane;

Ülaltoodud näites näete, et viide iseendale &:hõljuma investeerinud #peamine ja investeerinud a, see seisab üksi, selle ees pole elemente, nii et standardne pesastamine töötab ja kompilaator genereerib #main a:hover.

Maailm elas erinevatel aegadel tehnilised revolutsioonid. See juhtus spurtidena. Jämedalt öeldes, pronks ja bam, saabus rauaaeg. Praegu me ei tea, kes leiutas ratta või adra, kuid tol ajal olid need avastused oma olemuselt revolutsioonilised ja muutsid nii üksikisikute kui ka kogu inimkonna elusid. Veebielus või täpsemalt küljenduskujundajate elus oli kolm uuendust, mis muutsid nende elu ja muutsid seda radikaalselt. Esimene neist on loomulikult kaskaadlaaditabelid, kuid see oli veebi algusaegadel. Teine on jquery, nüüd on DOM-mudeli kaudu reisimine muutunud lihtsaks ja mugavaks, pluss erinevad efektid. Ja kolmandaks, see on juba rohkem moodsad ajad, see on BEM. Nõustuge kirjutama üks kord midagi lahedat ja seejärel kasutama seda probleemideta erinevates projektides. Selles aitab teid järgmine Sassi keelekonstruktsioon.

Scss-fail

1 2 3 4 5 6

#main (

värv: must;

&- külgriba (

ääris: 1px ühtlane punane;

Koostatud CSS

1 2 3 4 5 6

#main (

värv: must;

#main-sidebar (

ääris: 1px ühtlane punane;

Võtsin näite dokumentatsioonist. Päriselus see BEM-i järgi id-ik ei ole #peamine A .main, kuid olemus ei muutu. Ma annan teile ühe lihtsa

27.07.2017

See SASS-i õpetuste sari on mõeldud algajatele ja kogenud arendajatele. See on esimene neljaosalisest õpetusest, mis juhatab teid läbi eelprotsessori, installib selle ja õpib tundma selle mõningaid funktsioone.

Mis on SASS?

SASS (süntaktiliselt vinged stiililehed)- üks populaarsemaid. See on CSS-i funktsioonide komplekt, mis võimaldab teil kiiremini ja tõhusamalt kodeerida. SASS toetab integreerimist Firefox Firebugiga. SassScript võimaldab teil luua muutujaid, pesastatud stiile ja päritud valijaid.

SASS muudab kiireks ja lihtsaks kirjutada vähem (mõnikord oluliselt vähem) CSS-koodi ja hallata seda dünaamiliselt nagu programmeerimiskeelt (see pole muide programmeerimiskeel). See suurepärane tööriist funktsionaalsema ja puhtama CSS-i kirjutamiseks, mis võib kiirendada iga disaineri ja arendaja töövoogu.

Miks teil SASS-i vaja on?

Enamik esiotsa raamistikke, sealhulgas Bootstrap, Materialize ja Foundation, on loodud selle suurepärase eelprotsessoriga. SASS-i tundmine aitab teil kasutada nende raamistike rohkem funktsioone.

Kuidas SASS-i kasutada?

On palju rakendusi, mis muudavad SASS-i kasutamise lihtsaks ja kiireks: CodeKit, Compass, Koala jne. Nende kohta saate teada õpetuse teistes osades. Selles peatükis ei kasuta me muid rakendusi ega tööriistu peale nende, mis on vajalikud SASS-i arvutis käitamiseks. Te ei pea muretsema operatsioonisüsteemi pärast, sest kõik on kõigile kasutajatele selge.

Laadige alla ja installige SASS

SASS-i saate installida ainult masinasse, kuhu Ruby on juba installitud:

  • Ruby on Maci eelinstallitud, nii et saate Sass Macintoshi kohe installida;
  • Kui kasutate Windowsi, peate esmalt alla laadima Ruby;
  • Ruby Linuxis saab alla laadida apt paketihalduri, rbenv või rvm kaudu.

Kui Ruby on installitud, saate oma arvutisse installida SASS-i. Avame Ruby käsurea ja installime teie süsteemi SASS:

Gem install sass

Kui ülaltoodud käsk ei tööta, peate võib-olla kasutama käsku sudo:

Sudo gem install sass

Kui soovite kontrollida SASS-i versiooni, kasutage järgmist käsku:

SASS on installitud. Loome projektikausta ja nimetame seda sass-basicuks. Loo põhiline html faili järgmise koodiga:

Minu esimene SASS-projekt

Minu esimene SASS-projekt

Tere sõber, ma õpin SASS-i ja see on tõesti suurepärane.



Keha(teksti joondamine: keskel; ) h1( värv: #333; ) p(värv: #666; )

Nüüd peate selle faili käsurea/terminali abil kompileerima. Avame samas kataloogis käsuviiba (kui tavaline käsuviip ei tööta, peate võib-olla kasutama Ruby käsuviip). Sisestage järgmine ja vajutage sisestusklahvi:

Sass --watch style.scss:style.css

Märkate, et on loodud uued failid: style.css ja style.css.map. Väärib märkimist, et te ei pea puudutama kaardifaili, nagu ka .css-faili. Kui soovite muudatusi teha, saate seda teha saidi style.scss kaudu. Te ei pea seda protsessi kordama iga kord, kui muudate stiile. SASS-i kompileerimine töötab automaatselt, kui teete .scss-failis muudatusi.

Järgmises peatükis vaatleme SASS-i muutujaid ja seda, miks need on SASS-i (ja kõigi teiste CSS-i eeltöötlejate) kõige kasulikumad funktsioonid.

Artikli tõlge: Sassi absoluutne juhend algajatele.
Andrew Chalkley.

Mis on SASS?

SASS on lühend sõnadest Süntaktiliselt vinged stiililehed- metakeel sisse CSS-põhine, mille nime saab tõlkida kui "Suurepärase süntaksiga CSS", kujundas Hampton Catlin.

See on vahend moodustamisprotsessi lihtsustamiseks CSS-stiilid, mis lihtsustab oluliselt koodi arendamise ja hilisema hooldamise ülesannet.

Kas olete näiteks kunagi teatud otsustamatut klienti toitlustades pidanud läbima stiilifaili kogu sisu, et leida konkreetne HEX-värviväärtus ja asendada see mõne muuga? Või kasutage mitmeveerulise malli veeru laiuse arvutamiseks kalkulaatorirakendust, mida pole alati käepärast?

SASS-il on teie käsutuses tööriistad, mis vabastavad teid sellest rutiinist. Need sisaldavad muutujad, hakkkala, pesitsemine Ja valija pärand.

Põhimõtteliselt on SASS-kood sarnane CSS-iga, kuid põhiline eristav omadus See, mis on koheselt märgatav, on semikooloni puudumine pärast iga omadus-väärtuse paari ja lokkis trakside puudumine.

Võtame näiteks järgmise CSS-koodi osa:

#pilvelõhkuja_reklaam
{
kuva: plokk;
laius: 120 pikslit;
kõrgus: 600 pikslit;
}

#edetabel_reklaam
{
kuva: plokk;
laius: 728 pikslit;
kõrgus: 90 pikslit;
}

Mis on samaväärne selle SASS-iga:

#pilvelõhkuja_reklaam
kuva: plokk
laius: 120 pikslit
kõrgus: 600 pikslit

#edetabel_reklaam
kuva: plokk
laius: 728 pikslit
kõrgus: 90 pikslit

SASS kasutab koodifragmentide pesastumise tähistamiseks kahe tühiku vahet (järgmise rea alguses taane). ( *Viimases lõigus tõin selguse huvides need ruumid punase taustaga esile.)

Nüüd, kui meil on idee SASS-koodi loomisest, vaatame probleeme, mis selle nii muudavad suurepärane.

Muutujad.

SASS-is peate muutuja deklareerimiseks eelnema selle nimele dollari sümbol $. Ja kui teie muutuja nimi on näiteks punane , siis pärast koolonit saame näidata sellele vastava väärtuse:

SASS-il on sisseehitatud funktsioonid, nagu tumendamine ja heledamaks muutmine, mida saab kasutada seda tüüpi muutujate väärtuste muutmiseks.

Seega on järgmises näites lõikude fondivärv samuti punane, kuid tumedam kui h1 pealkirjades kasutatud värv:

$punane: #FF4848
$ fondi suurus: 12 pikslit
h1
värv: $ punane

lk
värv: tume ($ punane, 10%)

Muutujatega saate teha aritmeetilisi toiminguid, nagu liitmine ja lahutamine, kui kasutatavad väärtused on sama tüüpi. Kui soovisime näiteks rakendada tumedamat tooni, siis peame vaid koodis juba kasutatud muutujasse salvestatud värviväärtusest lahutama väikese kuueteistkümnendsüsteemi HEX-väärtuse, mis võrdub näiteks numbriga #101 . Sama kehtib ka juhul, kui on vaja muuta fondi suuruse väärtust, näiteks suurendada seda 10 piksli võrra; selleks lisame lihtsalt puuduvad pikslid:

p.liitmine_ja_lahutamine
värv: $punane - #101
fondi suurus: $ fondi suurus + 10 pikslit

Pesitsemine.

SASS-is on kahte tüüpi pesastamist.

Selektorite pesastamine.

See on esimene pesitsustüüp, mis on sarnane sellega, mida kasutatakse HTML-i struktureerimine kood:

$ fondi suurus: 12 pikslit

Kõlar
.nimi
font:
kaal: julge
suurus: $ fondi suurus + 10 pikslit
.positsioon
font:
suurus: $ fontsize

Kui vaatate saadud CSS-koodi, pole kõik kommentaarid vajalikud. Pesastades .name klassi .speaker klassi ( *samamoodi - kasutades kahte tühikut järgmise rea alguses) luuakse CSS-i valija .speaker.name. Sama kehtib ka järgmise klassi nime .position kohta, mis asub pärast esimese valija atribuudideklaratsiooni, mille tulemuseks on teise valija .speaker.position pesastumine:

Speaker.name(
fondi kaal: paks;
fondi suurus: 22 pikslit; )
.speaker.position (
fondi suurus: 12 pikslit; )

Kinnistute pesastamine.

Teist tüüpi pesastamine võimaldab atribuute struktureerida ühe prefiksiga (* font-family , font-size , font-weight või border-style , border-color , border-radius jne.):

$ fondi suurus: 12 pikslit

Kõlar
.nimi
font:
kaal: julge
suurus: $ fondi suurus + 10 pikslit
.positsioon
font:
suurus: $ fontsize

Ülaltoodud näites kasutame vanema, universaalse atribuudi fondi deklaratsiooni: ja seejärel märgime uuele reale pärast kahetühikulist taanet atribuudi teise osa, mis tavaliselt asub sidekriipsu järel.

See tähendab, et kui me määrame fondi: omadus, sees järgmine rida kahe tühiku järel kaal: omadus, siis on tulemus samaväärne tuttava font-weight atribuudiga.

Speaker.name(
fondi kaal: paks;
fondi suurus: 22 pikslit; )
.speaker.position (
fondi suurus: 12 pikslit; )

Moodul toetab kõiki sidekriipsu sisaldavaid omadusi.

Selline pesastamine on suurepärane viis CSS-koodi korraldamiseks ja struktureerimiseks ning tarbetu korduse vältimiseks. ( *KUIV- "Ära korda ennast" - "Ära korda ennast." Olukorrad, mil CSS-i vormindamine teatud elemente korratakse ja/või muudetakse mujal nende stiile, mistõttu on koodi raske lugeda ja hooldada).

Hagfish.

Teine SASSi suurepärane omadus on hakkkala.

Mixinid võimaldavad teil terveid SASS-koodi tükke uuesti kasutada ja vajadusel neile isegi argumente edastada. Ja mis kõige tähtsam, saate määrata ka nende algsed väärtused.

Miksini määratlemiseks kasutage midagi SASS-is spetsiaalselt reserveeritud märksõna@mixin , millele järgneb teie valitud mixini nimi. Kui on vaja argumente, siis loetlege need sulgudes. Argumendi vaikeväärtused määratakse mixini määratlemisel, eraldatuna kooloniga. ( *Teisisõnu, miksinid on CSS-i funktsioonid.)

Miksinide kasutamise protseduur on väga lihtne - pärast @include märksõna määra soovitud mixini nimi ja loetle sulgudes vajalikud parameetrid, kui neid on.

Heitke pilk järgmisele näitele.

@mixin border-radius($amount: 5px) /* defineeri mixin */
-moz-border-radius: $summa
-webkit-border-radius: $ summa
piiriraadius: $summa

h1 /* kasutage mixini */
@include border-radius (2px)

Kõlar
@include border-radius

See SASS teisendatakse pärast koostamist allolevaks CSS-koodiks:

h1 (
-moz-border-radius: 2px;
-veebikomplekti piiri raadius: 2 pikslit;
piiri raadius: 2x; )

Kõlar (
-moz-border-radius: 5px;
-veebikomplekti piiri raadius: 5 pikslit;
piiri raadius: 5 pikslit; )

H1 päise jaoks määrasime selgesõnaliselt piirinurga raadiuse väärtuse, kuid elemendi klassi nimega .speaker puhul me seda ei teinud, seega võeti vaikeväärtuseks 5px.

Selektori pärand.

Teine suurepärane SASS-i süntaksi omadus on selektorite võime pärida kõiki teiste valijate jaoks määratletud stiile. Selle funktsiooni kasutamiseks peate kasutama märksõna @extend, millele järgneb valija, mille atribuute soovite pärida:

h1
ääris: 4 pikslit tahke #ff9aa9

Kõlar
@extend h1
äärise laius: 2 pikslit

Milleks koostatakse:

h1,.speaker (
ääris: 4px tahke #ff9aa9; )

Kõlar (
äärise laius: 2 pikslit; )

(*Pange tähele, et piiri deklaratsioon: 4px solid #ff9aa9; ei korrata reeglis .speaker valijaga, vaid selle asemel lisatakse esimesele reeglile teine ​​valija. Teisisõnu pole koodi dubleerimist.)

Proovige SASS-i tegevuses.

Internetis.

Saate kogeda SASS-i võrgus ilma moodulit esmalt kohalikku arvutisse installimata.

Kuid enne katsetamise alustamist valige lehe allosas suvand "Taani süntaks".

Installitud arvutisse.

SASS ise on Ruby platvormi rakendus (pärl). Seetõttu ei saa te selle installimiseks hakkama ilma platvormi enda ja selle programmeerimiskeele RubyGemsi paketihalduri installimata. Pärast platvormi enda ja halduri edukat installimist käivitage konsoolis järgmine käsk:

gem install sass

SASS-moodulit saab kasutada tööriistana SASS-failide teisendamiseks käsurearežiimis CSS-vormingus failideks.

Seda saab teha näiteks järgmise käsu sisestamisega:

sass --vaadake sass_folder:stiililehtede_kaust

Kus sass_kaust on SASS-faile (st laiendiga .sass) sisaldava kausta tee ja stylesheets_folder on tee kaustani, kuhu saadud CSS-failid pärast kompileerimist salvestatakse. Käsk --watch ütleb moodulile, et see peaks jälgima määratud kaustas muudatusi ja kui neid on, siis pärast nende salvestamist teisendama algsed .sass-failid samaväärseteks .css-failideks.

CSS-i vastupidine teisendamine SASS-iks.

Saate alustada SASS-i kasutamist, teisendades oma olemasolevates projektides kasutatud stiilid sellesse vormingusse, kasutades utiliiti "sass-convert".

Selleks sisestage käsureale tee kausta, mille sisu tuleb teisendada ( *see tähendab, et minge lihtsalt soovitud kataloogi, kus need asuvad lähtefailid ). Seejärel käivitage ülalmainitud utiliit ja määrake sellele järgmised parameetrid:

sass-convert -- alates css --to sass -R.

Kus lipp -R määrab toimingu sooritamise rekursiivse viisi. Ja järgmine punkt pärast seda. tähendab, et saadud .sass-failid salvestatakse praegusesse kataloogi. ( *Vajadusel saab punkti asemel määrata tee kausta, kuhu soovite tekkinud failid salvestada.)



SEOTUD ARTIKLID