Less-css, tot voor kort had ik er nog niet van gehoord. In de update van Pagelines Framework 2.2 wordt dit geïntegreerd. Alle reden voor mij als Pagelines expert cq. nerd om er even in te duiken.
Hieronder zie je een voorbeeld van less css in de praktijk. Ik heb meteen maar een wat complexer voorbeeld genomen om de winst duidelijk te maken.
Om ronde hoeken aan div’s te geven moet je css stijling opgeven voor elke div opnieuw. Een div (division) is een gebiedje van je webpagina bijvoorbeeld de header (kop) waar zich meestal je menu en je branding (logo) in bevindt.
Mixins
Mixins maakt het mogelijk alle eigenschappen van een class in te voegen in een ander class door simpelweg de class naam te gebruiken als één van de eigenschappen. Zie het voorbeeld hieronder. Bron lesscss.org
| // LESS .rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } #header { .rounded-corners; } #footer { .rounded-corners(10px); } | /* Compiled CSS */ #header { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #footer { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } |
Andere voorbeelden:
–10 LESS CSS Examples You Should Steal for Your Projects
Bovenstaande is pure css-3 de html code is “slechts” de volgende code:
<!doctype html> <head> <link rel="stylesheet/less" type="text/css" href="style.less"> <script src="less-1.1.3.min.js" type="text/javascript"></script> </head> <body> <div class="shape" id="shape1"></div> <div class="shape" id="shape2"></div> <div class="shape" id="shape3"></div> </body> </html> Wat een eenvoud! Ga ook even met je muis er over heen. Bovenstaand voor beeld van verekia.com