| MINDRE | |
|---|---|
| Sprog klasse | Stylesheet-sprog , gratis software , preprocessor og funktionsbibliotek |
| Dukkede op i | 2009 |
| Forfatter | Alexis Sellier |
| Udvikler | Alexis Sellier, Dmitry Fadeev |
| Frigøre | 4.1.3 ( 9. juni 2022 ) |
| Type system | dynamisk |
| Blev påvirket | CSS , Sass |
| påvirket | Sass , mindre rammer |
| Licens | Apache-licens 2 |
| Internet side | lesscss.org |
| OS | på tværs af platforme |
LESS (Leaner Style Sheets, kompakt stilark) er et dynamisk stilsprog udviklet af Alexis Sellier. Det var påvirket af Sass -stilsproget og påvirkede igen dets nye "SCSS"-syntaks, som også bruger en syntaks, der er en udvidelse af CSS [1] .
LESS er et open source- produkt . Dens første version blev skrevet i Ruby , men i senere versioner blev det besluttet at opgive brugen af dette programmeringssprog til fordel for JavaScript . Less er et indlejret metasprog : gyldig CSS ville være et gyldigt mindre program med lignende semantik .
LESS giver følgende CSS-udvidelser: variabler , indlejrede blokke, mixins , operatorer og funktioner [2] .
LESS kan køre klientsiden ( Internet Explorer 6+ , WebKit , Firefox ) eller serversiden, der kører Node.js eller Rhino [2] .
Mindre giver dig mulighed for at bruge variabler. Forud for variabelnavnet står @ -symbolet . Kolon (:) bruges som tildelingstegn .
Ved oversættelse erstattes værdien af variablen i det resulterende CSS-dokument [2] .
@ farve : # 4D926F ; # header { color : @ color ; } h2 { farve : @ farve ; }Denne MINDRE kode vil blive kompileret i følgende CSS-fil:
# header { farve : #4D926F ; } h2 { farve : #4D926F ; }Mixins giver dig mulighed for at inkludere et helt sæt egenskaber fra et sæt regler til et andet ved at inkludere navnet på en klasse som en af egenskaberne for en anden klasse. Denne adfærd kan opfattes som en slags konstant eller variabel. De kan også opføre sig som funktioner ved at tage argumenter. I ren CSS bør gentagelse af kode gentages flere steder - mixins gør koden renere, tydeligere og lettere at ændre [2] .
. rounded-corners ( @ radius : 4px ) { -webkit-border-radius : @ radius ; -moz-border-radius : @ radius ; border-radius : @ radius ; } # header { .rounded-corners ; } # footer { .rounded-corners(10px) ; }Denne MINDRE kode vil blive kompileret i følgende CSS-fil:
# header { -webkit- border-radius : 4 px ; -moz- grænse-radius : 4 px ; kant - radius : 4px } # footer { -webkit- border-radius : 10 px ; -moz- grænse-radius : 10 px ; kant - radius : 10px }LESS gør det muligt at indlejre definitioner i stedet for eller sammen med cascading. Lad os f.eks. sige, at vi har denne CSS: CSS understøtter logisk cascading, men én kodeblok kan ikke indlejres i en anden. Mindre giver dig mulighed for at indlejre en vælger i en anden. Dette gør arven tydeligere og forkorter stilarkene [2] .
# header { h1 { font-size : 26 px ; font-weight : fed ; } p { font-size : 12 px ; a { tekst-dekoration : ingen ; & : hover { border -width : 1px } } }Denne MINDRE kode vil blive kompileret i følgende CSS-fil:
# header h1 { font-size : 26 px ; font-weight : fed ; } # header p { font-size : 12 px ; } # header p a { text-decoration : none ; } # header p a : hover { border-width : 1 px ; }Mindre giver dig mulighed for at bruge operationer og funktioner. Operationer giver dig mulighed for at addere, subtrahere, dividere og gange egenskabs- og farveværdier, som kan bruges til at skabe komplekse relationer mellem egenskaber. Funktioner er knyttet en-til-en til JavaScript-kode, hvilket gør det muligt at behandle værdier.
@ grænsen : 1px ; @ grundfarve : # 111 ; @ rød : # 842210 ; # header { color : @ base-color * 3 ; border-venstre : @ grænsen ; grænse-højre : @ grænsen * 2 ; } # footer { color : @ base-color + #003300 ; kant-farve : desaturate ( @ rød , 10 % ); }Denne MINDRE kode vil blive kompileret i følgende CSS-fil:
# header { color : #333 ; kant - venstre : 1px kant - højre : 2px } # footer { color : #114411 ; kantfarve : #7d2717 ; }Både Sass og LESS er CSS-forprocessorer, der giver dig mulighed for at skrive ren CSS ved hjælp af programmeringskonstruktioner i stedet for statiske regler [3] .
LESS er inspireret af Sass [4] . Sass blev designet til både at forenkle og udvide CSS, krøllede seler blev fjernet fra syntaksen i de første versioner (denne syntaks kaldes sass ). LESS er designet til at være så tæt på CSS som muligt, så de har samme syntaks. Som et resultat kan eksisterende CSS bruges som MINDRE kode. Nyere versioner af Sass inkluderer også en CSS-lignende syntaks kaldet SCSS (Sassy CSS) [1] .
Se Sass/Less Comparison [5] for en detaljeret syntakssammenligning .
ZUSS ( ZK User-interface Style Sheet) [6] er et stylingsprog baseret på ideerne fra LESS. Det har en lignende syntaks, bortset fra at det er beregnet til at blive brugt på serversiden sammen med programmeringssproget Java . Den bruger ikke en JavaScript-fortolker ( Rhino ), men giver dig mulighed for direkte at kalde Java-metoder.
LESS kan bruges på en hjemmeside på en række forskellige måder. En mulighed er at forbinde less.js JavaScript -filen fra dens officielle side lesscss.org til websiden for at konvertere koden til CSS i farten ved hjælp af browseren.
Dette gøres for eksempel ved at bruge følgende html-kode:
< link rel = "stylesheet/less" type = "text/css" href = "styles.less" > < script src = "less.js" type = "text/javascript" ></ script >Hvis du bruger Rhino server-side JavaScript eller node.js , kan du konvertere .less filer til .css på serversiden.
Endelig er der tredjepartsimplementeringer af sproget: for eksempel SimpLESS open source compiler til Windows , Linux og Mac OS X [7] , .less{} - en implementering til .NET frameworket [8] eller lessphp [9 ] ] , som giver dig mulighed for at kompilere mindre stilarter på serversiden til PHP - websteder.
| Stylesheet-sprog ( sammenlign , list ) | |
|---|---|
| Tilstande |
|
| Standard | |
| ikke standard |
|