Laiskus on progressi mootor. Hea näide- DRY põhimõte - Ärge korrake ennast, ma kahtlustan, et te järgite seda põhimõtet, kui teete kujundusi või mida iganes te seal teete. Olen ka väga kindel, et püüdsite oma igapäevast rutiini automatiseerida Töötage natuke. Samuti võib esineda olukordi, kui kasutate mõnda elementi uuesti.
Niisiis... CSS on rumal stiilileht. Valija ja stiilid, siin ei saa midagi liiga tarka välja mõelda. Umbes 5-10 aastat tagasi oli üsna moes hoida ühte megapaksust 10K+ reaga CSS-faili ja nautida elu tehes aina rohkem muudatusi jne. Seega, isegi kui järgite kõiki modulaarse paigutuse reegleid ja kõike seda, on teil mitmeid probleeme:
- stiilide korraldamine, st kõike ühes failis hoidmine pole mugav, eriti kui projekt kestab aastaid
- Dubleerivad stiilid ja valijad. Projekti arenedes ilmuvad mõned katkendid, mida saab uuesti redigeerida. Samuti võite saada palju sarnaseid valijaid, mis erinevad vaid veidi. Modulaarsete lähenemisviiside korral toimub pesastumine harva, kuid siiski. Kuid ärgem unustagem, et enamik inimesi kasutab selektoreid ilma põhjuseta. Selle tulemusena, kui me ploki teisaldasime või ploki klassi ümber nimetasime, peame muutma palju valijaid.
- Suuruste ja parameetrite sidumine teiste stiilidega, näiteks on sul stiilides määratud ploki laius, sellest sõltuvad muud parameetrid, teiste plokkide taanded jne. Jah, selle jaoks ilmus css3-s calc, aga see oli suhteliselt hiljuti ja alles hiljuti saab seda asja peaaegu kartmatult kasutada.
- Stiilitabelid, nagu HTML, on mõeldud selle kraami mugavaks sõelumiseks masina, kuid mitte inimese poolt. Inimene on laisk olend ja on kuidagi liiga laisk, et panna lisasulgu või semikoolon. Lihtsalt laisk.
Samuti on olemas hea reegel, või idee, kui tahad.... Kui kood on genereeritav, on parem see genereerida. See tähendab, et kõigi ülaltoodud probleemide lahendamiseks leiutati eelprotsessorid. Need nagu oleks enne kõiki neid scss/less/stylus olemas olnud, aga millegipärast ei lahendanud nad kõiki probleeme jne. Mis lõpuks välja pakuti (loetlen selle samas järjekorras nagu ülaltoodud loendis).
- CSS-is on see asi nimega @import. Kuid pole väga lahe importida tootmisse sada stiili. Projekti kokkupanemisel tasub jälgida, et kõik stiilid oleksid kokku liimitud. See idee arenes lõpuks välja ja kui arendaja kasutab seda asja õigesti, võite minna mis tahes stiilidega faili ja vaadata loendit kõigest, millest need stiilid sõltuvad. Millised stiilid on kaasatud jne. Lisaks saab ühe sõltuvustega faili lisada mitmesse faili ning eeltöötleja ise mõtleb välja, kuidas ja kuhu kõik sisestada, genereerides faili, mille struktuur on maksimaalselt optimeeritud. Ja arendaja sai selge failistruktuuri ja võimaluse kiiresti leida, kus kõik sõltub millest.
- Selektoritega soovitasid nad probleemi lahendada kõige loogilisema variandiga. Kui meil on pesastatud valijad, siis on mõistlik need määratleda selles selektoriplokis. See lihtsustab oluliselt stiili toetamist. Samuti lisati snippide ja muude asjade haldamiseks mixinid - need on funktsioonid, kas parameetritega või mitte, mis sülitavad CSS-i asju välja. Enne selliste asjade ilmumist nagu autoprefikser, oli see nii ainus viis kirjutage toetatud stiile, kasutage CSS3 maiustusi ja üldiselt uusi maiuspalasid ning ärge olge eesliidetega hulluks läinud. Eesliited on vaid näide, võib olla mitmesuguseid asju, mis võimaldavad teil stiile asjatundlikult ümber pöörata
- Üksteisest sõltuvate stiiliväärtuste probleem lahendati... tegelikult kõige rohkem ilmsel viisil- muutujad. See on mugav, hõlpsasti hooldatav ja võimekates kätes võimas tööriist. Peate muutma põhivärve - te ei pea ronima 100 500 plokki ja redigeerima väärtusi käsitsi, saate muuta muutujaid ja kõik saab korda.
- Minu mäletamist mööda ei püüdnud SCSS/LESS seda probleemi lahendada. Mõned lahendused kujunesid aja jooksul ise välja. Minimalismi ja väljendusrikkuse poolest on ehk praegu kõige lahedam pliiats.
Mis lõpuks juhtus. Ühel hetkel tulid mõned rubiinid välja SCSS-iga (neile üldiselt ei meeldi midagi, mis pole minimalismi ja väljendusrikkuse poolest rubiinstiilis). Siis mõtlesid poisid ja ütlesid, et SCSS on lahe, aga millegipärast kasutavad nad Ruby arendajatele tuttavat süntaksit, mitte tavalisi CSS-i konstruktsioone. Selle tulemusena realiseeriti LESS ja see oli juba javascriptis juurutatud, mis võimaldas node.js olemasolul kogu selle kraami teisele platvormile koguda. Ja kuna eeltöötlejad juba selle platvormi jaoks tootsid, sobis see hästi.
Isiklik arvamus. Täna ei näe ma kasutamisel mõtet puhas CSS olgu see siis väikeste või suurte projektide puhul. Mitte ükski.
Kuni mul oli paar kuud tagasi huvitav olukord. CSS pole minu jaoks kunagi probleemiks olnud (kuigi selles pole üldse midagi keerulist), kuid mind inspireeris idee kasutada muutujaid, et luua mallide ja veebisaitide jaoks midagi nagu värvivalija read. Fikseeritud arvu valikutega palett aitab vältida värvide segunemist ja valitud stiilist eristumist.
Kuidas sa tead, milleks LESSi kasutada ja milleks Sassi? Põhimõtteliselt on nad üksteisega üsna sarnased. Vaatame neid Üldised omadused:
* Mixins – tunnid klassidele.
* Parameetrilised miksinid – klassid, millele saab rakendada funktsioonitüübi parameetreid.
* Pesastatud reeglid – klassid klassides, mis katkestavad korduva koodi.
* Operatsioonid – matemaatika CSS-is.
* Värvifunktsioonid – värvide redigeerimine.
* Nimeruumid – stiilide rühmad, mida saab linkide kaudu kutsuda.
* Ulatus – töö kohalikud muutused stiilides.
* javascripti hindamine – CSS-is määratletud javascripti avaldised.
Peamine erinevus LESSi ja Sassi vahel on nende valmistamise viis. VÄHEM – sisse javascripti raamatukogu ja vastavalt sellele teeb tööd kliendi poolel.
Sass omakorda juhib Rubyt ja jookseb edasi serveri pool. Paljud arendajad ei kasuta VÄHEM, kuna JavaScripti mootoril kulub koodi töötlemiseks kauem aega, mille tulemusel muudetakse brauseri CSS-i. Toimimisviise on mitu. Kasutan seda siis, kui LESS-i kasutatakse ainult arendusprotsessi käigus. Kui olen valmis, kopeerin ja kleebin VÄHEM saadud tulemuse koodi reduktorisse ja seejärel sisse eraldi CSS-fail, mis tuleks lisada VÄHEM failide asemel. Teine võimalus on kasutada failide kompileerimiseks ja minimeerimiseks LESS-i. Mõlemad meetodid vähendavad teie stiilide polsterdamist ja aitavad vältida probleeme, mis võivad tekkida, kui kliendi brauser ei toeta JavaScripti. Seda juhtub harva, kuid seda võimalust ei saa välistada.
Palun kaaluge ka seda Adam Stacoviaki arvustust, mis on kirjutatud pärast seda, kui Smashing Magazine'i artikkel oli Twitteris tihedalt arutletud: „Tegelikult nõuab Sass Rubyt, kuigi seda pole vaja serveris CSS-dokumendiks kompileerida. Seda saab kompileerida kohapeal (nagu on öeldud jaotises LESS) ja seda kompileeritud faili saab teisaldada koos teie projekti, WordPressi malli, Expression Engine'i ja nii edasi. Kuna see on Smashing Magazine ja kasutajaskond on väga erinev, arvan, et paljud teist kasutavad Maci. Seega on Ruby kõigi Maci masinate vaikeseade, nii et see on lihtne Sass paigaldus võimaldab teil kohe alustada.
Kui olete Sassi installinud, saate selle kohapeal CSS-iks teisendada ja koodi oma projektiga saata, nagu ma juba kirjeldasin. Kui te pole kindel, kuidas Sassi (või Compassi) kasutamist alustada, oleme sellest piisavalt kirjutanud üksikasjalik juhend nimega " "(Sassi või Compassi kasutamise alustamine)". Täname kõik koos Adamit!
Vähem rohkem!
Paigaldamine
LESS-i on üsna lihtne rakendada igas projektis, mille kallal töötate:
Muutujad
Kui olete arendaja, on muutujad tõenäoliselt teie parimad sõbrad. Kui teil on vaja sama teavet (nt värvi) mitu korda kasutada, on muutuja määramisel tohutu erinevus. Nii garanteerite endale dokumendi sidususe ja vabastate end pidevast dokumendi kerimisest soovitud kuueteistkümnendväärtuse otsimisel, et see kopeerida ja uues elemendis kasutada. Võite isegi lõbutseda kuueteistkümnendväärtuste lisamisega või välistamisega, mida peate genereerima. Võtame see näide:
@sinine: #00c;
@light_blue: @sinine + #333;
@tume_sinine: @sinine - #333;
Kui rakendame need stiilid kolmele divile, saame gradatsiooniefekti, mis luuakse väärtuste lisamisel ja lahutamisel loomulikust sinisest ja sellest:
Üleminek @light_blue-lt @sinisele @dark_blue-le.
Ainus erinevus LESS ja Sass muutujate vahel on see, et LESS kasutab "@" ja Sass kasutab "$". On ka teisi erinevusi, kuid neid pole nii raske õppida.
Segud
Võimalusel saame luua stiili, mis on mõeldud taaskasutamiseks samas laaditabeli dokumendis. Keegi ei keela teil kasutada mitut klassi ja rakendada neid HTML-i elementidele, kuid saate seda teha ka CSS-dokumenti sulgemata. Peate lihtsalt VÄHEM kasutama. Selle demonstreerimiseks olen lisanud koodi, mis võimaldab teil lehel kahte elementi stiilida.
Piir (
border-top: 1px punktiir #333;
}
article.post(
taust: #eee;
.piir;
}
ul.menüü (
taust: #ccc;
.piir;
}
Lõppkokkuvõttes saate midagi sarnast sellele, mida lootsite saada, minnes tagasi oma HTML-dokumendi juurde ja lisades mõlemale elemendile klassi ".bordered". Kuid oluline on märkida, et rakendasite selle ilma CSS-i dokumenti sulgemata. See toimib järgmiselt:
Nii artiklitel kui ka järjestamata loendil on ääriste stiil.
Sassiga kuulutate "@mixin" stiiliprioriteediks, et määratleda see mixinina. Järgmisena deklareerite selle kutsumiseks "@include".
@mixin border (
border-top: 1px punktiir #333;
}
article.post(
taust: #eee;
@include border;
}
ul.menüü (
taust: #ccc;
@include border;
}
Parameetrilised segud
Sarnaselt sellele, kuidas te CSS-is funktsioone kasutate, seda funktsiooni võib olla eriti kasulik neile, kes soovivad näiliselt kasutada piiramatud võimalused kaasaegne CSS. Parim ja kasulik näide selle kasutamine kehtib paljude brauseri müüja eesliidete kohta, mida kohtame üleminekul CSS2-lt CSS3-le. Jeffrey Way välja antud Nettuts+, mis sisaldab detailne info täielikult kasulikest parameetrilistest segudest koosneva faili rakendamise kohta. Artikkel hõlmab teie lemmik-CSS3-suvandeid koos müüja eesliidetega. Näiteks lihtne mikser erineva kujuga ümarate nurkade juhtimiseks:
Border-radius(@raadius: 3px) (
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
IN sel juhul, on klassi ".border-radius" raadius vaikimisi 3 pikslit, kuid saate sisestada mis tahes väärtuse ja saada ümarad nurgad. Näiteks ".border-radius(10px)" ümardab nurki 10 piksli võrra.
Sassi süntaks on väga sarnane LESS-iga. Lihtsalt kasutage muutujate jaoks "$" ja kutsuge mixinid, kasutades "@mixin" ja "@include" meetodeid, mida ma varem mainisin.
Valija pärimine
Vaatame midagi, mida LESSil ei ole. Selle funktsiooni abil saate rakendada valija varem seatud valijale, ilma et peaksite kasutama komadega eraldatud vormingut.
Menüü (
ääris: 1px tahke #ddd;
}
Jalus (
@extend .menu;
}
/* renderdab nii: */
.menu, .footer (
ääris: 1px tahke #ddd;
}
Pesastatud reeglid
Klasside ja ID-de hargnemine CSS-is on tõenäoliselt Parim viis kaitsta oma kaskaadlaadilehti segamise eest või vastupidi, suunata need suhtlema teiste lisatud tabelitega. Kuid see lähenemisviis võib sageli hõlmata palju koodi. Kasutades selektorit nagu “#site-body .post .post-header h2”, saame väga kena välimusega koodi, mis võtab üsna palju ruumi. LESS-iga saate hargneda ID-sid, klasse ja elemente, nagu soovite. Kasutades ülaltoodud näidet, saate teha midagi sellist:
#site-body ( ...
Järelpäis (...
&:külastatud ( … )
&:hõljuma ( … )
}
}
}
}
Ülaltoodud kood on absoluutselt identne eelmises lõigus mainitud inetu valijaga, kuid seda on palju lihtsam lugeda ja mõista ning see võtab palju vähem ruumi. Samuti saate elemente stiilida, et viidata nende pseudoelementidele, kasutades "&" - sel juhul on see funktsioon sarnane JavaScripti "this"-ga.
Operatsioonid
See on umbes see, mida ootate: täpsete arvude või muutujate kasutamine matemaatilised tehted stiilides.
@base_margin: 10px;
@double_margin: @base_margin * 2;
@full_page: 960px;
@half_page: @full_page / 2;
@kvartal_leht: (@full_page / 2) / 2;
Muide, ma tean, et võin ka elemendid 4-ga jagada ja saada tüüpi muutujad"@quarter_page", kuid ma tahaksin näidata, et sulgude reegel sobib ka siin. Sulud on nõutavad ka siis, kui soovite parameetri piires toimingu sooritada. Näiteks "ääris: (@width / 2) solid #000".
Sass on numbrite osas palju mitmekülgsem kui LESS. See oli sisse ehitatud teisendustabelitesse, et kombineerida võrreldavaid ühikuid. Sass suudab töötada ja tuvastada määratlemata mõõtühikuid. See vara võeti kasutusele, et teha kindlaks raamatukogu asjakohasus W3C tehtud muudatuste suhtes.
/* Sass */
2 tolli + 3 cm + 2 tk = 3,514 tolli
/* VÄHEM */
2 tolli + 3 cm + 2 tk = viga
Värvide funktsioonid
Mainisin varem, kuidas LESS mind minuga aitab värviskeem koodi kirjutamise protsessis. Sellega on lahutamatult seotud ka lillede funktsioon. Oletan, et kasutate tavalist Sinine värv kogu oma stiilidokumendis ja soovite seda värvi rakendada oma vormi esitamisnupule. Saate avada Photoshopi või mõne muu redaktori, et saada sealt kuueteistkümnendväärtus (veidi heledama või tumedama värvi puhul). Või võite lihtsalt kasutada VÄHEM pakutavat värvide funktsiooni.
Esita (
polsterdus: 5px 10px;
ääris: 1px tahke @sinine;
taust: -moz-linear-gradient(top, lighten(@blue, 10%), @blue 100%); /*Moz*/
taust: -webkit-gradient(lineaarne, keskel üleval, keskelt alt, from(helenda(@sinine, 10%)), color-stop(100%, @sinine)); /*Webkit*/
taust: -o-lineaarne-gradient(ülemine, heledamaks(@sinine, 10%) 0%, @sinine 100%); /*Ooper*/
taust: -ms-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*IE 10+*/
taust: lineaarne gradient(ülemine, heledamaks(@sinine, 10%) 0%, @sinine 100%); /*W3C*/
värv: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0,4);
}
Funktsioon "Heleda" muudab värvi sõna otseses mõttes heledamaks protsendiskaalal. Sel juhul muudab funktsioon põhisinist heledamaks 10%. See meetod võimaldab muuta gradueeritud elementide ja muude sama värvi elementide värvi, muutes lihtsalt põhivärvi enda. See võib pakkuda teile kliirensiprotsessis märkimisväärset jõudu. Lisaks, kui kasutasite parameetrilist funktsiooni (nagu ülalkirjeldatud), saate oma brauseri eesliiteid lihtsamaks muuta, muutes need näiteks ".linear-gradient(lighten(@blue), @blue, 100%) ;".
Teisest küljest saate päris kena efekti:
Nii saime muutujal põhineva kauni gradueeritud nupu Esita.
Värvide tumedamaks muutmiseks või värvi muutmiseks, samuti värviratta pööramiseks muudele värvidele on ka teisi värvifunktsioone. Soovitan teil neid proovida, et teada saada, millised funktsioonid on teile kõige kasulikumad.
Tingimused ja kontroll
Veel üks üsna kasulik asi, mida pakutakse VÄHEM. Sassiga saate kasutada nii if ( ) else ( ) tingimustingimusi kui ka ( ) silmuseid. See toetab operaatoreid "ja", "või" ja "mitte", aga ka "", "=" ja "==".
/* Sassi "if" lause näidis */
@if heledus($värv) > 30% (
taustavärv: #000;
) @else (
taustavärv: #fff;
}
/* Sassi "for" tsükli näidis */
@for $i 1px kuni 10px (
.border-#(i) (
ääris: $i soliidne sinine;
}
}
Nimeruumid
Nimeruume saab kasutada CSS-koodile teise kihi lisamiseks, mis võimaldab meil luua tavaliselt kasutatavate stiilide rühmi ja seejärel need käigult valida. Näiteks kui lõime stiilide rühma nimega "vaikeväärtused", saame sellest rühmast valida, mida vajame teatud elemendi töötlemiseks.
#defaults (
.nav_list() (
loendi stiil: puudub;
marginaal: 0; polsterdus: 0;
}
.button() (…)
.tsitaat () ( … )
}
Järgmiseks, kui me oma koodis kohtame elemendi "nav" sees elementi "ul", teame, et vajame vaikestiili. Seega saame seda hõlpsalt rakendada.
Navul (
#defaults > .nav_list;
}
Reguleerimisala (raame on arvesse võetud)
Piiride arvestamine programmeerimisel on norm, seega on see sama norm VÄHEM. Kui defineerite muutuja kaskaadlaadilehe juurtasemel, on see saadaval kogu dokumendile. Kui aga alistate muutuja ja lisate selle id või klassi valijale, on see saadaval ainult selle väärtusega selles valijas.
@värv: #00c; /* sinine */
#header (
@värv: #c00; /* punane */
Ääris: 1px ühevärviline @color; /* on punase äärisega */
}
#footer (
ääris: 1px ühtlane @värv; /* on sinise äärisega */
}
Kuna me deklareerisime muutuja uuesti valijas „#header”, on sellele muutujale eelnev väärtus erinev ja see on rakendatav ainult selles valijas. Kõik enne või pärast seda säilitab algse deklaratsiooni tähenduse.
Sassi ulatust tehakse veidi teisiti. Kui muutuja "@color" muudetakse ülaltoodud koodis punaseks, tõlgendatakse seda nii, nagu see on koodis.
Kommentaarid
See osa on üsna lihtne. Väljas LESS on kaks kehtivat kommentaaritüüpi. Standardne CSS-i kommentaar “/* kommentaar */” on kehtiv ning seda töödeldakse ja seejärel esitatakse. Üherealised kommentaarid "//kommentaar" töötavad ka, kuid neid ei kajata ega väljastata. Seetõttu võib neile anda sildi "vaikiv".
Import
Ka import on üsna standardne. Standardne "@import: "klassid.vähem";" töötab päris hästi. Kui aga impordite mõne muu VÄHEM faili, on faililaiend valikuline. Seega "@import "klassid";" töötab ka hästi. Kui soovite importida midagi ilma töötlemisetapita VÄHEM, võite kasutada .css-laiendit (näiteks "@import: "reset.css";").
Stringi interpolatsioon
Stringandmeid saab kasutada ka muutujatena ja kutsuda stiili sees, kasutades "@(nimi)".
@base_url = "http://coding.smashingmagazine.com";
background-image: url("@(base_url)/images/background.png");
Põgenemine
Mõnikord peate lisama väärtuse, mis CSS-i süntaksis ei kehti või mida LESS ei tunne. Sageli tekib selline olukord siis, kui Microsofti toodete rakenduse töö normaliseerimiseks on vaja rakendada mingit häkki. Vigade ja VÄHEM krahhi vältimiseks peate need välistama.
klass(
filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
}
/* Väljastatakse tegelikult järgmiselt: */
.class(
filter: progid:DXImageTransform.Microsoft.Alpha(läbipaistmatus=20);
}
javascripti hindamine
See on üks minu lemmikosadest LESS-iga töötamise kohta: JavaScripti stiilides on nii lihtne kasutada. Saate kasutada avaldisi ja viidata ka arenduskeskkonna funktsioonidele, kasutades tagasimärki (`).
@string: `"tervist".UpperCase()`; /* @string muutub "HOWDY" */
/* Sa saad kasutage ka eelnevalt mainitud interpolatsiooni: */
@string: "tere";
@var: ~`"@(string)".topUpperCase()`; /* muutub "HOWDY" */
/* Siit pääseme osale dokumendist */
@height = `document.body.clientHeight`;
Väljundi vormindamine
Kuigi LESS-il pole väljundvalikuid, pakub Sass 4 väljundversiooni: hargnenud, kompaktne, tihendatud ja laiendatud.
Alumine joon
Neil kahel suurel raamatukogul on palju sarnasusi. Mõlemad on suurepärased tööriistad disaineritele, kes koodi arendavad, ning aitavad ka arendajatel tõhusamalt ja kiiremini töötada. Kui olete Ruby või HAMLi fänn, siis Sass on kindlasti teie jaoks. Mis puudutab mind (ja mina PHP arendaja ja javascript), jään VÄHEM, kuna seda on palju lihtsam integreerida ja ka JavaScripti väljenditele ja dokumendiatribuutidele juurde pääseda. Kahtlen, kas ma olen stiilitabelite kujundamisel kunagi tõsiseltvõetavaid programmeerimisoskusi kasutanud, kuid arvan, et see on proovimist väärt. Kui olete mõlemat raamatukogu kasutanud, siis kuulen hea meelega teie mõtteid ja nõuandeid! Meie ressurss võtab alati hea meelega kommentaare!
Millised on eeltöötleja peamised ülesanded ja milline neist valida: SASS või LESS, arutame selles artiklis. Kõigepealt peate määratlema eelprotsessori - mis see on? See on tööriist või tööriist, mis muudab teatud koodi, muutes seda erinevate võimaluste kaudu. Protsessori sisend on kood, mida kirjeldavad erinevad süntaktilised struktuurid. Need kujundused on arusaadavad ainult selle instrumendi jaoks. See võib asendada mitmesuguseid keerukaid keelekonstruktsioone või vastupidi lisada uusi. Programmi väljund on kood rohkem kui Madal kvaliteet eemaldatud struktuuridega.
Mõiste eeltöötleja paremaks mõistmiseks vaatame näidet. Selle programmi sisendiks on kood, mis sisaldab erinevaid sõnu, ülesandeid, komasid ja punkte. Kui on olemas asendusfunktsioon märksõna selle lühivormis ehk lühendina täisnimele, siis on väljundiks laiendatud tähistusega lause. See on kõige primitiivsem arusaam sellest, mis on eelprotsessor. Põhimõtteliselt sisaldab see keerukamaid käske ja võimalusi.
Seega pakub see programm erinevaid kujundusi, et lihtsustada ja kiirendada arendustegevust ning stiili toetada.
Tavaliselt on kood suunatud inimese omadustele:
Samuti seisavad programmeerijad eelprotsessorite kaalumisel silmitsi süntaktilise suhkru kontseptsiooniga. Need on mõned programmeerimiskeele täiendused, mis ei mõjuta võimendust. lisafunktsioonid, kuid parandab loetavust.
Peamised tüübidLevinumad valikud on LESS, SASS ja Stylus. Niisiis, nagu juba eespool määratletud, on selliste tööriistade kasutamise eelisteks teksti sisu, struktuuri ja tootlikkuse parandamine. Kuid vähesed arendajad kasutavad selliseid programme oma töös, kuna nende arvates on nendega töötamine keeruline ja paljud funktsioonid pole selged.
Programm on selles probleemis kõige populaarsem. See programm töötati välja 2009. aastal programmeerijate meeskonna poolt. Sellel on kõik funktsioonid sisse lülitatud algtase. Peamine puudus on puudumine tingimuslikud konstruktsioonid ja tsiklid. Peamine eelis sellest instrumendist– see on selge ja hõlpsasti kasutatav, see funktsionaalsust saab laiendada erinevate pluginatega.
Süntaktiliselt vinged stiililehed
SASS on kõige võimsam eelprotsessor. Selle töötas välja terve meeskond programmeerijaid. See asutati 2007. aastal HAML-i moodulina ja on kirjutatud ka Ruby keeles (seal on C++ port). Sellel on ka teiste programmidega võrreldes laiem valik funktsioone. Süntaktiliselt ägedate stiililehtede võimaluste laiendamiseks saate kasutada võimsat kompassi teeki. SASS-programmil on kaks süntaksivalikut: Sass ja SCSS.
See on noorim ja lootustandvam instrument. See asutati 2010. aastal. Styluse eelprotsessor on kõige mugavam ja laiendatavam eelprotsessor.
Tavaliselt töötab programmeerija juba LESS-iga. Kõik failid loetakse kehtivaks LESS-failiks. Sellisel juhul pole faililaiendit vaja. Tavalise CSS-koodi võtmisel paneme selle sama nimega, kuid .less laiendiga faili. Tegelikult saadi identne fail vigadeta ja täpse sisuga. Ainus erinevus failide vahel oli saadavus tühjad read pärast valijaid. Seega on selle tööriista kasutamisel kompileerimisaeg palju väiksem. Seetõttu tegevus seda tööriista suunatud konkreetsetele eesmärkidele, luues mugava struktuuri. Seda saab teha tavalise CSS-iga, kuid see on vähem mugav.
Funktsionaalsete omaduste järgi on Sass teistest programmidest mitmes mõttes kindlasti parem. Aga kui töö on juba Lessi abil tehtud, pole mõtet seda muuta. Nagu eespool mainitud, võimaldab SASS kasutada Compassi, mis muudab eesliidetega töötamise lihtsamaks. Teistel programmidel pole Compassi projekti, kuna tööriista keel on üsna keeruline. SASS-il on Boolean ja tsüklilised operaatorid. LESS-i veebisait on teiste veebisaitidega võrreldes ilus ja kasutajasõbralik.
@media reeglitega töötades lisab programmeerija nendega plokid stiilide lehe allossa. See viib stiilide katkemiseni. Less ja Sass on mõlemad tööriistad, mis seda probleemi lahendavad, ja nende taga olev matemaatika on üldiselt sarnane. Kiiruse osas on mõlemal eelprotsessoril hea jõudlus.
Mõlema variandi arendajad jätkavad nende täiustamist.
Programmeerijate arvustuste ja kommentaaride kohaselt saab mõlemat tööriista kasutada võrdsete võimalustega. Mõne allika järgi on süntaktiliselt ägedatel stiililehtedel rohkem madal kiirus võrreldes teistega. Mõned arvavad, et Stylus on täna ületanud mõlemad eeltöötlejad.
Seega pole Lessi ja Sassi kasutamise küsimusele täpset lahendust, kuna mõlemal on head omadused ja funktsionaalsus. Seetõttu määravad valiku programmeerija eesmärgid ja eesmärgid.
Mulle meeldib SASS-i süntaks selle lühiduse tõttu rohkem kui SCSS. Kuid stiilide massiline pesastumine SASS-is võib selle lühiduse eelised kiiresti kõrvaldada. Igal juhul pole SASS-i ja SCSS-i erinevus põhimõtteline. LESS osutus SCSS-ile lähedasemaks kui SASS-ile. Ja üldiselt on see sama asi. Erinevusi pole palju, kuid paar neist muudavad jõudude vahekorda põhimõtteliselt.
1. VÄHEM – saab kliendipoolset kasutada JS-i.Täpsemalt, asi pole selles, et ta saab, ta on selleks loodud. Levinud tava LESS-koodi kasutamiseks:
Siis lisati sellele ka serveris kompileerimise võimalus (nii js kui ka ruby).
Esmapilgul tundub see kummaline vara. Milleks kompileerida kliendi poolel, kui saab suurepäraselt kompileerida serveris ja serveerida valmis kokkusurutud CSS-i nagu me SASSiga harjunud oleme?
Põhjus selgub pärast LESS-i dokumentatsiooni mittekirjeldavate viimaste ridade uurimist:
@height: `document.body.clientHeight`;
Selline väike üksildane joon annab võimalusi, millest küljendajad on stiilide valdamise algusest saati vaid unistanud. Kliendipoolse Java-skripti kutsumine CSS-ist ja brauseri tegelike sätete arvestamine stiilide loomisel.
See tähendab, et meil on nüüd võimalus esmalt laadida DOM ja seejärel see selle jaoks luua kohandatud CSS otse kliendi poolel. Seejärel mõelge ise, milliseid võimalusi see avab.
Kas teie projekt seda vajab, on hoopis teine küsimus. Selge on see, et kõik on harjunud kliendi ebakindluse/sõltumatuse ja paigutusega stiilis “teeme seda universaalselt nii, et seda näidatakse enam-vähem kõigile igal resolutsioonil”. Aga see ei ole põhjus unustada, et nüüd on selline võimalus olemas ja sellega saab teha näiteks väga paindliku küljenduse.
2. LESS-il, erinevalt SASS/SCSS-ist, puudub loogika.LESS-is ei ole kui/siis, eest jne. Kuigi, arvestades, et JS on sellesse hõlpsasti sisse ehitatud, arvan, et loogikat on täiesti võimalik kruvida. Ma pole seda proovinud.
3. Segamine on lihtsam VÄHEM + saab segada klasse.Mulle väga meeldis, et LESS-is saab definitsiooni kaasata ka teiste klasside omadusi. Klass ise on mixin. See on veel üks funktsioon, mida SASS-il/SCSS-il pole. Saate lisada lahtrisse LESS tavalise CSS-faili ja kasutada selle klasse oma atribuutide määratlemiseks. Näiteks:
Mähi (
text-wrap: wrap;
white-space: pre-wrap;
tühik: -moz-pre-wrap;
sõnamurdmine: murdsõna;
}
pre ( .wrap )
Kui 1. punkt välja arvata, pole vahe suur ja valik on harrastaja jaoks suurem.
Minu jaoks isiklikult tundub LESS oma lihtsuse tõttu atraktiivsem. Ma pole kunagi varem stiilides tsükleid ja tingimusi vajanud. Klassikalised utiliidid, nagu "kast-vari, lineaarne gradient, tume", on saadaval VÄHEM.
Jah, SASSi jaoks on juba kirjutatud palju valmis teeke (
"ja tekkis täiesti loogiline küsimus: "Mis vahe on SASS-il ja SCSS-il?" Teema on huvitav, nii et mõtleme selle välja.
Millal me räägime Sassist rääkides peame üldiselt silmas eeltöötlejat ja keelt üldiselt.
Sassi (eelprotsessorit) kasutades saame aga kasutada kahte erinevat süntaksit:
- Sass(taane) ;
- SCSS (CSS-i sarnane süntaks).
Sass oli algselt osa teisest eeltöötlejast Hamlist, mille leiutasid ja kirjutasid Ruby arendajad.
Seega kasutasid Sassi stiilid rubiinitaolist süntaksit, ilma sulgudeta, semikoolonita ega range taandeta, näiteks järgmiselt:
// Muutuja!primary -color= hotpink // Esmane =border-radius(!radius) -webkit-border-radius= !radius -moz-border-radius= !radius border-radius= !radius .my-element color= !primary -color width= 100% overflow= peidetud .my-other-element +border-radius(5 px)
Võrreldes CSS-i süntaksiga on märgatav erinevus.
Muutuja määratakse ! , mitte $ , väärtuse määramise sümbol = , mitte :.
Kuid selline nägi Sass välja enne 2010. aasta mais välja antud versiooni 3.0, mis võeti täielikult kasutusele uus süntaks nimega SCSS või Sassy CSS.
Tema eesmärk oli tuua Sassi süntaks CSS-ile lähemale, muutes selle CSS-iga paremini ühilduvaks:
// Muutuja $primary -color: hotpink; // Mixin @mixin border-radius($radius ) ( -webkit-border-radius: $radius ; -moz-border-radius: $radius ; border-radius: $radius ; ) .my-element ( color: $primary -värv: 100% ülevool: peidetud .my-other-element ( @include border-radius (5 px); )SCSS on kindlasti CSS-ile lähemal kui Sass. Sassi arendajad tegid kõvasti tööd, et muuta mõlemad süntaksid üksteisele lähemale, asendades ! (muutuv märk) ja = (määramismärk) $ ja: CSS-ist.
Seega võite uut projekti alustades mõelda, millist süntaksit kasutada. Las ma aitan teil otsuse langetada.
Sassi taandega süntaksi plussidKuigi see süntaks võib teile tunduda pisut kummaline, on sellel mitu huvitavaid hetki. Esiteks on see lühem ja lihtsam tippida. Sulgusid ega semikooloneid pole, neid pole vaja.
See ei vaja @mixin või @include, kui sellest piisab lihtne sümbol: = ja + .
Sassil on ka puhtad kodeerimisstandardid tänu taande kasutamisele. Kuna vale taane võib rikkuda kogu .sass-laaditabeli, on esimene samm siin tagada, et kood on puhas ja õigesti vormindatud.
Sassi koodi kirjutamiseks on ainult üks viis: kirjutage see õigesti.
Ärge unustage, et taandel on Sassis tõeväärtus. Kui valijaploki taane on rakendatud, tähendab see, et see on pesastatud valija.
Näiteks:
.element-a color: hotpink .element-b float: left ... väljastab järgmise CSS-koodi: .element-a ( color : hotpink ; ) .element-a .element-b ( float : left ; )Lihtne fakt .element-b nihutamine ühe taseme võrra paremale tähendab, et see on nii laps element alates .element-a , mis muudab saadud CSS-koodi. Nii et olge süvenditega ettevaatlik!
Usun, et taandel põhinev süntaks on ahvatlevam peamiselt Ruby/Pythoniga töötavale meeskonnale kui PHP/Java programmeerijate meeskonnale (kuid see pole kindel).
SCSS-i süntaksi plussidEsiteks on see täielikult CSS-iga ühilduv. See tähendab, et saate ümber nimetada CSS-fail failis .scss ja see töötab nii, nagu poleks midagi juhtunud.
SCSS-i CSS-iga täielikult ühilduvaks muutmine on Sassi toe jaoks alati olnud prioriteet alates SCSS-i väljaandmisest ja minu arvates on see tugev külg.
Samuti püüavad nad silma peal hoida sellel, mis võib tulevikus muutuda kehtivaks CSS-i süntaksiks, ja seda rakendada (seega @direktiivid ).
Kuna SCSS ühildub CSS-iga, ei vaja see praktiliselt mingit lisakoolitust. Süntaks on üsna sama: lõppude lõpuks on see lihtsalt CSS koos mõningate lisadega.
See on uutele arendajatele oluline, et nad saaksid kiiresti kodeerimist alustada, Sassist palju teadmata.
See on ka loetavam, kuna konkreetsed konstruktsioonid on juba mõistlikud. Kui näete @mixin , teate, et see on mixin deklaratsioon; kui näete @include , teate, et see on segakõne.
Mingeid nööre pole ja kõik on mõtet ilma tõlgendamiseta.
Samuti on peaaegu kõik Sassi olemasolevad tööriistad, pistikprogrammid ja demod välja töötatud SCSS-i süntaksi abil. See süntaks on üha enam orienteeritud professionaalidele ja on nende poolt vaikimisi valitud (kui see pole ainuvõimalik).
Peamiselt ülaltoodud põhjustel. Näiteks on üha raskem leida esiletõstmist puhta Sassi taandega süntaksi jaoks; üldiselt on saadaval ainult SCSS-taustvalgustuse valikud.
JäreldusValik on igal juhul teie, kuid kui teil pole tõesti mõjuvat põhjust taandega süntaksi kasutamiseks, soovitan tungivalt kasutada SCSS-i Sassi asemel. See pole mitte ainult lihtsam, vaid ka mugavam. Kui olete täiesti algaja, siis SCSS on see, mida vajate. Sarnasus CSS-iga ei peleta teid eemale eelprotsessorite abil paigutuse õppimisest. Kuid siis võite kaaluda Sassi kasutamist oma projektides. Peaasi, et ärge kartke oma töös uusi tehnoloogiaid kasutada!
P.S. Pange tähele, et Sassile ei viidata kunagi suurtähtedega lühendiga, olgu see siis süntaks või programmeerimiskeel. Kuigi SCSS on alati märgitud suurtähtedega.
