Mikä on Stylus CSS ja kuinka käytät sitä?

Mitä tulee verkkokehitykseen, yleisin tapa muotoilla sovellusta on käyttää CSS: ää. CSS: n kanssa työskentely voi kuitenkin olla hankalaa, koska sen virheenkorjaus on tunnetusti vaikeaa.

Opi käyttämään Stylus CSS: ää, niin sinulla on toinen vaihtoehto, jossa on yksi suosituimmista saatavilla olevista CSS-esiprosessoreista.

Mikä on CSS-esiprosessori?

CSS-esiprosessorit ovat apuohjelmia, jotka helpottavat CSS: n kirjoittamista. He usein kokoavat koodia omasta mukautetusta syntaksistaan .css muodossa, jonka selaimet ymmärtävät.

CSS-esikäsittelijät, kuten Sass, tarjoavat erikoisominaisuuksia, kuten silmukoita, mixinejä, sisäkkäisiä valitsimia ja if/else-lauseita. Nämä ominaisuudet helpottavat CSS-koodin ylläpitoa erityisesti suurissa ryhmissä.

CSS-prosessorin käyttämiseksi sinun on asennettava kääntäjä paikalliseen ympäristöösi ja/tai tuotantopalvelimeen. Jotkin käyttöliittymän rakennustyökalut, kuten Vite, antavat sinun sisällyttää CSS-esiprosessorit, kuten LessCSS projektissasi.

Kuinka Stylus CSS toimii

Stylus-kynän asentaminen paikalliseen ympäristöösi tarvitset Node.js: n ja jommankumman Node Package Manager (NPM) tai koneellesi asennettu lanka. Suorita seuraava terminaalikomento:

npm asennuskynä

Tai:

lanka lisää kynä

Jokainen Stylus CSS -tiedosto päättyy a .styl laajennus. Kun olet kirjoittanut Stylus CSS -koodin, voit kääntää sen tällä komennolla:

kynä .

Tämän pitäisi koota kaikki .styl tiedostot ja tulosteet .css tiedostot nykyisessä hakemistossa. Stylus-kääntäjä mahdollistaa myös kääntämisen .css tiedostot sisään .styl kanssa --css lippu. Muuntaaksesi a .css tiedosto tiedostoon .styl muodossa, käytä tätä komentoa:

stylus --css style.css style.styl

Syntaksi ja vanhemman valitsimet Stylus CSS: ssä

Perinteisessä CSS: ssä määrität tyylilohkon aaltosulkeilla; näiden merkkien puuttuminen johtaa rikkoutuneisiin tyyleihin. Stylus CSS: ssä aaltosulkeiden käyttö on valinnaista.

Stylus tukee Pythonin kaltaista syntaksia, mikä tarkoittaa, että voit määrittää lohkoja käyttämällä sisennyksiä, kuten näin:

.container
marginaali: 10px

Yllä oleva koodilohko käännetään seuraavaan CSS: ään:

.container {
marginaali: 10px;
}

Aivan kuten CSS-esiprosessoreissa, kuten Less, voit viitata ylävalitsimeen käyttämällä & merkki:

-painiketta
väri: valkoinen;
 &:hover
väri: keltainen;

Joka kokoaa:

-painiketta {
väri: #F F F;
}
-painiketta:hover {
väri: #ff0;
}

Muuttujien käyttäminen Stylus CSS: ssä

CSS-esiprosessoreissa, kuten Less CSS, määrität muuttujat @ merkki, kun taas perinteinen CSS käyttää "--" muuttujan määrittämiseen.

Styluksessa asiat ovat hieman toisin: et tarvitse erityistä symbolia muuttujan määrittämiseen. Sen sijaan määritä muuttuja käyttämällä yhtäsuuruusmerkkiä (=) sitoaksesi sen arvoon:

bg-väri = musta

Voit nyt käyttää muuttujaa kohdassa .styl tiedosto näin:

div
taustaväri: bg-väri

Yllä olevat koodilohkot käännetään seuraavaan CSS: ään:

div {
taustaväri: #000;
}

Voit määrittää nolla-muuttujan suluilla. Esimerkiksi:

tyhjä-muuttuja = ()

Voit viitata muihin ominaisuusarvoihin käyttämällä @ symboli. Jos esimerkiksi haluat asettaa div: n korkeudeksi puolet sen leveydestä, voit toimia seuraavasti:

elementin leveys = 563px
div
leveys: elementin leveys
korkeus: (elementin leveys / 2)

Se toimisi, mutta voit myös välttää muuttujan luomisen kokonaan ja viitata siihen leveys omaisuuden arvo sen sijaan:

div
leveys: 563px
korkeus: (@leveys / 2)

Tässä koodilohkossa @ symbolin avulla voit viitata todelliseen leveys omaisuutta div. Riippumatta valitsemastasi lähestymistavasta, kun käännät .styl tiedosto, sinun pitäisi saada seuraava CSS:

div {
leveys: 563px;
korkeus: 281.5px;
}

Toiminnot Stylus CSS: ssä

Voit luoda Stylus CSS: ssä arvoja palauttavia toimintoja. Oletetaan, että haluat asettaa tekstin tasaus Div: n ominaisuus "keskukseen", jos leveys on suurempi kuin 400 kuvapistettä tai "vasen", jos leveys on alle 400 pikseliä. Voit luoda funktion, joka käsittelee tätä logiikkaa.

alignCenter(n)
jos (n > 400)
 'keskusta'
muujos (n < 200)
 'vasemmalle'
div {
leveys: 563px
tekstin tasaus: alignCenter(@leveys)
korkeus: (@leveys / 2)
}

Tämä koodilohko kutsuu alignCenter toiminto, ohittamalla leveys kiinteistön arvo viittaamalla siihen @ symboli. The alignCenter toiminto tarkistaa, onko sen parametri, n, on suurempi kuin 400 ja palauttaa "keskipisteen", jos se on. Jos n on pienempi kuin 200, funktio palauttaa "vasemman".

Kun kääntäjä on käynnissä, sen pitäisi tuottaa seuraava tulos:

div {
leveys: 563px;
tekstin tasaus: 'keskusta';
korkeus: 281.5px;
}

Useimmissa ohjelmointikielissä funktiot määrittävät parametrit sen mukaan, missä järjestyksessä annat ne. Tämä voi johtaa virheisiin, jos parametrit välitetään väärässä järjestyksessä, mikä on todennäköisempää, mitä enemmän parametreja sinun on välitettävä.

Stylus tarjoaa ratkaisun: nimetyt parametrit. Käytä niitä tilattujen parametrien sijaan, kun kutsut funktiota, kuten näin:

vähentää(b:30px, a:10px)/*-20px*/

Milloin CSS-esiprosessoria käytetään

CSS-esiprosessorit ovat erittäin tehokkaita apuohjelmia, joiden avulla voit virtaviivaistaa työnkulkuasi. Oikean työkalun valitseminen projektiisi voi parantaa tuottavuuttasi. Jos projektisi tarvitsee vain pienen määrän CSS: ää, CSS-esiprosessorin käyttö saattaa olla ylivoimaista.

Jos rakennat suurta projektia, ehkä osana tiimiä, joka perustuu suureen määrään CSS: ää, harkitse esiprosessorin käyttöä. Ne tarjoavat ominaisuuksia, kuten toimintoja, silmukoita ja sekoituksia, jotka helpottavat monimutkaisten projektien muotoilua.