Kirjoittajalta: Ensinnäkin, mikä on esiprosessori? Lyhyesti sanottuna esiprosessori on ohjelma, joka muokkaa tietoja toisen ohjelman syöttövaatimuksiin sopivaksi. CSS-esiprosessorit ovat komentosarjakieli, joka laajentaa tavallisen CSS:n ominaisuuksia muuttujilla, sisäkkäissäännöillä, funktioilla ja loogisilla lohkoilla.

Miksi minun pitäisi käyttää sitä?

Usein joudut tilanteeseen, jossa sinun on käytettävä sama arvo tietylle kiinteistölle eri paikkoja. Esimerkiksi määritit ensin punaisen sivuston pääväriksi. Sitten sinun on vaihdettava se vihreäksi.

Muuttujien avulla sinun ei tarvitse etsiä ja korvata jokaista punaista mainintaa tyyleissä. Määrität muuttujan arvon kerran, esimerkiksi "primary color", ja käytät sitten muuttujaa arvona.

Päävärin arvo muuttuu yhdessä paikassa. Voit myös tuoda CSS-tiedosto s muista lähteistä ajattelematta verkkopyyntöjen määrää, koska ne voidaan yhdistää yhdeksi tiedostoksi ennen kääntämistä.

CSS-esiprosessorien sisäkkäisen luonteen ansiosta saat kompaktin koodin samalla tuloksella. LESS ja SCSS perustuvat DRY-periaatteeseen, joka tarkoittaa "älä toista itseäsi" tai "älä toista itseäsi".

Esiprosessorit. Nopea aloitus

Mitä vikaa VÄHEMMÄSSÄ on?

Verkko on jo täynnä keskusteluja siitä, kumpi on parempi: LESS vai SCSS. Siksi en käsittele molempia aiheita yksityiskohtaisesti. Sen sijaan puhun pienistä ongelmista, joita minulla oli LESSin kanssa.

SCSS käyttää $-symbolia muuttujien määrittämiseen, kun taas LESS käyttää @-symbolia. Koska CSS käyttää myös @-symbolia mediakyselyihin, tuontiin ja avainkehysanimaatioihin, tämä voi olla hämmentävää kehittäjille.

$-symbolia ei käytetä CSS:ssä. @-symboli on SCSS:ssä, mutta sitä käytetään @if , @else , @each , @for ja @while -käskyissä.

Vaikka tämä skenaario ei ole realistinen kaikille, on parempi käyttää eri tunnuksia elementtien erottamiseen.

SCSS tukee perinteistä loogisia lausekkeita kuten jos/else, lohkot ja silmukat. LESS-suojatut miksaukset ovat silmälle helpompia, mutta vaikeammin ymmärrettäviä.

Voidaan tehdä käyttämällä VÄHEMMÄN...

...tai käyttämällä vain SCSS:ää.

LESS määrittelee vain yhden suojatun miksauksen. Siksi et voi yksinkertaisesti välittää toista argumenttia ja käsitellä sitä samassa mixinissä kopioiden koodin kaikille mahdollisia skenaarioita. Itse asiassa LESS (vähemmän) on enemmän (sanatarkoitus).

Tiedän, että koodia on mahdollista lyhentää käyttämällä lisättyjä arvoja ominaisuuden niminä tässä tapauksessa, mutta ongelmana on, että en voi ehdollisesti kartoittaa saman mixinin kahta eri osaa VÄHEMMÄN.

Tällä koodilla on enemmän päänsärkyä...

Esiprosessorit. Nopea aloitus

Opi työskentelyn perusteet Vähemmän esiprosessoreita ja Sass kanssa täydellinen nolla alle 2 viikossa

...kuin tällä.

Saavuttaakseni saman tuloksen LESS:llä minun piti määrittää etukäteen kaikki, kirjoittaa mixin, saada indeksipaikka, iteroida sitä logiikallani, kunnes indeksin arvo on yhtä kuin nolla, ja kutsu mixin manuaalisesti.

Vaikka tämä on henkilökohtainen mielipiteeni, mielestäni SCSS käsittelee yleensä laskenta-arvoja ja matemaattisia arvoja paremmin.

Mitä vikaa siinä on?

LESS sen sijaan on paljon monimutkaisempi. Esimerkiksi kun käytän sitä, en yritä tehdä laskelmia. Mutta vaikka tekisinkin, mistä lähtien 100 % miinus 50 kuvapistettä on 50 %?

LESS, miksi ohitat arvot muutosyksiköillä?

Miksi pakotat minut opettelemaan kainalosauvojasi, kun tiedän jo CSS:n?

Ja viimeinen asia. LibSass-projektin ansiosta SCSS:ssä on monia kääreitä muille kielille, kuten C, Go, PHP, Python, Dart jne.

Miksi päätimme luopua LESS:stä SCSS:n hyväksi?

Kun kehitimme JotForm-kortteja, meidän piti esikäsitellä muuttuvia arvoja - esikäännös ja palvelinpuolen välimuisti samaan aikaan; ja kaikki tämä piti tehdä täydellisesti.

Halusimme, että käyttäjät voivat muokata ulkomuoto lomakkeita Jotta muutokset näkyvät välittömästi ja samanaikaisesti ja tallennetaan palvelimen välimuistiin. Käyttäjiemme vuoksi emme halunneet käyttää VÄHEMMÄN asiakaskuorta, koska se vaatisi laskentateho asiakas - ja monet asiat voivat mennä pieleen.

Emme aloittaneet kehityssykliä tavoitteellamme siirtyä LESS:stä SCSS:ään. Mutta puolivälissä näiden pienten ongelmien käsittelyssä, kunnollisen kääreen puute LESSille oli viimeinen pisara.

LESS:n ja SCSS:n väliset erot ovat kuitenkin vähemmän tärkeitä kuin niillä yhteistä. Loppujen lopuksi sillä ei ole väliä, mitä esiprosessoria käytät, kunhan käytät sitä.

Yritetään hallita valtavaa projektia yhdellä CSS-tiedostolla ja perinteisellä CSS-rakenne paljon vaikeampaa kuin esiprosessorin käyttäminen muutaman ongelman kanssa.

Mitkä ovat esiprosessorin päätehtävät ja kumpi valita: SASS tai LESS, keskustelemme tässä artikkelissa. Ensin sinun on määritettävä esiprosessori - mikä se on? Se on työkalu tai työkalu, joka muokkaa tiettyä koodia muuntamalla sitä erilaisten ominaisuuksien avulla. Prosessorin syöte on koodi, jota kuvataan erilaisilla syntaktisilla rakenteilla. Nämä mallit ovat ymmärrettäviä vain tälle instrumentille. Se voi korvata erilaisia ​​monimutkaisia ​​kielirakenteita tai päinvastoin lisätä uusia. Ohjelman tulos on koodi yli Heikkolaatuinen poistettujen rakenteiden kanssa.

Käsitteen esiprosessori ymmärtämiseksi paremmin, katsotaanpa esimerkkiä. Tämän ohjelman syöte on koodi, joka sisältää erilaisia ​​sanoja, tehtäviä, pilkkuja ja pisteitä. Jos on korvaava toiminto avainsana sen lyhyessä muodossa, eli lyhenteenä, koko nimeen, tulos on lause, jossa on laajennettu merkintä. Tämä on primitiivisin käsitys siitä, mitä esiprosessori on. Pohjimmiltaan se sisältää monimutkaisempia komentoja ja ominaisuuksia.

Joten tämä ohjelma tarjoaa erilaisia ​​malleja yksinkertaisuuden ja nopeuden kehittämiseksi ja tyylin tueksi.

Yleensä koodi on suunnattu ihmisen ominaisuuksiin:

Luettavuus.

Rakenne.

Esitys.

Myös esiprosessoreita harkitessaan ohjelmoijat kohtaavat syntaktisen sokerin käsitteen. Nämä ovat joitain lisäyksiä ohjelmointikieleen, jotka eivät vaikuta vahvistukseen. lisäominaisuuksia, mutta parantaa luettavuutta.

Päätyypit

Yleisimmät vaihtoehdot ovat LESS, SASS ja Stylus. Joten kuten edellä on jo määritelty, tällaisten työkalujen käytön etuja ovat tekstin sisällön, rakenteen ja tuottavuuden parantaminen. Kuitenkin harvat kehittäjät käyttävät tällaisia ​​ohjelmia työssään, koska he uskovat, että niiden kanssa työskentely on monimutkaista ja monet toiminnot ovat epäselviä.

Ohjelma on suosituin tässä ongelmassa. Tämä ohjelma sen kehitti vuonna 2009 ohjelmoijatiimi. Siinä on kaikki toiminnot päällä perustaso. Suurin haittapuoli on puute ehdolliset rakenteet ja syklit. Tärkein etu tästä instrumentista– Se on selkeä ja helppokäyttöinen, se toiminnallisuus voidaan laajentaa erilaisilla lisäosilla.

Syntaktisesti mahtavat tyylisivut

SASS on tehokkain esiprosessori. Sen on kehittänyt koko joukko ohjelmoijia. Se perustettiin vuonna 2007 HAML-moduuliksi ja on myös kirjoitettu Ruby-kielellä (sillä on C++-portti). Siinä on myös laajempi valikoima ominaisuuksia verrattuna muihin ohjelmiin. Voit laajentaa Syntaktisesti mahtavien tyylisivujen ominaisuuksia käyttämällä tehokasta Compass-kirjastoa. SASS-ohjelmassa on kaksi syntaksivaihtoehtoa: Sass ja SCSS.

Tämä on nuorin ja lupaavin instrumentti. Se on perustettu vuonna 2010. Stylus-esiprosessori on kätevin ja laajennettavissa oleva esiprosessori.

Yleensä ohjelmoija työskentelee jo LESS:n kanssa. Mitä tahansa tiedostoa pidetään kelvollisena VÄHEMMÄN tiedostona. Tässä tapauksessa tiedostopäätettä ei tarvita. Kun otat tavallista CSS-koodia, laitetaan se tiedostoon, jolla on sama nimi, mutta jonka tunniste on .less. Itse asiassa identtinen tiedosto vastaanotettiin ilman virheitä ja tarkalla sisällöllä. Ainoa ero tiedostojen välillä oli saatavuus tyhjiä rivejä valitsimien jälkeen. Näin ollen tätä työkalua käytettäessä käännösaika on paljon vähemmän. Siksi toimintaa tästä tuotteesta tiettyihin tavoitteisiin ja kätevän rakenteen rakentamiseen. Tämä voidaan tehdä tavallisella CSS:llä, mutta se on vähemmän kätevää.

Päätekijät valinnassa

Mukaan toiminnalliset ominaisuudet Sass on ehdottomasti parempi kuin muut ohjelmat monella tapaa. Mutta jos työ on jo tehty Lessillä, sitä ei kannata muuttaa. Kuten edellä mainittiin, SASS mahdollistaa Compassin käytön, mikä helpottaa etuliitteiden käyttöä. Muissa ohjelmissa ei ole Compass-projektia, koska työkalun kieli on melko monimutkainen. SASSissa on Boolen ja sykliset operaattorit. LESS-sivusto on kaunis ja käyttäjäystävällinen muihin sivustoihin verrattuna.

Kun työskentelet @media-sääntöjen kanssa, ohjelmoija lisää niiden kanssa lohkoja tyylisivun alaosaan. Tämä johtaa tyylien katkeamiseen. Less ja Sass ovat molemmat työkaluja, jotka ratkaisevat tämän ongelman, ja niiden takana oleva matematiikka on yleensä samanlainen. Nopeudessa molemmilla esiprosessoreilla on hyvä suorituskyky.

Molempien vaihtoehtojen kehittäjät parantavat niitä edelleen.

Ohjelmoijien arvostelujen ja kommenttien mukaan molempia työkaluja voidaan käyttää yhtä hyvin. Syntaktisesti Awesome Style Sheetsissä on joidenkin lähteiden mukaan enemmän alhainen nopeus muihin verrattuna. Jotkut katsovat, että Stylus on ylittänyt molemmat esiprosessorit nykyään.

Joten Lessin ja Sassin käyttöön ei ole tarkkaa ratkaisua, koska molemmilla on hyvät ominaisuudet ja toiminnallisuus. Siksi valinnan määrää ohjelmoijan tavoitteet ja tavoitteet.

"ja syntyi täysin looginen kysymys: "Mitä eroa on SASS:lla ja SCSS:llä?" Aihe on mielenkiintoinen, joten selvitetään se.

Kun me puhumme Sassista puhuttaessa tarkoitamme yleensä esiprosessoria ja kieltä yleensä.

Sassia (esikäsittelijää) käytettäessä voimme kuitenkin käyttää kahta eri syntaksia:

• Sass (sisennys) ;
• SCSS (CSS:n kaltainen syntaksi).

Hieman historiaa

Sass oli alun perin osa toista esiprosessoria, Hamlia, jonka Ruby-kehittäjät keksivät ja kirjoittivat.

Joten Sass-tyyleissä käytettiin Ruby-tyyppistä syntaksia, ei sulkuja, ei puolipisteitä eikä tiukkaa sisennystä, kuten tämä:

// Muuttuja!primary -color= hotpink // Ensisijainen =border-radius(!radius) -webkit-border-radius= !radius -moz-border-radius= !radius border-radius= !radius .my-element color= !ensisijainen -värin leveys= 100 % ylivuoto= piilotettu .my-other-element +border-radius(5 px)

Verrattuna CSS-syntaksi on huomattava ero.

Muuttuja määritetään kautta ! , ei $ , arvonmäärityssymboli = , not :.

Mutta tältä Sass näytti ennen toukokuussa 2010 julkaistua versiota 3.0, joka esiteltiin kokonaan uusi syntaksi nimeltään SCSS tai Sassy CSS.

Hänen tavoitteenaan oli tuoda Sass-syntaksi lähemmäksi CSS:ää ja tehdä siitä yhteensopivampi CSS:n kanssa:

// Muuttuja $primary -color: hotpink; // Mixin @mixin border-radius($radius ) ( -webkit-border-radius: $radius ; -moz-border-radius: $radius ; border-radius: $radius ; ) .my-element ( color: $primary -väri: 100% ylivuoto: piilotettu

SCSS on ehdottomasti lähempänä CSS:ää kuin Sass. Sass-kehittäjät työskentelivät kovasti saadakseen molemmat syntaksit lähemmäksi toisiaan korvaamalla ! (muuttujamerkki) ja = (määritysmerkki) $:ssa ja: CSS:stä.

Joten kun aloitat uutta projektia, saatat miettiä, mitä syntaksia käyttää. Anna minun auttaa sinua päätöksenteossa.

Sassin sisennetyn syntaksin plussat

Vaikka tämä syntaksi saattaa tuntua sinusta hieman oudolta, siinä on useita mielenkiintoisia hetkiä. Ensinnäkin se on lyhyempi ja helpompi kirjoittaa. Ei ole sulkeita tai puolipisteitä, niitä ei tarvita.

Se ei tarvitse @mixin tai @include, kun se riittää yksinkertainen symboli: = ja + .

Sassilla on myös puhtaat koodausstandardit, koska se käyttää sisennystä. Koska virheellinen sisennys voi rikkoa koko .sass-tyylitaulukon, ensimmäinen askel tässä on varmistaa, että koodi on puhdas ja oikein muotoiltu.

On vain yksi tapa kirjoittaa Sass-koodi: kirjoita se oikein.

Älä unohda, että sisennyksellä on Boolen arvo Sassissa. Kun valitsinlohkon sisennystä käytetään, se tarkoittaa, että se on sisäkkäinen valitsin.

Esimerkiksi:

.element-a color: hotpink .element-b float: left ... tulostaa seuraavan CSS-koodin: .element-a ( color : hotpink ; ) .element-a .element-b ( float : left ; )

Yksinkertainen tosiasia .element-b:n siirtämisestä yhden tason oikealle tarkoittaa, että se on lapsielementti.element-a:sta, joka muuttaa tuloksena olevan CSS-koodin. Ole siis varovainen syvennysten kanssa!

Uskon, että sisennykseen perustuva syntaksi on houkuttelevampi ryhmälle, joka työskentelee ensisijaisesti Ruby/Pythonin kanssa, kuin PHP/Java-ohjelmoijatiimille (mutta tämä ei ole varmaa).

SCSS-syntaksin plussat

Ensinnäkin se on täysin CSS-yhteensopiva. Tämä tarkoittaa, että voit nimetä CSS-tiedoston uudelleen muotoon .scss ja se toimii kuin mitään ei olisi tapahtunut.

SCSS:n tekeminen täysin yhteensopivaksi CSS:n kanssa on aina ollut Sass-tuen prioriteetti SCSS:n julkaisusta lähtien, ja mielestäni tämä on vahva puoli.

He yrittävät myös pitää silmällä, mistä CSS-syntaksista voi tulla kelvollinen tulevaisuudessa, ja toteuttaa se (siis @directives ).

Koska SCSS on yhteensopiva CSS:n kanssa, se ei käytännössä vaadi lisäkoulutusta. Syntaksi on melko sama: loppujen lopuksi se on vain CSS, jossa on joitain lisäyksiä.

Tämä on tärkeää uusille kehittäjille, jotta he voivat nopeasti aloittaa koodauksen tietämättä paljoakaan Sassista.

Se on myös luettavampi, koska tietyt rakenteet ovat jo järkeviä. Kun näet @mixin , tiedät, että se on mixin-ilmoitus; kun näet @include , tiedät, että se on sekoituspuhelu.

Ei ole sidottu ehtoihin ja kaikki on järkevää ilman tulkintaa.

Lisäksi lähes kaikki olemassa olevat Sassin työkalut, laajennukset ja demot on kehitetty käyttämällä SCSS-syntaksia. Tämä syntaksi on yhä enemmän suunnattu ammattilaisille ja on heidän valitsemansa oletusarvoisesti (jos se ei ole ainoa mahdollinen).

Lähinnä edellä mainituista syistä. Esimerkiksi on yhä vaikeampaa löytää puhdasta Sass-syntaksin korostusta sisennyksen kanssa; yleensä vain SCSS-taustavalovaihtoehdot ovat käytettävissä.

Johtopäätös

Valinta on joka tapauksessa sinun, mutta ellei sinulla ole todella pakottavaa syytä käyttää sisennettyä syntaksia, suosittelen vahvasti SCSS:n käyttöä Sassin sijaan. Se ei ole vain helpompaa, vaan myös kätevämpää. Jos olet täysin aloittelija, SCSS on mitä tarvitset. Samankaltaisuus CSS:n kanssa ei pelota sinua oppimasta asettelua esiprosessorien avulla. Mutta sitten voit harkita Sassin käyttöä projekteissasi. Tärkeintä ei ole pelätä uuden teknologian käyttöä työssäsi!

P.S. Huomaa, että Sass ei ole koskaan lyhennetty sanasta isot kirjaimet, riippumatta siitä, onko kyseessä syntaksi vai ohjelmointikieli. Vaikka SCSS on aina merkitty isoilla kirjaimilla.

Pidän SASS-syntaksista enemmän kuin SCSS:stä sen lyhyyden vuoksi. Mutta tyylien massiivinen sisäkkäisyys SASSissa voi nopeasti poistaa sen lyhyyden edut. Joka tapauksessa ero SASS:n ja SCSS:n välillä ei ole perustavanlaatuinen. LESS osoittautui lähempänä SCSS:ää kuin SASS:a. Ja yleisesti ottaen se on sama asia. Eroja ei ole paljon, mutta pari niistä muuttaa perusteellisesti voimatasapainoa.

1. VÄHEMMÄN - voi asiakaspuolella käyttää JS:ää.

Tarkemmin sanottuna hän ei voi, hän on suunniteltu tähän. Yleinen käytäntö VÄHEMMÄN koodin käyttämiselle:

Silloin siihen lisättiin mahdollisuus kääntää palvelimella (sekä js että ruby).

Ensi silmäyksellä se näyttää oudolta omaiselta. Miksi kääntää asiakaspuolella, jos pystyt kääntämään täydellisesti palvelimella ja palvelemaan valmiita pakattuja CSS:itä kuten olemme tottuneet SASS:n kanssa?

Syy tulee selväksi, kun on tutkittu LESS-dokumentaation epäselviä viimeisiä rivejä:

@korkeus: `document.body.clientHeight`;

Tällainen pieni yksinäinen linja tarjoaa mahdollisuuksia, joista taittosuunnittelijat ovat vain haaveilleet tyylien hallitsemisen alusta asti. Asiakaspuolen Java-skriptin kutsuminen CSS:stä ja todellisten selainasetusten huomioiminen tyylejä luotaessa.

Eli meillä on nyt mahdollisuus ensin ladata DOM ja sitten luoda se sitä varten mukautettu CSS aivan asiakkaan puolella. Mieti sitten itse, mitä mahdollisuuksia tämä avaa.

Eri kysymys on, tarvitseeko projektisi tätä. On selvää, että kaikki ovat tottuneet asiakkaan epävarmuuteen/riippumattomuuteen ja layoutiin tyyliin "teemme sen universaalisti, jotta se näkyy enemmän tai vähemmän kaikille kaikissa päätöksissä". Mutta tämä ei ole syy unohtaa, että nyt tällainen mahdollisuus on olemassa ja sen avulla voit tehdä esimerkiksi erittäin joustavan ulkoasun.

2. LESS:llä, toisin kuin SASS/SCSS:llä, ei ole logiikkaa.

LESS-kohdassa ei ole jos/niin, puolesta jne.. Vaikka ottaen huomioon, että JS on helposti sisäänrakennettu siihen, uskon, että logiikkaa on täysin mahdollista kiertää. En ole kokeillut.

3. Sekoitus on helpompaa VÄHEMMÄN + voit miksata luokkia.

Pidin todella siitä, että LESS:ssä voit sisällyttää määritelmään muiden luokkien ominaisuuksia. Itse luokka on mixin. Tämä on toinen ominaisuus, jota SASS/SCSS ei sisällä. Voit sisällyttää tavallisen CSS-tiedoston kohtaan LESS ja käyttää sen luokkia ominaisuuksien määrittämiseen. Esimerkiksi:

Kääri (
tekstin rivitys: rivitys;
tyhjä tila: pre-wrap;
välilyönti: -moz-pre-wrap;
word-wrap: break-word;
}
pre ( .wrap )

Yhteenveto

1. pistettä lukuun ottamatta ero ei ole suuri ja valinta on amatöörille suurempi.

Minulle henkilökohtaisesti LESS näyttää houkuttelevammalta yksinkertaisuutensa vuoksi. En ole koskaan ennen tarvinnut syklejä ja olosuhteita tyyleissä. Klassiset apuohjelmat, kuten "box-shadow, linear-gradient, darken", ovat saatavilla VÄHEMMÄSSÄ.

Kyllä, SASS:lle on jo kirjoitettu monia valmiita kirjastoja (