| MINDRE | |
|---|---|
| Språkklass | Stilmallsspråk , fri programvara , förprocessor och funktionsbibliotek |
| Framträdde i | 2009 |
| Författare | Alexis Sellier |
| Utvecklaren | Alexis Sellier, Dmitry Fadeev |
| Släpp | 4.1.3 ( 9 juni 2022 ) |
| Typ system | dynamisk |
| Blivit påverkad | CSS , Sass |
| påverkas | Sass , mindre ramverk |
| Licens | Apache-licens 2 |
| Hemsida | lesscss.org |
| OS | plattformsoberoende |
LESS (Leaner Style Sheets, compact style sheets) är ett dynamiskt stilspråk utvecklat av Alexis Sellier. Det influerades av Sass -stilspråket och påverkade i sin tur dess nya "SCSS"-syntax, som också använder en syntax som är en förlängning av CSS [1] .
LESS är en produkt med öppen källkod . Dess första version skrevs i Ruby , men i senare versioner beslutades det att överge användningen av detta programmeringsspråk till förmån för JavaScript . Less är ett kapslat metaspråk : giltig CSS skulle vara ett giltigt mindre program med liknande semantik .
LESS tillhandahåller följande CSS-tillägg: variabler , kapslade block, mixins , operatorer och funktioner [2] .
LESS kan köra klientsidan ( Internet Explorer 6+ , WebKit , Firefox ) eller serversidan som kör Node.js eller Rhino [2] .
Mindre låter dig använda variabler. Variabelnamnet föregås av symbolen @ . Kolon (:) används som tilldelningstecken .
Vid översättning ersätts variabelns värde i det resulterande CSS-dokumentet [2] .
@ färg : # 4D926F ; # header { color : @ color ; } h2 { färg : @ färg ; }Denna LESS-kod kommer att kompileras till följande CSS-fil:
# header { color : #4D926F ; } h2 { färg : #4D926F ; }Mixins låter dig inkludera en hel uppsättning egenskaper från en uppsättning regler till en annan genom att inkludera namnet på en klass som en av egenskaperna för en annan klass. Detta beteende kan ses som en slags konstant eller variabel. De kan också bete sig som funktioner genom att ta argument. I ren CSS bör repeterande kod upprepas på flera ställen - mixins gör koden renare, tydligare och lättare att ändra [2] .
. rundade hörn ( @ radius : 4px ) { -webkit-border-radius : @ radius ; -moz-border-radius : @ radie ; border-radius : @ radius ; } # header { .rounded-corners ; } # footer { .rounded-corners(10px) ; }Denna LESS-kod kommer att kompileras till följande CSS-fil:
# header { -webkit- border- radius : 4 px ; -moz- border-radie : 4 px ; kant - radie : 4px } # footer { -webkit- border- radius : 10 px ; -moz- border-radie : 10 px ; kant - radie : 10px }LESS gör det möjligt att kapsla definitioner istället för eller tillsammans med kaskad. Låt oss till exempel säga att vi har denna CSS: CSS stöder logisk kaskadkoppling, men ett kodblock kan inte kapslas in i ett annat. Med Mindre kan du kapsla en väljare i en annan. Detta gör arvet tydligare och förkortar stilmallarna [2] .
# header { h1 { font-size : 26 px ; font-weight : fet ; } p { font-size : 12 px ; a { text-decoration : none ; &: hover { border -width : 1px } } }Denna LESS-kod kommer att kompileras till följande CSS-fil:
# header h1 { font-size : 26 px ; font-weight : fet ; } # header p { font-size : 12 px ; } # header p a { text-decoration : none ; } # header p a : hover { border-width : 1 px ; }Mindre gör att du kan använda operationer och funktioner. Med operationer kan du addera, subtrahera, dividera och multiplicera egenskaps- och färgvärden, vilket kan användas för att skapa komplexa relationer mellan egenskaper. Funktioner mappas en-till-en till JavaScript-kod, vilket gör att värden kan bearbetas.
@ the-border : 1px ; @ basfärg : # 111 ; @ red : # 842210 ; # header { color : @ base-color * 3 ; border-left : @ the-border ; border-right : @ the-border * 2 ; } # footer { color : @ base-color + #003300 ; kantfärg : desaturate ( @ röd , 10 % ); }Denna LESS-kod kommer att kompileras till följande CSS-fil:
# header { color : #333 ; kant - vänster : 1px kant - höger : 2px } # footer { color : #114411 ; kantfärg : #7d2717 ; }Både Sass och LESS är CSS-förprocessorer som låter dig skriva ren CSS med hjälp av programmeringskonstruktioner istället för statiska regler [3] .
LESS är inspirerad av Sass [4] . Sass designades för att både förenkla och utöka CSS, lockiga hängslen togs bort från syntaxen i de första versionerna (denna syntax kallas sass ). LESS är designad för att vara så nära CSS som möjligt, så de har samma syntax. Som ett resultat kan befintlig CSS användas som LESS-kod. Nyare versioner av Sass inkluderar också en CSS-liknande syntax som kallas SCSS (Sassy CSS) [1] .
Se Sass/Less Comparison [5] för en detaljerad syntaxjämförelse .
ZUSS ( ZK User -interface Style Sheet) [6] är ett stilspråk baserat på LESS idéer. Den har en liknande syntax, förutom att den är avsedd att användas på serversidan tillsammans med programmeringsspråket Java . Den använder ingen JavaScript-tolk ( Rhino ), men låter dig anropa Java-metoder direkt.
LESS kan användas på en webbplats på en mängd olika sätt. Ett alternativ är att ansluta less.js JavaScript -filen från dess officiella webbplats lesscss.org till webbsidan för att konvertera koden till CSS i farten, med hjälp av webbläsaren.
Detta görs till exempel med följande html-kod:
< länk rel = "stylesheet/less" type = "text/css" href = "styles.less" > < script src = "less.js" type = "text/javascript" ></ script >Om du använder Rhino -serversidans JavaScript eller node.js , kan du konvertera .less-filer till .css på serversidan.
Slutligen finns det tredjepartsimplementeringar av språket: till exempel SimpLESS open source - kompilator för Windows , Linux och Mac OS X [7] , .less{} - en implementering för .NET-ramverket [8] eller lessphp [9] ] , som låter dig kompilera mindre stilar på serversidan för PHP - webbplatser.
| Stilmallsspråk ( jämför , list ) | |
|---|---|
| Lägen |
|
| Standard | |
| icke-standard |
|