Less is more

Transcript

1. is more
2. CSS Jag
3. body { background: #5b83ad url("http://assets.example.com/images/background.png"); } .email-icon { background-image: url("http://assets.example.com/images/email.png"); border-color: #5b83ad; } Repetition - jobbigt att ändra Variabler @base-url: "http://assets.example.com/images"; @blue: #5b83ad; body { background: @blue url("@{base-url}/background.png"); } .email-icon { background-image: url("@{base-url}/email.png"); border-color: @blue; }
4. #information { background-color: #eeeeee; background-image: -webkit-linear-gradient(top, #eeeeee, #ffffff); background-image: -moz-linear-gradient(top, #eeeeee, #ffffff); background-image: -ms-linear-gradient(top, #eeeeee, #ffffff); background-image: -o-linear-gradient(top, #eeeeee, #ffffff); } Mer repetition - svårt att återanvända .gradient (@from: #eee, @to: #fff) { background-color: @from; background-image: -webkit-linear-gradient(top, @from, @to); background-image: -moz-linear-gradient(top, @from, @to); background-image: -ms-linear-gradient(top, @from, @to); background-image: -o-linear-gradient(top, @from, @to); } #information { .gradient(#5b83ad, #fffff); } Mixins
5. .tweets { border-left: 2px solid blue; } .tweets ul { list-style: none; margin: 0; padding: 0; } .tweets a { color: gray; display: block; } .tweets a:hover { color: blue; } Kan bli tydligare .tweets { border-left: 2px solid blue; ul { list-style: none; margin: 0; padding: 0; } a { color: gray; display: block; &:hover { color: blue; } } } Nästling
6. Allt det här och mer!
7. 㟬޷Մ爱 WTF?!
8. i webbläsaren eller på servern LESS måste översättas
9. Ladda hem från lesscss.org less i stället för css Kom igång! <link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script>
10. Demo
11. Mindre repetition Enklare underhåll och återanvändning Inkludera less.js och kör
12. Sven Dahlstrand @svendahlstrand http://svendahlstrand.se