Style A sivulla Sass

Voit tehdä paljon CSS: llä - ehkä enemmän kuin luulisi - mutta kunnioitettava tyylitietokieli on rajoituksia. Modernissa web-projektissa NPM-moduulit, JavaScript-kehykset, ES6 ja enemmän, se voi tuntea jonkin verran anakronistista pudota takaisin Vanilja CSS: n kirjoittamiseen.

Onneksi on olemassa vaihtoehtoja, joiden avulla voit käyttää muita CSS: iin kuuluvia kieliä. Esitetyt "esikäsittelijät", nämä työkalut integroivat Web Build -prosessiin ja tuottavat käyttökelpoisia arkkeja siitä, mitä valitsemaasi laajennuskieli.

SASS (Syntactically Awesome Style -levyt) on yksi suosituimmista vaihtoehdoista - Lue lisää oppaan Mikä on sass? SASS lisää monia arvokkaita uusia kieliominaisuuksia, jotka eivät ole (tällä hetkellä) saatavilla CSS: ssä, jotta sivustosi ja sovellukset voidaan ylläpitää. Näihin kuuluvat asiat, kuten sekoittimet ja ohjausdirektiivit, jotka ovat järkeviä pelottavia, mutta ovat todella melko suoraviivaisia, ja tarkastelemme näitä tässä opetusohjelmassa. Jos haluat pitää asiat vieläkin yksinkertaisemman, voit käyttäjä a Verkkosivuston rakentaja .

• Cool CSS-animaatiot uudelleen

Sassille on todella kaksi erilaista syntaksija, jotka käyttävät .SCSS-tiedoston laajennusta ja joka käyttää .sass. Entinen näyttää enemmän kuin CSS (itse asiassa kaikki .CSS-tiedostot ovat kelvollisia .SSS-tiedostot), kun taas jälkimmäinen poistaa CSS: n kannattimet ja puolipisteitä syvennyksen ja uudistuksen hyväksi. Keskitymme .ssioihin, mutta valinta on yksinkertaisesti alas henkilökohtaiseen mieltymykseen. Sivuston päivittäminen? Varmista, että sivujen ylläpito Palvelu tekee mitä tarvitset, ja saat pilvivarasto Oikea myös.

Lataa tämän opetusohjelman tiedostot täällä (numero 282)

01. Määritä kääntäjä

Sassin käyttö edellyttää pääasiassa kääntäjän. Yksinkertaisin tapa tehdä tämä olisi komentorivillä. Voit tehdä niin käyttää Homebrew. Sass-kääntäjä toteutetaan useilla eri kielillä, ja Homebrew asentaa DART-version, joka on nopea.

brew install sass/sass/sass

02. Luo SASS-tiedosto

Yritetään luoda yksinkertainen Sass tiedosto nähdä kääntäjän toiminnassa. Yksi Sassin yksinkertaisimmista käsitteistä on muuttujia, jotka voidaan määrittää kerran a $ Etuliite ja sitten käytetään koko koodin koko. Luomme Sass-Input.SCS .

 $ Text-Väri: #cccccc;
elin {
    Väri: $ Text-väri;
} 

03. Komentorivin kokoelma

Nyt voimme suorittaa Sass-kääntäjän komentoriviltä muuntaa .SSCS-tiedostomme CSS-lähtöön. Huomaat tulostustiedostossa, että muuttujat ovat poissa ja olemme juuri vasemmalle standardi CSS-syntaksi, jota selain käyttää.

 SASS SASS-INPUT.SSS CSS-OUTPUT.CSS 

04. Automaattisesti rakentaa

Tämä on hienoa, mutta et halua käyttää Sass-kääntäjää manuaalisesti aina, kun teet muutoksia. Yksi vaihtoehto on, että se kuuntelee tiedostojen muutoksia hakemistoon ja automaattisesti uudelleen ulostulo toiseen hakemistoon (Fileenamesin säilyttäminen). Tämä myös tehokkaasti voit erottaa lähteesi .SCSS-tiedoston rakennetuista CSS: stä.

 MKDIR SRC
mkdir src / sass
Mkdir julkinen
MKDIR julkiset / CSS
SASS --Watch SRC / SASS /: Julkinen / CSS /

05. Pelaa Sass-muotoilussa

Katsotaan nyt yksinkertaista käynnistyspaikkaa, jota voimme käyttää pelaamaan Sass-muotoilua. Voimme aloittaa kloonaamalla epätäydellistä esimerkkisivustoa. Tärkein asia huomata on, että HTML-sivu ei tunne mitään Sassista. Siinä on yksittäinen CSS-tiedoston syöttöpiste, jonka luomme seuraavaksi.

 CD Julkinen
curl -o-index.html https: // raaka.
githubusercontent.com/simon-a-j/sass-
TUTORIAL /
Master / julkinen / index.html 

06. Päätyydyt

Käytämme tyylikkäitä CSS-merkintäpisteemme, joka myöhemmin käytämme muiden moduulien tuonnissa. Tämä tarkoittaa sitä, että meidän on kerrottava Sass tämän tiedoston luomiseksi, joten meidän on myös luotava tyylit.SCSS-tiedosto SRC / SASS-kansioon. Jos olet käynnissä Sass --watch Kuten aiemmin, tämä kootaan automaattisesti CSS: ssä Julkinen / CSS Kansio ja sivuston virkistäminen näyttävät muutokset. Yritä tehdä joitain muutoksia ja virkistää HTML-sivua selaimessa, kun menet.

 // Styles.SCSS
elin {
  Fontti-perhe: Sans-Serif;
  Teksti-kohdistus: keskus;
}

07. Hallitse värijärjestelmää

Katsotaanpa miten Sass voi auttaa meitä hallitsemaan sivuston värijärjestelmää. On yleistä, että paletti on viisi tai kuusi väriä verkkosivulle. Voimme ulkoistaa nämä _colours.Scss . Underscore-etuliite kertoo, että se ei koota tätä uuteen HTML-tiedostoon ("osittainen"). Mutta voimme käyttää sitä hieman eri tavalla.

 // _colours.Scss
$ Color-ensisijainen: # 231651;
$ Color-Toissijainen: # 2374ab;
$ Color-Light: # D6FFF6;
$ Color-Highlight1: # 4DCCBD;
$ Color-Highlight2: # FF8484;

08. Käytä väri muuttujia

Voit käyttää näitä värinmuuttujia juuri perustamista, voimme kertoa Sassille _colours.Scss päätyyliin. Teemme tämän käyttämällä @tuonti lausunto. Kun olet tehnyt tämän, huomaa, miten muuttujat ratkaistaan ​​lähtö CSS-tiedostossa.

 // Styles.SCSS
@IMPort "_colours.Scss";
elin {
  Fontti-perhe: Sans-Serif;
  Teksti-kohdistus: keskus;
  Tausta: Linear-gradientti (155deg,
$ Color-primaarinen 70%, $ Color-Toissijainen
70%);
  Väri: $ värivalo;
  Min-korkeus: 100vh;
}
h1 {
    Väri: $ Color-Highlight1;
}
H2 {
  Väri: $ Color-Highlight2;
}

09. Nesttyylit

Toinen Hyödyllinen piirre Sass on kyky nostaa tyylejä. Toisin sanoen voit määrittää tyylin elementtiin, jota sovelletaan vain, jos tämä elementti tapahtuu vanhemmassa. Käytä tätä erottamaan linkkien muotoilu riippuen siitä, näkyy ne otsikossa tai kehossa.

 a {
  Väri: $ Color-Toissijainen;
}
.profile-header {
  {
    Fontti-koko: 16PX;
    marginaali vasemmalle: 10px;
    marginaali-oikeus: 10px;
    Pehmuste: 10px;
    Border-RADIUS: 5PX;
    Väri: $ värivalo;
    Tausta-väri: $ Color-Toissijainen;
  }
}

10. Tee Responsive Grid

Nyt järjestetään sisältömme reagoivaan verkkomuotoon. Sassilla on pari ominaisuutta, jotta tämä helpottuu merkittävästi. Sekä käyttämällä muuttujia määrittämään katkaisupisteemme, voimme pesä @Media Kyselyt muissa tyyleissä, jotka tekevät käyttäytymisestä erityisiä näytön kokoa paljon enemmän luettavissa.

 $ Breakpoint: 800px;
.profile-body {
  Näyttö: Flex;
  Kohdistukset: venytys;
  Perusti-sisältö: Space-around;
  marginaali: 32px;
  marginaali vasemmalle: 10vw;
  Marginaali-oikeus: 10vW;
  @Media-näyttö ja (max-leveys:
$ Breakpoint) {
      Flex-Suunta: sarake;
  }
}
.profile-osa {
  Tausta-väri: $ Color-Highlight1;
  Väri: $ Color-ensisijainen;
  Marginaali: 16PX;
  Border-RADIUS: 10PX;
  Leveys: 340px;
  .profile-sisältö {
    Pehmuste: 20px;
  }
  @Media-näyttö ja (max-leveys:
$ Breakpoint) {
    Leveys: 100%;
  }
}

11. Ota käyttöön sekoitteita

Miekit ovat toinen voimakas Sass-ominaisuus, jonka voit ajatella keinona määritellä uudelleenkäytettävät tyylitaulukkotoiminnot. Mixin määritellään kerran, voi ottaa parametreja, ja sitä voidaan sitten kutsua mihin tahansa Sass-koodiin. Yksi käyttötapa tästä on käsitellä myyjän etuliitteitä. Jos haluamme CSS-muunnoksen tehdä työtä vanhemmissa selaimissa, tämä saattaa vaatia a -Webkit Esimerkiksi kromi ja safari etuliite. Määrittele sekoitus, joka huolehtii tästä meille.

12. Miekit ja muuttujat

Voimme myös käyttää sekoitusta useilla parametreilla, yhdistettynä joidenkin muuttujien kanssa, joita määritämme, tyylikkäästi käsittelemään sivun eri osia. Jos luomme sekoittimen, joka määrittää etualalla ja taustavärillä, voit valita eri osioiden esiintymiset äärellisestä luettelosta tyyli muuttujista.

 $ Style1: (etualalla: $ värivalo,
Tausta: $ Color-Toissijainen);
$ Style2: (etualalla: $ Color-ensisijainen,
Taustaa: $ Color-Highlight1);
$ Style3: (etualalla: $ Color-ensisijainen,
Taustaa: $ Color-Highlight2);
@mixin sisältötyyli ($ etualalla,
$ tausta) {
  Väri: $ etualalla;
  Tausta-väri: $ tausta;
} 

13. Käytä uutta sekoitustasi

 .profile-header {
  {
    @include sisältötyyli ($ Style1 ...);
    // ...
  }
}
.profile-osa {
    @include sisältötyyli ($ Style2 ...);
  // ...
}

14. Ymmärrä perintö

Toinen erittäin voimakas Sass on perintö. Juuri nyt meillä on kaksi eri tyyliä linkkien sivullamme. Jos haluamme käyttää yhteisiä tyylejä molemmilla, eikä vain kopioimalla ja liittämällä CSS, miksi emme käytä paikkamerkin luokkaa, merkitty ’%’, jota voidaan jatkaa molempien, jotta he voivat periä sen tyylejä?

% Link-jaettu {
  Fontti-koko: 16PX;
  marginaali vasemmalle: 10px;
  marginaali-oikeus: 10px;
  Pehmuste: 10px;
  Border-RADIUS: 10PX;
}

15. Laajenna luokkia

Nyt voimme laajentaa linkin yhteisen luokan määritellä linkin muotoilu koko sivustollamme. Tämä alkaa näyttää melko tyylikkäältä. Määritämme, mitä linkki näyttää yleensä vain kerran, käytä sitä uudelleen koko ajan ja määritä värit paletista jokaiselle linkille sekoittimen avulla.

 .profile-header {
  {
    @extend% linkki jaettu;
    @include sisältötyyli ($ Style1 ...);
  }
}
{
  @extend% linkki jaettu;
  @include sisältötyyli ($ Style3 ...);
}

16. Muokkaa teemaa

Katsotaan nyt, kuinka helppoa Sass tekee sen muokkaamaan sivuston teemaa. Nykyiset värit eivät ehkä ole täydellisiä. Emme voi vain muuttaa väri muuttujia, mutta voimme myös käyttää joitakin SASS-toimintoja menettelyllisesti tuottaa värejä, jotka vastaavat ensisijaista valintamme.

 // _colours.Scss
$ Color-ensisijainen: # 2E1F27;
$ Color-Toissijainen: kevennys ($ Color-primäärinen,
25%);
$ Color-Light: kevennys ($ Color-primäärinen,
75%);
$ Color-Highlight1:
keventää (komplementti ($ värin ensisijainen), 50%);
$ Color-Highlight2:
keventää (komplementti ($ väri-toissijainen), 50%);

17. Valitse uusi värejä

Nyt voimme muokata koko sivuston värijärjestelmää yksinkertaisesti määrittämällä uusi väri-ensisijainen arvo _colours.Scss tiedosto. Yritä kokeilla kokeilemalla vaihtoehtoisia värejä. Voisimme myös olla SASS satunnaistaa se (mutta muistakaa, että tämä viittaa siihen pisteeseen, jossa sivustosi on rakennettu, ei juoksua). Voit myös yrittää säätää logiikkaa, jota käytämme teemana olevien muiden väreihin ensisijaisesta teemasta.

 $ Red: satunnainen (255);
$ Vihreä: satunnainen (255);
$ Blue: satunnainen (255);
$ Color-ensisijainen: RGB ($ punainen, $ vihreä, $ sininen); 

18. Käytä kirjastoja

Sassin moduulijärjestelmä tekee myös erittäin suoraviivaista käyttää kolmannen osapuolen kirjastoja minimaalisella vaivalla ja ilman suuria runtime-tiedostoja loppukäyttäjille. Kokeile kulmikkaan reunan kirjasto, jota voimme käyttää luomaan viistot reunat sivultamme esineille.

 git klooni https://github.com/josephfusco/
Kaltevat reunat.GIT SRC / SASS / Kulmat-reunat

19. Kalteen reunat

Voimme tuoda kulmikkaat reunat samalla tavalla kuin teimme värimallimme osittaiselle. Se on sitten käyttökelpoinen sekoitin, joka alukset kirjastossa. Kokeile sitä profiilissamme luokassa.

 @IMPORT "Kulma-reunat / _angled-edes.S.SS";
.profile-osa {
  @include kulmikas reuna ("ulkopuolella",
"Alempi oikeus", $ Color-Highlight1);
  @include kulmikkaan reuna ("ylhäällä",
"Oikea", $ Color-Highlight1);
  Marginaali: 120px 16px 120px 16px;
  // ...
}

20. Lähtömuotoilu

Lopetetaan ylös tarkastelemalla lähtö SASS luo. Jos olet seurannut CSS-tiedostoja, koska olemme tehneet muutoksia, huomaat, että ne pysyvät melko luettavissa. Voit kuitenkin olla myös Sass rakentaa kondensaaleja CSS, joka on vähemmän ihmisen luettavissa, mutta silti valmis lähettämään. Voit tehdä tämän käyttämällä --tyyli komentorivi lippu.

 SASS SRC / SASS /: Julkinen / CSS / --Style
Pakattu 

21. Lisää SASS

Olemme nyt tutkineet melko vähän Sass, ja sivustomme ei ole liian huono. Toivottavasti alkaa nähdä, kuinka SASS auttaa meitä kehittämään ylläpitäviä tyyliä. Emme ole peittäneet jokaisen kielen ominaisuutta - siinä on paljon hyödyllisiä toimintoja, jotka toimitetaan sen kanssa ja kehittyneet ominaisuudet, kuten ohjausdirektiivit (kuten @jos , @for ja @sillä aikaa ) Tätä käytetään usein monimutkaisten kirjastotoimintojen luomiseen. Kaiken kaikkiaan muista, että SASS on täysin tyylinen mieltymys. Voit tehdä kaiken, mitä olemme nähneet puhtailla CSS: llä, jos haluat, mutta sinun pitäisi ehdottomasti ajatella esikäsittelyä, kun työsi muuttuu monimutkaisemmiksi.

Tämä artikkeli julkaistiin alun perin asiassa 282 Nettisivujen suunnittelija . Ostaa Julkaisu 282 tai Tilaa täältä .

Lue lisää:

• 10 hämmästyttävää uutta CSS-teknologiaa
• 3 kiiltävää uutta CSS-ominaisuuksia kokeilla tänään
• Suuri parallax vieritys sivustot