CSS-i funktsioonireeglid: Kohandatud funktsioonide defineerimise võimsuse vallapäästmine

CSS areneb pidevalt, pakkudes arendajatele üha võimsamaid tööriistu dünaamiliste ja hooldatavate stiililehtede loomiseks. Üks selline funktsioon, mis küll pole kõikides brauserites universaalselt toetatud ja nõuab sageli eelprotsessoreid, on võimalus defineerida CSS-is kohandatud funktsioone. See võimekus, mida sageli rakendatakse eelprotsessorite nagu Sass, Less või Stylus kaudu, võimaldab teil kapseldada keerulist loogikat ja seda kogu oma CSS-is taaskasutada, mis viib puhtama, organiseerituma ja tõhusama koodini. See artikkel süveneb CSS-i funktsioonireeglite kontseptsiooni, uurides nende süntaksit, kasutusjuhtumeid ja parimaid praktikaid.

CSS-i funktsioonireeglite mõistmine (eelprotsessoritega)

Kuigi puhas CSS ei toeta otseselt kohandatud funktsioonide defineerimist (selle artikli kirjutamise hetkel), pakuvad CSS-i eelprotsessorid seda olulist funktsionaalsust. Need eelprotsessorid laiendavad CSS-i selliste funktsioonidega nagu muutujad, mixinid ja funktsioonid, mis seejärel kompileeritakse standardseks CSS-iks, mida brauserid mõistavad. Mõelge CSS-i eelprotsessorist kui tõlkijast, mis võtab teie täiustatud koodi ja muudab selle tavaliseks CSS-iks. Kuna tõelisi CSS-i funktsioonireegleid veel puhtal kujul ei eksisteeri, põhinevad näited eelprotsessorite süntaksil. Enamasti tähendab see kas Sassi, Lessi või Stylust.

Seetõttu on oluline mõista, et siin toodud koodinäited demonstreerivad, kuidas CSS-i eelprotsessoritega funktsioonilaadset käitumist *jäljendada* või *saavutada*, mitte ei näita tõelisi puhta CSS-i funktsioonireegleid. Põhikontseptsioon on defineerida taaskasutatavaid koodiplokke, mis aktsepteerivad argumente ja tagastavad väärtuse, luues seeläbi funktsioone oma stiilide sees.

Miks kasutada CSS-is kohandatud funktsioone?

• Koodi taaskasutatavus: Vältige samade koodijuppide korduvat kirjutamist. Defineerige funktsioon üks kord ja kasutage seda kõikjal, kus vaja.
• Hooldatavus: Funktsiooni muudatused tuleb teha vaid ühes kohas, mis lihtsustab uuendusi ja vähendab vigade riski.
• Organiseeritus: Jaotage keeruline stiililoogika väiksemateks ja paremini hallatavateks funktsioonideks.
• Dünaamiline stiilimine: Looge stiile, mis kohanduvad sisendväärtuste, näiteks värvide, suuruste või arvutuste põhjal.
• Abstraktsioon: Peitke keerulised arvutused või loogika lihtsa funktsioonikutse taha, muutes oma CSS-i kergemini mõistetavaks.

Süntaks ja näited (kasutades Sassi)

Sass (Syntactically Awesome Style Sheets) on üks populaarsemaid CSS-i eelprotsessoreid ja pakub võimsat ning intuitiivset süntaksit kohandatud funktsioonide defineerimiseks. Uurime süntaksit praktiliste näidete varal:

Põhifunktsiooni defineerimine

Sassis defineeritakse funktsioon direktiiviga @function, millele järgneb funktsiooni nimi, sulgudes argumendid (kui neid on) ja loogelistes sulgudes funktsiooni keha. Direktiiv @return määrab väärtuse, mille funktsioon peaks tagastama.

            @function calculate-width($base-width, $multiplier) {
 @return $base-width * $multiplier;
}

.element {
 width: calculate-width(100px, 2);
}

            

              
                Copy
              
            
          

Selles näites võtab funktsioon calculate-width kaks argumenti, $base-width ja $multiplier, ning tagastab nende korrutise. Klass .element kasutab seejärel seda funktsiooni, et määrata oma laiuseks 200px (100px * 2).

Funktsioonid vaikeargumentidega

Funktsiooni argumentidele saab anda vaikeväärtusi. Kui argumenti funktsiooni kutsumisel ei määrata, kasutatakse vaikeväärtust.

            @function lighten-color($color, $amount: 20%) {
 @return lighten($color, $amount);
}

.element {
 background-color: lighten-color(#3498db);
 color: lighten-color(#2c3e50, 10%);
}

            

              
                Copy
              
            
          

Siin võtab funktsioon lighten-color argumendiks $color ja valikulise $amount argumendi. Kui $amount pole määratud, on selle vaikeväärtus 20%. Seejärel kasutab funktsioon Sassi sisseehitatud funktsiooni lighten, et muuta värvi heledamaks määratud koguse võrra.

Funktsioonid tingimusloogikaga

Funktsioonid võivad sisaldada tingimusloogikat, kasutades direktiive @if, @else if ja @else. See võimaldab luua funktsioone, mis käituvad teatud tingimustest lähtuvalt erinevalt.

            @function text-color($background-color) {
 @if lightness($background-color) > 50% {
 @return #000;
 } @else {
 @return #fff;
 }
}

.element {
 background-color: #f0f0f0;
 color: text-color(#f0f0f0); // Black text
}

.dark-element {
 background-color: #333;
 color: text-color(#333); // White text
}

            

              
                Copy
              
            
          

See text-color funktsioon määrab sobiva tekstivärvi vastavalt taustavärvi heledusele. Kui taust on hele, tagastab see musta värvi; vastasel juhul tagastab see valge. See tagab hea kontrasti ja loetavuse.

Funktsioonid tsüklitega

Sassi funktsioonid võivad sisaldada ka tsükleid, kasutades direktiive @for, @while ja @each. See võib olla kasulik keerukate stiilide või arvutuste genereerimiseks.

            @function generate-shadows($color, $count) {
 $shadows: ();
 @for $i from 1 through $count {
 $shadow: 0 px * $i 0 px * $i rgba($color, 0.2);
 $shadows: append($shadows, $shadow, comma);
 }
 @return $shadows;
}

.element {
 box-shadow: generate-shadows(#000, 3);
}

            

              
                Copy
              
            
          

Funktsioon generate-shadows loob mitmeid järjestikuseid varje (box shadows) kasvavate nihetega. See võtab argumentideks $color ja $count. Tsükkel @for itereerib 1-st kuni $count-ni, genereerides iga iteratsiooni jaoks varju ja lisades selle $shadows nimekirja. Tulemuseks oleval box-shadow omadusel on mitu varjuväärtust, mis loob kihilise efekti.

Alternatiivsed eelprotsessorid: Less ja Stylus

Kuigi Sass on silmapaistev valik, pakuvad Less ja Stylus sarnaseid funktsioonide defineerimise võimalusi, igaühel oma süntaks ja omadused.

Less-i funktsioonid

Lessis nimetatakse funktsioone 'mixinideks', kui nad väljastavad CSS-i reeglistikke, ja nad saavad ka väärtusi tagastada. Lessil pole spetsiaalset @function direktiivi; selle asemel saate saavutada funktsioonilaadse käitumise mixini sees.

            .calculate-area(@width, @height) {
 @area: @width * @height;
 @return @area;
}

.element {
 @width: 10px;
 @height: 20px;
 width: @width;
 height: @height;
 @area: .calculate-area(@width, @height);
 area: @area; // Outputs: area: 200px;
}

            

              
                Copy
              
            
          

Less kasutab muutujat @arguments, et pääseda ligi kõikidele mixinile edastatud argumentidele. Kuigi see pole kõige rangemas mõttes funktsioon, pakub see samaväärset funktsionaalsust. On oluline märkida, et "mixin-funktsiooni" tulemuse määramine muutujale eeldab, et mixin tagastab ainult väärtuse (st see ei tohiks otse väljastada ühtegi CSS-i reeglistikku).

Styluse funktsioonid

Stylus pakub puhast ja lühikest süntaksit funktsioonide defineerimiseks. See ei nõua otseseid @function või @return direktiive.

            calculateWidth(baseWidth, multiplier)
 return baseWidth * multiplier

.element
 width: calculateWidth(100px, 2)

            

              
                Copy
              
            
          

Styluse funktsioonid on oma süntaksi poolest väga sarnased JavaScripti funktsioonidega. Argumendid defineeritakse sulgudes ja funktsiooni keha tagastab kaudselt viimase hinnatud avaldise. Kood on üldiselt lühem ja loetavam.

Parimad praktikad CSS-i funktsioonireeglite kasutamiseks (eelprotsessoritega)

• Nimekonventsioonid: Kasutage oma funktsioonidele kirjeldavaid ja järjepidevaid nimesid. Valige nimed, mis näitavad selgelt funktsiooni eesmärki. Näiteks calculate-padding on kirjeldavam kui calc-pad.
• Hoidke funktsioonid väikesed ja fokusseeritud: Igal funktsioonil peaks olema üks, hästi defineeritud eesmärk. Vältige liiga keeruliste funktsioonide loomist, mis täidavad mitut ülesannet.
• Dokumenteerige oma funktsioonid: Lisage kommentaare, et selgitada iga funktsiooni eesmärki, argumente ja tagastatavat väärtust. See muudab teie koodi lihtsamini mõistetavaks ja hooldatavaks.
• Testige oma funktsioone: Testige oma funktsioone põhjalikult erinevate sisendväärtustega, et tagada nende ootuspärane käitumine.
• Vältige liigset kasutamist: Kuigi funktsioonid võivad olla võimsad, vältige nende liigset kasutamist. Kasutage funktsioone ainult siis, kui need pakuvad olulist kasu koodi taaskasutatavuse, hooldatavuse või organiseerituse osas. Mõnikord piisab lihtsast CSS-i reeglist.
• Arvestage jõudlusega: Keerulised funktsioonid võivad mõjutada teie stiililehe jõudlust. Optimeerige oma funktsioone, et tagada nende tõhusus ja vältida tarbetut koormust. Eriti vältige liigset tsükeldamist või rekursiooni.
• Kasutage võimaluse korral CSS-i muutujaid: CSS-i muutujate (kohandatud omaduste) kasvava toetusega kaaluge nende kasutamist funktsioonide asemel lihtsate väärtuste asendamiseks. CSS-i muutujad on brauserite poolt loomulikult toetatud ja ei vaja eelprotsessorit.

Kasutusjuhud ja reaalse maailma näited

Kohandatud CSS-i funktsioone (eelprotsessorite kaudu) saab rakendada paljudes stsenaariumides, et parandada stiililehtede tõhusust ja hooldatavust. Siin on mõned näited:

Kohanduv tüpograafia

Looge funktsioon, mis kohandab dünaamiliselt fondi suurust vastavalt ekraani laiusele. See aitab tagada, et teie tüpograafia jääb loetavaks ja visuaalselt meeldivaks erinevates seadmetes.

            @function responsive-font-size($min-size, $max-size, $min-width, $max-width) {
 $slope: ($max-size - $min-size) / ($max-width - $min-width);
 $intercept: $min-size - $slope * $min-width;
 @return calc(#{$slope} * 100vw + #{$intercept});
}

h1 {
 font-size: responsive-font-size(20px, 36px, 320px, 1200px);
}

            

              
                Copy
              
            
          

See funktsioon arvutab sujuva fondi suuruse, mis skaleerub lineaarselt $min-size ja $max-size vahel, kui vaateakna laius skaleerub $min-width ja $max-width vahel. Brauseris arvutuse tegemiseks kasutatakse funktsiooni calc().

Värvidega manipuleerimine

Looge funktsioone, mis genereerivad värvipalette põhivärvi alusel. See aitab teil säilitada ühtset värviskeemi kogu oma veebisaidil või rakenduses.

            @function tint-color($color, $amount) {
 @return mix(#fff, $color, $amount);
}

@function shade-color($color, $amount) {
 @return mix(#000, $color, $amount);
}

.button {
 background-color: #27ae60;
 &:hover {
 background-color: tint-color(#27ae60, 20%);
 }
 &:active {
 background-color: shade-color(#27ae60, 20%);
 }
}

            

              
                Copy
              
            
          

Need funktsioonid kasutavad Sassi sisseehitatud funktsiooni mix, et värvi toonida (heledamaks muuta) või varjutada (tumedamaks muuta) määratud koguse võrra. See on kasulik nuppude või muude interaktiivsete elementide hover- ja active-olekute loomiseks.

Võrgustikusüsteemid

Looge funktsioone, mis arvutavad võrgustiku veergude laiuse vastavalt veergude koguarvule ja soovitud vahe laiusele. See võib lihtsustada kohanduvate võrgustikupaigutuste loomise protsessi.

            @function grid-column-width($columns, $total-columns, $gutter) {
 @return calc((100% - ($total-columns - 1) * $gutter) / $total-columns * $columns + ($columns - 1) * $gutter);
}

.column {
 width: grid-column-width(4, 12, 20px);
}

            

              
                Copy
              
            
          

See funktsioon arvutab võrgustiku veeru laiuse, lähtudes sellest, mitut veergu see hõlmab ($columns), võrgustiku veergude koguarvust ($total-columns) ja vahe laiusest ($gutter). Tulemuseks on protsendipõhine laius, mis arvestab veergude vahelisi vahesid.

Keeruliste paigutusväärtuste arvutamine

Oletame, et peate looma paigutuse, kus elemendi kõrgus arvutatakse dünaamiliselt teise elemendi kõrguse ja mõnede fikseeritud nihete põhjal. Funktsioon muudab selle arvutuse taaskasutatavaks.

            @function calculate-dynamic-height($reference-height, $top-offset, $bottom-offset) {
  @return calc($reference-height - $top-offset - $bottom-offset);
}

.container {
  height: 500px; // Assume this is dynamically set via JS or other means
}

.dynamic-element {
  height: calculate-dynamic-height(500px, 20px, 30px); //Uses the container height
}

            

              
                Copy
              
            
          

See näide on lihtne, kuid demonstreerib, kuidas selline funktsioon võimaldaks hõlpsalt uuendada mitme elemendi kõrgust, kui viitekõrgus muutub. Funktsioon kapseldab arvutuse keerukuse.

CSS-i funktsioonireeglite tulevik

Kuigi CSS-i eelprotsessorid täidavad praegu tühimikku, on puhaste CSS-i funktsioonireeglite võimalus põnev väljavaade. Natiivne tugi kaotaks vajaduse eelkompileerimise järele ning parandaks CSS-i jõudlust ja hooldatavust. CSS-i töörühmas on käimas arutelud ja ettepanekud, et uurida funktsioonilaadsete konstruktsioonide rakendamist CSS-is. Funktsioonid nagu CSS Houdini pakuvad potentsiaalseid võimalusi CSS-i laiendamiseks kohandatud parsimis- ja renderdamisvõimalustega, mis võiksid sillutada teed tõelistele CSS-i funktsioonireeglitele.

Kokkuvõte

CSS-i funktsioonireeglid, mis on saavutatud CSS-i eelprotsessorite kaudu, pakuvad võimsat mehhanismi dünaamiliste, taaskasutatavate ja hooldatavate stiililehtede loomiseks. Mõistes kohandatud funktsioonide defineerimise ja kasutamise süntaksit ja parimaid praktikaid, saate oluliselt parandada oma CSS-koodi tõhusust ja organiseeritust. Oodates puhaste CSS-i funktsioonide tuge, jääb eelprotsessorite nagu Sass, Less ja Stylus võimekuste kasutamine väärtuslikuks tehnikaks igale esiotsa arendajale. Võtke omaks kohandatud funktsioonide võimsus ja avage oma CSS-i arendustöös uued paindlikkuse ja kontrolli tasemed. Ärge unustage kaaluda CSS-i muutujate kasutamist lihtsateks asendusteks ning püüdlege alati puhta, hästi dokumenteeritud ja jõudsa koodi poole.