Doing More with LESS for CSS
•Download as PPTX, PDF•
6 likes•2,721 views
As CSS3 adds support for rich styling in standards-based web applications, style sheet markup can quickly get out of control! Many CSS effects today require repetitive rules to cover the proprietary browser CSS prefixes. LESS for CSS is an open source framework that makes modern CSS more manageable. With support for variables, mix-ins, nested CSS rules, and operations, LESS finally makes complex CSS easy to maintain. In this session, you will discover how LESS can be easily adopted in any ASP.NET project and learn about tools that make it easy to work with LESS in Visual Studio 2010.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Doing More with LESS for CSS
Similar to Doing More with LESS for CSS (20)
More from Todd Anglin
More from Todd Anglin (14)
Recently uploaded
Recently uploaded (20)
Doing More with LESS for CSS
- 1. Doing More with LESSfor CSS T: @toddanglin | E: anglin@telerik.com
- 2. Introductions Todd Anglin Chief Evangelist, Telerik Microsoft MVP ASP Insider President NHDNUG & O’Reilly Author TelerikWatch.com @toddanglin
- 3. What will we cover?
- 4. why do we need CSS?
- 5. [before CSS] {HTML} <html> <head>…</head> <body> <table> <tr><td> <font size=“3” color=“red”> <h1>Hello World!</h1> </font> </td></tr> <font color=“green”> <font face=“Tahoma”> <h2>I’m green! I think.</h2> </font> <p>Loremipsum</p> </font> </table> </body> </html>
- 6. Separation of Concerns* {CSS} {HTML} <html> <head>…</head> <body> <header>…</header> <article> <h1>Hello!</h1> <p>Loremipsum</p> </article> <nav>…</nav> <footer>…</footer> </body> </html> body { color:#FFF; } header { margin:5px; } article { margin:5px 0; padding: 10px; background: #333; } style structure
- 8. what is the key CSS challenge?
- 9. Browser Interoperability Browsers implement CSS differently .t-button { padding: 2px 8px; } *+html .t-button { padding: 1px 8px; } .t-icon, .t-sprite, .t-editor-button .t-tool-icon { display: inline-block; *display: inline; text-indent: -9999px; } * html .t-icon, .t-sprite { text-indent: 0; } *+html .t-icon, .t-sprite { text-indent: 0; }
- 10. IE6 is the [CSS] devil. Microsoft agrees. ie6countdown.com
- 11. CSS3
- 12. What’s CSS3? Extensions for CSS2.1 Add functionality, refine definitions
- 14. -moz-border-radius: 5px 5px5px5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 2px 2px2px #333; -webkit-box-shadow: 2px 2px2px #333; box-shadow: 2px 2px2px #333; -webkit-background-size: 137px 50px; -o-background-size: 137px 50px; background-size: 137px 50px;
- 15. CSS3 IN ACTION DEMO
- 16. wouldn’t it be nice if CSS…
- 17. Made it easier to target different browsers Supported global variables Made it easier to do DRY CSS Simplified complicated style hierarchies
- 18. LESS for CSS Use LESS to write less CSS Variables, operations, mix-ins, nested rules lesscss.org LESS is CSS
- 19. What LESS does NOT do Does not… Add CSS support to browsers Detect CSS support in browsers Save you from writing bad CSS Add runtime overhead*
- 20. Variables Reusable values Can only be defined once Output CSS LESS @nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; } #header { color: #6c94be; }
- 21. Operations In-line CSS operations Any number, color, or variable Output CSS LESS @base: 5%; @filler: @base * 2; @other: @base + @filler; @base-color: #C9C9C9; .rule{ color: #888 / 4; background-color: @base-color + #111; height: 100% / 2 + @filler; } .rule { color: #222222; background-color: #dadada; height: 60%; }
- 22. Mix-ins Encapsulated CSS rule sets Reusable Can accept parameters Output CSS LESS /*LESS Mix-in*/ .border-radius (@radius) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } #header { .border-radius(4px); } #header { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
- 23. Nested Rules Simplifies complicated CSS rule naming Output CSS LESS #header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; &:hover { text-decoration: none } } } #header { color: black; } #header .navigation { font-size: 12px; } #header .logo { width: 300px; } #header .logo:hover{ text-decoration: none; }
- 24. Different Ways to Use LESS Dynamic parsing client-side Dynamic parsing server-side ASP.NET Handler Design-time/Building-time parsing Chirpy for VS <link rel="stylesheet/less" href="style.less" type="text/css" /> <script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>
- 26. Can you do more with LESS?
- 27. Your Feedback is Important Please fill out a session evaluation form drop it off at the conference registration desk. Thank you! telerikwatch.com @toddanglin anglin@telerik.com
Editor's Notes
- Wrong answers: -developer job security-make designers feel like programmers
- Before CSS:Styles were mixed with HTML tags (difficult to update, difficult to read)Layout was defined with HTML tags (poor semantic use of tags)
- CSS exists to separate styling and layout decisions from structural meaning of underlying document*Separation of concerns to a degreeCSS rules often tend to create dependencies on HTMLOther benefits of CSS:Performance (caching of CSS rules)Semantic HTML
- http://dzineblog.com/2008/07/20-cool-css-zen-garden-designs.htmlCSS Zen Garden – Example of the flexibility CSS provideshttp://www.csszengarden.com
- Key offendersSupporting different versionsIE6 is the devilExamples of needed hacks and workaroundshttp://www.webdevout.net/css-hacks
- IE6 is the devil – It is the source of many CSS myths, fears, and painful truths.Microsoft is actively trying to help end the IE6 era – goal: less than 1% usage worldwide.
- New CSS3 featuresCSS3 principlesShow example of CSS3 in actionhttp://www.w3.org/Style/CSS/current-workhttp://www.w3.org/TR/2010/WD-css-2010-20101202/#css3
- -Show example of browser prefixes in actionhttp://www.w3.org/TR/CSS21/syndata.html#vendor-keywords
- Great tutorial:http://designshack.co.uk/articles/css/using-less-js-to-simplify-your-css3LESS site: http://lesscss.org/Logo from http://lesscss.org/
- *Depends on how you deploy LESS – runtime conversions of LESS to CSS can have some impact; build-time conversions do not.
- JavaScript preprocessorASP.NET Handler - http://www.4guysfromrolla.com/articles/030310-1.aspxVisual Studio tooling – Chirpy - http://chirpy.codeplex.com/
- -The pros and cons of using runtime vs. design time LESS to CSS parsing