CSS-esiprosessorit vertailivat Sassia verrattuna LESSiin
On olemassa useita CSS Preprocessor, LESS, Sass, Stylus ja Swith CSS, vain muutamia. CSS Preprocessor, Kuten olemme aiemmin sanoneet usein, on ensisijaisesti tarkoitus tehdä CSS: n muuttamisesta dynaamisemmaksi, järjestäytyneemmäksi ja tuottavammaksi. Mutta, kysymys on, mikä niistä tekee työtä parhaiten?
No, tietenkin, emme katsoisi niitä kaikkia, vaan vertaamme vain kahta suosituimmista: Sass ja LESS. Päätämme, että vertaamme kahta seitsemää tekijää: se, joka toimii paremmin, saa yhden pisteen; tasapelissä molemmat saavat yhden pisteen.
Aloitetaanpa.
Asennus
Aloitetaan hyvin perusteellisella askeleella, Asennus. Sekä Sass että LESS on rakennettu erilaiselle alustalle, Sass toimii Ruby-palvelussa, kun taas LESS on JavaScript-kirjasto (jota se on oli todella rakennettu Rubyyn ensiksi).
Sass: Sass tarvitsee Rubyn, jotta se voisi työskennellä, Macissa tämä on asennettu valmiiksi, mutta Windowsissa sinun on todennäköisesti asennettava se ennen kuin voit aloittaa pelaamisen Sassilla. Lisäksi Sass on asennettava terminaalin tai komentokehotteen kautta. Voit käyttää useita GUI-sovelluksia, mutta ne eivät ole ilmaisia.
VÄHEMMÄN: LESS on rakennettu JavaScriptiin, joten LESS on niin helppoa kuin JavaScript-kirjaston liittäminen HTML-dokumenttiin. On myös muutamia GUI-sovelluksia, jotka auttavat LESS: n laatimisessa CSS: ään, ja useimmat niistä ovat ilmaisia ja toimivat hyvin (esim. WinLess ja LESS.app).
johtopäätös: LESS on selvästi johtava.
laajennukset
Sekä Sassilla että LESS: llä on laajennuksia, joiden avulla web-kehitystä voidaan nopeuttaa ja helpottaa.
nenäkkyys: Viimeisessä viestissämme oli keskusteltu Compassista, nykyisestä ja suositusta Sass-pohjaisesta laajennuksesta. Kompassissa on useita Mixins-ohjelmia, joiden avulla CSS3-syntaksia voidaan kirjoittaa vähemmän.
Mutta kompassi on vain CSS3-sekoittimien ulkopuolella, se on lisännyt muita erittäin hyödyllisiä ominaisuuksia, kuten Helpers, Layout, Typography, Grid Layout ja jopa Sprite Images. Siinä on myös config.rb tiedosto, jossa voimme ohjata CSS-lähdettä ja joitakin muita asetuksia. Lyhyesti sanottuna Compass on all-in-one-paketti, jonka avulla Web-kehitystä voidaan tehdä Sassin kanssa.
VÄHEMMÄN: LESSillä on myös useita laajennuksia, mutta toisin kuin kompassilla, jolla on kaikki tarvitsemme yhdessä paikassa, ne erotetaan toisistaan ja kukin niistä on rakennettu eri kehittäjien toimesta. Tämä ei ole ongelma kokeneille käyttäjille, mutta niille, jotka ovat juuri aloittaneet LESS: n kanssa, heidän täytyy valita jonkin aikaa valita oikeat laajennukset, jotka sopivat työnkulkuunsa.
Seuraavassa on muutamia LESS-laajennuksia, jotka sinun on ehkä sisällytettävä projektiisi:
- CSS3-sekoittimet: LESS Elements, Preboot, LESS Mixins.
- ruudukko: 960.gs, Frameless, Semantic.gs
- Layout: Jopa vähemmän
- Muut: Twitter Bootstrap
johtopäätös: Luulen, että meidän on sovittava, että Sass ja Compass on loistava duo ja Sprite-kuvaominaisuus on todella potku, joten yksi kohta Sassille täällä.
Kieli (kielet
Jokaisella CSS Preprocessorilla on oma kielensä ja ne ovat yleensä yleisiä. Esimerkiksi sekä Sassilla että LESSillä on muuttujia, mutta siinä ei ole merkittävää eroa, paitsi että Sass määrittelee muuttujat $ merkki, kun taas LESS tekee sen @ merkki. He tekevät silti samaa: säilytä vakioarvo.
Seuraavassa tarkastellaan joitakin yleisimmin käytettyjä kieliä sekä Sassissa että LESSissä (kokemukseni perusteella).
Pesiä
Pesimissääntö on hyvä käytäntö, jotta vältetään kirjoittimien kirjoittaminen toistuvasti, ja sekä Sass että LESS ovat samalla tavalla pesimissääntöissä;
Sass / Scss ja LESS
nav marginaali: 50px auto 0; leveys: 788px; korkeus: 45px; ul padding: 0; marginaali: 0;
Mutta Sass / Scss ottaa tämän menetelmän askeleen pidemmälle antamalla meille mahdollisuuden myös sijoittaa yksittäisiä ominaisuuksia, tässä on esimerkki:
nav marginaali: 50px auto 0; leveys: 788px; korkeus: 45px; ul padding: 0; marginaali: 0; raja: style: solid; vasen: leveys: 4px; väri: # 333333; oikea: leveys: 2px; väri: # 000000;
Tämä koodi tuottaa seuraavan lähdön.
nav marginaali: 50px auto 0; leveys: 788px; korkeus: 45px; raja-tyyli: kiinteä; reunan vasen-leveys: 4px; vasen-väri: # 333333; raja-oikea leveys: 2px; reunus-oikea väri: # 000000; nav ul pehmuste: 0; marginaali: 0;
johtopäätös: Yksittäisten ominaisuuksien sijoittaminen on mukava lisäys ja sitä pidetään paras harjoitus, varsinkin jos noudatamme DRY (Älä toista itseäsi) -periaatetta. Joten mielestäni on selvää, mitä tässä asiassa tehdään paremmin.
Sekoittimet ja valitsijan perintö
Sinsin ja LESSin sekoittimet määritellään hieman eri tavalla. Sassissa käytämme@Sekoita joukkoon direktiivissä, kun taas LESSissä määritellään se luokanvalitsimella. Tässä on esimerkki:
Sass / SCSS
@mixin border-radius ($ value) border-säde: $ -arvot; nav marginaali: 50px auto 0; leveys: 788px; korkeus: 45px; @ sis. raja-säteen (10px);
VÄHEMMÄN
.raja (@radius) raja-säde: @radius; nav marginaali: 50px auto 0; leveys: 788px; korkeus: 45px; .border (10px);
Sinsissä ja LESSissä olevia Mixins on tottunut sisältää ominaisuudet yhdestä säännöstä toiseen sääntöön. Sassissa tätä menetelmää käytetään edelleen Valitsijan perintö. Käsite on identtinen, mutta koko ominaisuuden kopioinnin sijasta Sass laajentaa tai ryhmittelee selektorit, joilla on samat ominaisuudet ja arvot käyttämällä @extend direktiivi.
Katso alla oleva esimerkki:
.ympyrä border: 1px solid #ccc; raja-säde: 50px; ylivuoto piilotettu; .avatar @extend .circle;
Tämä koodi johtaa kuten;
.ympyrä, .avatar border: 1px solid #ccc; raja-säde: 50px; ylivuoto piilotettu;
johtopäätös: Sass on yksi askel eteenpäin erillisillä Mixinsillä ja Selectors Inheritanceilla.
toiminnot
Sekä Sass että LESS voivat tehdä matematiikan perustoimintoja, mutta joskus ne palauttavat erilaisia tuloksia. Katso, miten ne suorittavat tämän satunnaisen laskennan:
Sass / SCSS
$ margin: 10px; div marginaali: $ marginaali - 10%; / * Syntaksi-virhe: yhteensopimattomat yksiköt: '%' ja 'px' * /
VÄHEMMÄN
@margin: 10px; div marginaali: @margin - 10%; / * = 0px * /
johtopäätös: Sass tekee tässä tapauksessa tarkemmin; koska% ja px eivät vastaa, se palauttaa virheen. Toivon kuitenkin, että se voi olla jotain 10px - 10% = 9px.
Virheilmoitukset
Virheilmoitus on tärkeää nähdäksesi, mitä teemme väärin. Kuvittele tuhansien koodirivien ja pienen virheen hieman kaaoksessa. Selvä virheilmoitus on paras tapa selvittää ongelma nopeasti.
nenäkkyys: Tässä esimerkissä käytän vain komentokehotetta kääntäjän suorittamiseen. Sass tuottaa virheilmoituksen aina, kun koodissa on virhe. Tällöin poistamme yhden puolipisteen rivillä 6, ja sen pitäisi kääntyä virheeseen. Katso alla oleva kuvakaappaus.
Kun näin ensimmäisen ilmoituksen, tuskin ymmärsin sen. Näyttää myös siltä, että Sass on hieman poissa virheestä. Se sanoi, että virhe on päällä rivi 7, sijasta 6.
VÄHEMMÄN: Samassa virhetilanteessa LESS-ilmoitus on esitetty paremmin ja se näyttää myös olevan tarkempi. Katsokaa tätä kuvakaappausta:
johtopäätös: LESS tarjoaa parempaa kokemusta tästä asiasta ja voittaa kädet alas.
Dokumentointi
Dokumentaatio on erittäin tärkeä osa jokaista tuotetta; jopa kokeneille kehittäjille olisi vaikeaa tehdä asioita ilman Dokumentointi.
nenäkkyys: Jos tarkastelemme dokumentaatiota virallisella sivustolla, tunnen olevani henkilökohtaisesti kirjaston keskellä, dokumentaatio on hyvin kattava. Silti ulkoasu, jos se on sinulle tärkeää, ei ole motivoiva lukemiseen, ja tausta on tavallinen valkoinen.
Esitys on paljon enemmän kuin W3-dokumentaatio tai WikiPedia. En tiedä, onko tämä standardi näyttää dokumentaatioita Internetissä, mutta se ei ole ainoa tapa.
VÄHEMMÄN: Toisaalta LESS-dokumentaatio on selkeämpi ilman liian monta tekstiä, ja se sukeltaa suoraan esimerkkeihin. Se on myös hyvä typografia ja parempi värimaailma. Luulen, että tästä syystä LESS herätti huomioni ensinnäkin, ja voin oppia sen nopeammin dokumentaation asettelun ja esittämisen vuoksi.
johtopäätös: LESS-dokumentaation esitys on parempi, vaikka Sassilla on kattavampaa dokumentaatiota, joten luulen, että voimme kutsua tämän yhdeksi.
Lopullinen ajatus
Mielestäni on selvää johtopäätöstä siitä, että Sass on parempi yhteensä 5 vs. 3 vähemmällä. Se ei kuitenkaan tarkoita, että LESS on huono; he tarvitsevat vain parempaa. Loppujen lopuksi loppukäyttäjän päätös on valita haluamasi esiprosessori. Ole se Sass tai LESS, niin kauan kuin ne ovat mukavia ja tuottavampia, niin se on heidän listansa voittaja.
Lopuksi, jos sinulla on jotain asiaa ajatellen, voit vapaasti jakaa sen alla olevaan kommentointiruutuun.
