Share
U bent misschien bekend met diensten als LESS en Sass. Ze bieden veel meer flexibiliteit bij het maken van uw stylesheets, inclusief het gebruik van variabelen, operators, mix-ins en zelfs geneste selectors. Omdat LESS oorspronkelijk met Ruby werd gebouwd, hebben veel PHP-ontwikkelaars, ondanks het feit dat er PHP-versies beschikbaar zijn, het nooit gebruikt.
Merk op dat we de rel attribuut aan "stylesheet / less" en dat onze eigenlijke stylesheets een extensie hebben van .minder, niet .css. We moeten ook een link naar dit stylesheet maken voor Less.js.
Met deze minimale hoeveelheid werk hebt u nu toegang tot alles, van variabelen tot mix-ins. Bekijk de vier minuten durende video-zelfstudie hierboven voor volledige voorbeelden, maar hier zijn een paar vragen.
/* Variabelen! * / @primary_color: groen; / * Mix-ins zijn soortgelijke functies voor veelgebruikte bewerkingen, zoals het toepassen van randen. We maken variabelen door het @ -symbool voor te leggen. * / .rounded (@radius: 5px) -moz-border-radius: @radius; -webkit-border-radius: @radius; grensradius: @radius; #container / * Verwijst naar de variabele die we hierboven hebben gemaakt. * / achtergrond: @primary_color; / * Roept de .rounded-mix-in (functie) op die we hebben gemaakt en overschrijft de standaardwaarde. * / .rounded (20px); / * Geneste selectors nemen ook de selector van hun ouder over. Dit maakt kortere code mogelijk. * / a color: red;
Het is belangrijk om te onthouden dat LESS.js nog niet is voltooid; hopelijk zal het snel zijn. Desalniettemin werkt het tot nu toe wonderwel. Wat denk je?
Accentsconagua