Hvilken er bedre mindre eller css. LESS vs SASS-forprosessorer: hvilken er bedre å bruke hvor?

Jeg liker SASS-syntaksen mer enn SCSS for sin korthet. Men den massive nesting av stiler i SASS kan raskt eliminere fordelene med kortheten. I alle fall er ikke forskjellen mellom SASS og SCSS grunnleggende. MINDRE viste seg å være nærmere SCSS enn SASS. Og generelt er det det samme. Det er ikke mange forskjeller, men et par av dem endrer maktbalansen fundamentalt.

1. MINDRE - kan klientsiden ved å bruke JS.

Mer presist, det er ikke det han kan, han er designet for dette. Vanlig praksis for bruk av MINDRE kode:

Det var da muligheten til å kompilere på serveren (både js og ruby) ble lagt til den.

Ved første øyekast virker det som en merkelig eiendom. Hvorfor kompilere på klientsiden hvis du kan kompilere perfekt på serveren og servere ferdig komprimert CSS slik vi er vant til med SASS?

Årsaken blir tydelig etter å ha studert de ubestemmelige aller siste linjene i LESS-dokumentasjonen:

@height: `document.body.clientHeight`;

En så liten ensom linje gir muligheter som layoutdesignere bare har drømt om siden begynnelsen av å mestre stiler. Kalle et Java-skript på klientsiden fra CSS og ta hensyn til faktiske nettleserinnstillinger når du lager stiler.

Det vil si at vi nå har muligheten til å først laste inn DOM, og deretter lage spesiell CSS for den direkte på klientsiden. Så tenk selv hvilke muligheter dette åpner for.

Om prosjektet ditt trenger dette er et annet spørsmål. Det er tydelig at alle er vant til klientens usikkerhet/uavhengighet og layout i stil med "vi gjør det universelt slik at det mer eller mindre skal vises til alle ved alle oppløsninger." Men dette er ikke en grunn til å glemme at nå eksisterer en slik mulighet, og med den kan du for eksempel gjøre en veldig fleksibel layout.

2. LESS, i motsetning til SASS/SCSS, har ingen logikk.

Det er ingen hvis/da, for osv. i LESS. Selv om med tanke på at JS enkelt er innebygd i det, tror jeg det er fullt mulig å skru inn logikken. Jeg har ikke prøvd det.

3. Blanding er lettere i LESS + du kan blande klasser.

Jeg likte virkelig det faktum at i LESS kan du inkludere egenskaper til andre klasser i definisjonen. Selve klassen er en blanding. Dette er en annen funksjon som SASS/SCSS ikke har. Du kan inkludere en vanlig CSS-fil i LESS og bruke dens klasser til å definere egenskapene dine. For eksempel:

Pakke inn (
tekst-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
ord-omslag: bryte-ord;
}
pre (.wrap)

Sammendrag

Med unntak av 1. punkt, er forskjellen ikke stor og valget er større for amatøren.

For meg personlig ser LESS mer attraktiv ut på grunn av sin enkelhet. Jeg har aldri trengt sykluser og forhold i stiler før. Klassiske verktøy som "box-shadow, linear-gradient, darken" er tilgjengelig i LESS.

Ja, mange ferdige biblioteker er allerede skrevet for SASS (

1. MINDRE - kan klientsiden ved å bruke JS.

Mer presist, det er ikke det han kan, han er designet for dette. Vanlig praksis for bruk av MINDRE kode:

Det var da muligheten til å kompilere på serveren (både js og ruby) ble lagt til den.

Ved første øyekast virker det som en merkelig eiendom. Hvorfor kompilere på klientsiden hvis du kan kompilere perfekt på serveren og servere ferdig komprimert CSS slik vi er vant til med SASS?

Årsaken blir tydelig etter å ha studert de ubestemmelige aller siste linjene i LESS-dokumentasjonen:

@height: `document.body.clientHeight`;

Det vil si at vi nå har muligheten til å først laste inn DOM, og deretter lage spesiell CSS for den direkte på klientsiden. Så tenk selv hvilke muligheter dette åpner for.

2. LESS, i motsetning til SASS/SCSS, har ingen logikk.

Det er ingen hvis/da, for osv. i LESS. Selv om med tanke på at JS enkelt er innebygd i det, tror jeg det er fullt mulig å skru inn logikken. Jeg har ikke prøvd det.

3. Blanding er lettere i LESS + du kan blande klasser.

Pakke inn (
tekst-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
ord-omslag: bryte-ord;
}
pre (.wrap)

Sammendrag

Med unntak av 1. punkt, er forskjellen ikke stor og valget er større for amatøren.

Ja, mange ferdige biblioteker er allerede skrevet for SASS (

Fra forfatteren: Først av alt, hva er en forprosessor? Kort fortalt er en forprosessor et program som modifiserer data for å passe inndatakravene til et annet program. CSS-forbehandlere er skriptspråk, utvider egenskapene til konvensjonelle CSS-variabler, hekkeregler, funksjoner og logiske blokker.

Hvorfor skal jeg bruke det?

Ofte vil du komme i en situasjon hvor du må bruke samme verdi for en bestemt eiendom i forskjellige steder. For eksempel spesifiserte du først rødt som hovedfargen på nettstedet. Da må du endre den til grønn.

Med variabler trenger du ikke å søke og erstatte hver omtale av rødt i stiler. Du definerer verdien av en variabel én gang, for eksempel "primærfarge", og bruker deretter den variabelen som verdi.

Den primære fargeverdien endres på ett sted. Du kan også importere CSS-filer fra andre kilder uten å bekymre deg for antall nettverksforespørsler, siden de alle kan kombineres til én fil før kompilering.

Takket være den nestede naturen til CSS-forprosessorer, får du kompakt kode med samme resultat. LESS og SCSS er basert på DRY-prinsippet, som står for "Ikke gjenta deg selv" eller "ikke gjenta deg selv."

Forbehandlere. Rask start

Hva er galt med LESS?

Nettverket er allerede fullt av diskusjoner om hva som er bedre: MINDRE eller SCSS. Derfor vil jeg ikke dekke begge temaene i detalj. I stedet skal jeg snakke om de små problemene jeg hadde med LESS.

SCSS bruker $-symbolet for å definere variabler, mens LESS bruker @-symbolet. Siden CSS også bruker @-symbolet for mediespørringer, importer og keyframe-animasjoner, kan dette være forvirrende for utviklere.

$-symbolet brukes ikke i CSS. @-symbolet finnes i SCSS, men det brukes for @if , @else , @each , @for og @while-direktivene.

Selv om dette scenariet ikke er realistisk for alle, er det bedre å bruke forskjellige ID-er for å skille elementer.

SCSS støtter tradisjonelle logiske uttrykk som if/else, blokker og løkker. Guarded mixins i LESS er lettere for øyet, men vanskeligere å forstå.

Kan gjøres med MINDRE...

...eller bare bruke SCSS.

LESS definerer kun én bevoktet blanding. Derfor kan du ikke bare sende et andre argument og behandle det i samme mixin, duplisere koden for alle mulige scenarier. Faktisk er MINDRE (mindre) mer (ordspill ment).

Jeg vet at det er mulig å forkorte koden ved å bruke utvidede verdier som egenskapsnavn for dette tilfellet, men problemet er at jeg ikke kan betinget kartlegge to forskjellige deler av samme miks til LESS.

Det er mer hodepine med denne koden...

Forbehandlere. Rask start

Lær det grunnleggende om bruk av Less og Sass forprosessorer med fullstendig null på mindre enn 2 uker

...enn med dette.

For å oppnå samme resultat med MINDRE, måtte jeg forhåndsdefinere alt, skrive en mixin, hente indeksposisjonen, iterere den med logikken min til indeksverdien er lik null, og ring miksingen manuelt.

Selv om dette er min personlige mening, tror jeg SCSS generelt håndterer beregningsverdier og matematiske verdier bedre.

Hva er galt med det?

LESS er derimot mye mer komplekst. For eksempel, når jeg bruker det, prøver jeg ikke å gjøre beregninger. Men selv om jeg gjorde det, siden når tilsvarer 100% minus 50px 50%?

MINDRE, hvorfor ignorerer du verdier med endringsenheter?

Hvorfor får du meg til å lære krykkene dine når jeg allerede kan CSS?

Og en siste ting. Takket være LibSass-prosjektet har SCSS mange wrappers for andre språk, som C, Go, PHP, Python, Dart, etc.

Hvorfor bestemte vi oss for å forlate LESS til fordel for SCSS?

Mens vi utviklet JotForm-kort, trengte vi å forhåndsbehandle variabelverdier - forhåndskompilering og server-side caching på samme tid; og alt dette måtte gjøres perfekt.

Vi ønsket at brukerne skulle kunne tilpasse utseende skjemaer Slik at eventuelle endringer umiddelbart og samtidig vises og bufres på serveren. Av hensyn til brukerne våre ønsket vi ikke å kjøre et MINDRE klientskall fordi det ville kreve datakraft klient - og mye kan gå galt.

Vi startet ikke utviklingssyklusen med mål om å gå fra LESS til SCSS. Men halvveis i håndteringen av disse mindre problemene, var mangelen på en anstendig innpakning for LESS siste dråpen.

Forskjellene mellom LESS og SCSS er imidlertid mindre viktige enn det de har til felles. Til syvende og sist spiller det ingen rolle hvilken forprosessor du bruker, så lenge du bruker den.

Prøver å administrere et stort prosjekt med én CSS-fil og tradisjonell CSS-struktur mye vanskeligere enn å bruke en forprosessor med et par problemer.

Jeg skrev mye i I det siste om Sass, men fra noen nylige kommentarer innså jeg at ikke alle har en klar ide om hva Sass er. La oss være litt klarere:

Når vi snakker om Sass, mener vi vanligvis forbehandleren og språket som helhet. Vi sier for eksempel "vi bruker Sass", eller "her er en Sass-blanding".

I mellomtiden tillater Sass (forprosessoren) to forskjellige syntakser:

Sass, også kjent som innrykket syntaks;
SCSS, CSS-lignende syntaks.

Historie

Sass var opprinnelig en del av en annen forprosessor, Haml, som ble oppfunnet og skrevet av Ruby-utviklere.

Så Sass-stiler brukte en Ruby-lignende syntaks, ingen parenteser, ingen semikolon og ingen streng innrykk, som dette:

// Variable!primary-color= hotpink // Mixin =border-radius(!radius) -webkit-border-radius= !radius -moz-border-radius= !radius border-radius= !radius .my-element color= !primærfargebredde= 100 % overløp= skjult .my-other-element +border-radius(5px)

Som du kan se, sammenlignet med vanlig CSS forskjellen er merkbar! Selv om du er en Sass (forprosessor) bruker, kan du se at dette er veldig forskjellig fra det vi er vant til.

En variabel er merket med ! , ikke $ , verditilordningssymbol = , ikke : . Ganske uvanlig.

Men slik så Sass ut frem til versjon 3.0, utgitt i mai 2010, som introduserte en helt ny syntaks kalt SCSS eller Sassy CSS.

Målet hans var å bringe Sass-syntaksen nærmere CSS, noe som gjør den mer kompatibel med CSS:

// Variabel $primærfarge: hotpink; // Mixin @mixin border-radius($radius) ( -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; ) .my-element (farge: $primary -color; width: 100%; overflow: hidden; ) .my-other-element ( @include border-radius(5px); )

SCSS er definitivt nærmere CSS enn Sass. Sass-utviklerne jobbet hardt for å gjøre begge syntaksene nærmere hverandre ved å erstatte ! (variabelt tegn) og = (oppdragstegn) på $ og: fra CSS.

Så når du starter et nytt prosjekt, lurer du kanskje på hvilken syntaks du skal bruke. La meg dekke dette emnet og forklare fordelene og ulempene ved hver syntaks.

proffer Sass syntaks innrykket

Selv om denne syntaksen kan virke litt rar for deg, har den flere interessante øyeblikk. For det første er den kortere og lettere å skrive. Det er ingen parenteser eller semikolon, de er ikke nødvendige.

Enda bedre! Den trenger ikke @mixin eller @include når et enkelt symbol: = og + er nok.

Sass-syntaks gir også rene kodestandarder på grunn av bruken av innrykk. Siden feil innrykk kan bryte hele .sass-stilarket, er det første trinnet her å sikre at koden er ren og riktig formatert.

Det er bare én måte å skrive Sass-kode på: skriv den riktig.

Men vær forsiktig! Innrykk har en boolsk verdi i Sass. Når en velgerblokkinnrykk brukes, betyr det at det er en nestet velger.

For eksempel:

Element-a farge: hotpink .element-b float: venstre ... gir følgende CSS-kode: .element-a ( farge: hotpink; ) .element-a .element-b ( float: venstre; )

Det enkle faktum å flytte .element-b ett nivå til høyre betyr at det er det barneelement fra .element-a , som endrer den resulterende CSS-koden. Så vær forsiktig med innrykk!

Som en utenforstående tror jeg at en innrykk-basert syntaks sannsynligvis vil appellere mer til et team som primært jobber med Ruby/Python enn et team med PHP/Java-programmerere (selv om jeg gjerne vil høre meninger om det motsatte).

Fordeler med SCSS-syntaks

For det første er den fullstendig CSS-kompatibel. Dette betyr at du kan gi nytt navn CSS-fil i .scss og det vil fungere som om ingenting hadde skjedd.

Å gjøre SCSS fullt kompatibel med CSS har alltid vært en prioritet for Sass-støtte siden utgivelsen av SCSS, og etter min mening er dette et sterkt poeng.

I tillegg prøver de å holde styr på hva som kan bli gyldig CSS-syntaks i fremtiden, og implementere det (derav @direktiver ).

Siden SCSS er kompatibel med CSS, krever det praktisk talt ingen ekstra opplæring. Syntaksen er stort sett den samme: det er tross alt bare CSS med noen ekstra.

Dette er viktig for nye utviklere slik at de raskt kan begynne å kode uten å vite så mye om Sass.

Den er også mer lesbar siden de spesifikke konstruksjonene allerede gir mening. Når du ser @mixin, vet du at det er en mixin-erklæring; når du ser @inkludere, vet du at det er et mixin-kall.

Det er ingen bindinger og alt gir mening uten tolkning.

Også nesten alt eksisterende verktøy, plugins og demoer for Sass er utviklet ved hjelp av SCSS-syntaks. Denne syntaksen blir mer og mer orientert mot profesjonelle og velges av dem som standard (hvis det ikke er den eneste mulige).

Hovedsakelig på grunn av grunnene nevnt ovenfor. For eksempel blir det stadig vanskeligere å finne fremheving for ren Sass-innrykket syntaks; generelt er bare alternativer for SCSS-bakgrunnsbelysning tilgjengelig.

Konklusjon

Valget er ditt uansett, men med mindre du har en virkelig overbevisende grunn til å bruke innrykket syntaks, vil jeg sterkt anbefale å bruke SCSS over Sass. Det er ikke bare enklere, men også mer praktisk.

Jeg prøvde innrykkssyntaksen en gang og likte den. Spesielt dens korthet og enkelhet. Jeg var i ferd med å flytte all arbeidskoden min til Sass, men i siste øyeblikk ombestemte jeg meg.

Jeg er glad jeg ikke tok dette trinnet fordi jeg nå ville ha en veldig vanskelig tid å jobbe med noen verktøy hvis jeg brukte den innrykkede syntaksen.

Vær også oppmerksom på at Sass aldri forkortes fra store bokstaver, uavhengig av om det er en syntaks eller et programmeringsspråk. Mens SCSS alltid er angitt med store bokstaver. Vil du vite hvorfor? Sjekk ut SassnotSASS.com!

Oversettelsen av artikkelen "Hva er forskjellen mellom Sass og SCSS" ble utarbeidet av det vennlige prosjektteamet