Kuidas Sassiga alustada

Sass on võimas tööriist, mis toob CSS-i palju funktsioone teistest programmeerimiskeeltest - näiteks funktsioonid, muutujad ja tsüklid - ning toob oma intuitiivsed funktsioonid, näiteks miksid, pesad ja osalised, et nimetada vaid mõnda.

Selles õpetuses loome sotsiaalseid ikoone, kasutades Sassi tsükleid, miksiine ja funktsioone. Kasutame ka Sassis saadaval olevat võimsat pesitsemist.

Loome Sassis loendi, et luua meie sotsiaalseid ikoone, mis koosnevad kõigepealt klassi nimest, fondiviidust ja värvist - ja hiljem tööriistavihjest.

Ja korduskasutatavate meediumipäringute loomiseks kasutame miksiine ja loome funktsiooni piksliväärtuse muutmiseks em-väärtuseks. Selleks loome ka muutuja oma fondi põhisuuruse jaoks.

Sassi installimiseks ja kasutamiseks on mitmeid viise sõltuvalt teie süsteemist ja teie ehitustööriistade vajadustest - leiate lisateavet siin - siiski kasutame CodePeni abil oma Sassi CSS-i koostamiseks, et asjad oleksid võimalikult lihtsad.

Selleks, et Sassi võimu tõeliselt rakendada ja mitte sattuda spetsiifilisuse ja keerukuse segadusse, on vaja kindlat arusaama CSS-ist. Kasutatav Sassi eriline maitse on SCSS (Sassy CSS), mis tähendab, et kasutame endiselt lokkisulgusid {} meie Sassi koodis.

Hankige õpetusfailid

Selle õpetuse näidisfailide allalaadimiseks minge aadressile FileSilo , valige õpetuse kõrval Vaba kraam ja Tasuta sisu. Märkus. Esmakordselt peavad kasutajad FileSilo kasutamiseks registreeruma.

01. Seadistage oma CodePen CSS

CodePen CSS-i õigesti seadistamine on võti

CodePen CSS-i õigesti seadistamine on võti

Esimene asi, mida peame tegema, on looge uus pliiats ja muutke mõnda CSS-redaktori vaikesätet CodePenis. Muudame CSS-i eeltöötleja SCSS-i ja lülitame sisse Normalize ja Autoprefixer.

02. Alustage koodi kirjutamist

Nüüd oleme kõik seadistanud ja saame hakata koodi kirjutama. HTML-redaktori sees loome konteineri ja arvukaid elemente, mis sisaldavad linki ja ikooni iga meie ikooni jaoks.

Siin kasutatud nimesid kasutatakse meie Sassi loendis viitena CSS-is. Samuti kasutame oma klasside nimede jaoks BEM-i nimetamiskorda.

...

03. Määrake põhistiilid

CSS-i redaktorisse üleminekuks lisame kõigepealt font-awesome, määrame muutuja meie fondi põhisuurusele ja mõned põhilised stiilid lehele.

@import url(http://srt.lt/w8yT8); // Variables $base-font-size: 16px; // Basic Styling body { font-size: $base-font-size; ... }

04. Looge põhifunktsioon

Järgmisena loome põhifunktsiooni, et muuta piksli väärtus em väärtuseks, kasutades meie muutujat $ base-font-size.

Funktsioonid Sassis luuakse kasutades funktsiooni @function, millele järgneb funktsiooni nimi ja funktsiooni täitmiseks kasutatud sisend.

Seejärel kasutame deklaratsiooni sees väärtuse väljastamiseks funktsiooni '@return'. Selleks kasutatakse arvutust ümbritsevat „# {}” interpoleerimine .

// Functions @function px-to-em($pixels) { @return #{$pixels/$base-font-size}em; }

05. Tehke miksreid

Jätkates seadistamist, loome lihtsate mobiilseadmetega seotud meediumipäringute jaoks segmendid, kasutades meie funktsiooni 'px-to-em', mille edastame px väärtuses, et tagastada em väärtus.

Segud luuakse kasutades '@mixin', millele järgneb miksini nimi. Seejärel kasutame deklaratsiooni sees koodi @ @, et väljastada kood, mille panime mikserisse, kui kutsume seda hiljem oma koodibaasi.

@mixin viewport--large { @media only screen and (min-width: px-to-em(1680px)) { @content; } } @mixin viewport--medium { @media only screen and (min-width: px-to-em(1080px)) { @content; } }

06. Pange üles Sassi nimekiri

Meie seadistamise viimane samm on loendi loomine. Sassis olevad loendid luuakse muutuja abil; pärast seda on täpne süntaks üsna lõtv, aktsepteerides paljusid erinevaid selle määratlemise viise .

Muutuja sees määrame iga ikooni jaoks klassi nime, unicode'i väärtuse ja värvi, eraldades need komadega sulgudes.

$icon-list: ( vimeo “f27d' #1ab7ea, twitter “f099' #1da1f2, ... github “f113' #333, rss “f09e' #f26522 );

07. Kuvage oma ikoonid järjest

Meie sotsiaalsete ikoonide rea kuvamiseks lisame igasse konteinerisse mõne lihtsa CSS-i.

.social__item { display: inline-block; margin-right: 0.05em; }

08. Looge jagatud ikoonistiil

Väljuva CSS-i hulga minimeerimiseks kasutame CSS3 valijat, et leida kõik 'ikooniga' algavad klassid ja luua neile jagatud stiil.

[class^='icon'] { font-family: 'FontAwesome'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

09. Nupu taustade kujundamine

Sama meetodit kasutades teeme samamoodi nuppude jaoks, mis määravad väärtused 'em' -is, võimaldades meil hiljem konteineri abil nende suurust muuta.

[class^='social__icon'] { font-size: 1em; width: 2em; height: 2em; background-color: #333; color: white; text-decoration: none; border-radius: 100%; text-align: center; display: flex; align-items: center; justify-content: center; }

10. @ iga silmus meie ikoonide jaoks

Oleme oma sotsiaalse ikooni ikoonide loomiseks kasutanud oma tsüklit

Oleme oma sotsiaalse ikooni ikoonide loomiseks kasutanud oma tsüklit

Nüüd on meil olemas kõik põhistiilid, mida saame kasutada oma loendi abil, et luua igale ikoonile omane CSS.

Sassi loomiseks kasutame silti „@each”, millele järgnevad nimed iga üksuse iga väärtuse jaoks - „$ icon”, „$ unicode” ja „$ icon-background” - millele järgneb sõna “in” ja siis nimi nimekirja.

Silmuse sees rakendame väärtust '$ unicode' iga HTML-is loodud ikooni pseudoelemendile 'before', võimaldades varem loodud jagatud stiilil hoolitseda kõigi muude vajalike stiilide eest.

@each $icon, $unicode, $icon-background in $icon-list { .icon--#{$icon} { &::before { content: $unicode; } } }

11. @ iga silmus meie taustavärvide jaoks

Oleme oma taustale lisanud nii taustavärvid kui ka ikoonid

Oleme lisanud oma taustale „@each” nii taustavärvid kui ka ikoonid

Ikoonid töötavad nüüd, kuid meil on endiselt tagavaravärv. Selle parandamiseks lisame loendisse veel mõne koodi. Kasutades ülaltoodud meetodit, väljastame nime „$ icon”, kuid seekord klassides „social__icon” ja selle sees värvi „$ icon-background”.

@each $icon, $unicode, $icon-background in $icon-list { ... .social__icon--#{$icon} { background-color: $icon-background; } }

12. Kasutage miksreid

Kasutades meie segusid me

Meie mikside abil oleme värskendanud konteineri fondi suurust, et muuta ikoonide suurust sõltuvalt vaateava laiusest

Kasutades varem loodud miksiine ja kuna me kujundasime ikoone 'em' väärtuste abil, saame konteinerisse rakendada fondi suuruse ja suurendada seda, kasutades meie meediumipäringu miksi, kasutades '@include' ja segu nime, millele järgneb kood, mille me tahame lisada meediumipäringusse.

.social__container { font-size: 1em; @include viewport--medium { font-size: 1.5em; } @include viewport--large { font-size: 2em; } }

13. Lisage koostoime olekud ja sisseehitatud funktsioonid

Saame oma nuppudele lisada interaktiivsust, muutes taustavärvi, kui nupuga kas hiire või klaviatuuri abil suheldakse.

Sassil on mitmeid sisseehitatud värvifunktsioonid võimaldades meil võtta taustloo, mille oleme loendis määranud, ja segada seda mustaga, et nupp tumeneks - kui nendega suhtleme.

icon--#{$icon} { background-color: $icon-background; &:hover, &:focus, &:active { background-color: mix(black, $icon-background, 15%); } }

14. Üleminek taustavärvile

Samuti võime taustavärvide erinevuste animeerimiseks kasutada CSS-is omadust 'üleminek'. Võiksime kasutada väärtust „kõik”, kuid see on nii jõudluse poolest kallis ega võimaldaks meil erinevaid väärtusi erinevatel ajastustel ja ajastamisfunktsioonidel üle viia.

[class^='social__icon'] { ... transition: background-color 150ms ease-in-out ; }

15. Lisage täiendavaid üleminekuefekte

Lisades nuppudele „suhtelise” positsioneerimise ja ülemise väärtuse ning lisades „ülemineku” omadusele „top”, saame elemendid edasiseks suhtlemiseks valmis olla.

[class^='social__icon'] { position: relative; top: 0; ... transition: background-color 150ms ease-in-out, top 250ms linear ; }

16. Lükake suhtlemisel nuppe ülespoole

Selle interaktsiooni jaoks pole selle loomiseks midagi konkreetset vaja, seetõttu võime koodi jagada jagatud klassi. Negatiivse tippväärtuse rakendamise ja kontuuri eemaldamise abil saame interaktsioonist veelgi selgema visuaalse märguande.

[class^='social__icon'] { ... &:hover, &:focus, &:active { outline: none; top: -0.25em; } }

17. Lisage tilk varju

Üleminekuomaduste abil oleme animeerinud igasuguse suhtluse nuppudega - nihutades neid ülespoole, tumendades tausta ja lisades varju

Üleminekuomaduste abil oleme animeerinud igasuguse suhtluse nuppudega - nihutades neid ülespoole, tumendades tausta ja lisades varju

Sama meetodit saame kasutada ka 'kasti-varju' loomiseks ja animeerimiseks - lisades suhtlusele veidi rohkem sügavust - muutes varju vertikaalset kõrgust samal ajal ülemise väärtusega.

box-shadow: 0 0 0.25em -0.25em rgba(0,0,0,0.2); &:hover, &:focus, &:active { ... box-shadow: 0 0.5em 0.25em -0.25em rgba(0,0,0,0.3); }

18. Lisage näpunäited

Saame hõlpsalt lisada CSS-iga tööriistavihjeid, et oma kasutajatele rohkem selgust anda. Esimese asjana lisame loendisse tööriistavihje väärtuse. Kirjutage need kindlasti jutumärkidesse, et vajaduse korral saaks kasutada tühikuid.

$icon-list: ( vimeo “Vimeo' “f27d' #1ab7ea, twitter “Twitter' “f099' #1da1f2, ... github “GitHub' “f113' #333, rss “RSS' “f09e' #f26522, );

19. Muutke silmust @each

Tänu meie loendi lisamisele peame muutma oma silti '@each', et kaasata tööriistavihje väärtus ('$ nimi'). Seejärel saame selle nime väljastada nuppude elemendi 'enne pseudo' sisuna.

@each $icon, $name, $unicode, $icon-background in $icon-list { ... .social__icon--#{$icon} { ... &::before { content: '#{$name}'; } } }

20. Stiilige enne pseudoelementi

Meie

Lisasime tööriistavihtidesse mõned põhistiilid, lisades üleminekud nende asukohaks muutmiseks

Nüüd on meil ekraanil kuvatud iga elemendi nimi, mida peame elemendi stiiliks lisama, lisama taustavärvi, polsterduse ja muud stiilielemendid - samuti elemendi positsioneerimise ja üleminekuteks ettevalmistamise ning läbipaistmatuse ja ülemise väärtuse muutmise interaktsiooni korral .

&::before { ... top: -3.5em; opacity: 0; transition: top 250ms linear, opacity 150ms linear 150ms; } &:hover, ... { ... &::before { opacity: 1; top: -2.5em; } }

21. Stiili järgi pseudoelement

Kasutame CSS kolmnurgad luua meie tööriistavihje alumine osa - asetades uuesti elemendi, valmistades seda ette üleminekuteks -, teisaldades läbipaistmatuse ja ülemise väärtuse erinevatel aegadel.

Viivituse lisamisega saame animatsiooni, mis koosneb tööriistavihje hääbumisest ja paigale liikumisest.

&::after { ... top: -1.9em; opacity: 0; transition: top 250ms linear, opacity 150ms linear 150ms; } &:hover, ... { ... &::after { opacity: 1; top: -0.9em; } }

Leiate juhendaja sammude CodePeni kogu siin .

See artikkel ilmus algselt ajakirja Web Designer väljaandes 264. Osta siit .

Loe rohkem: