Doing More with LESS for CSS

Doing More with LESSfor CSS
T: @toddanglin | E: anglin@telerik.com

Introductions
Todd Anglin
Chief Evangelist, Telerik
Microsoft MVP
ASP Insider
President NHDNUG & O’Reilly Author
TelerikWatch.com
@toddanglin

What will we cover?

why do we need CSS?

[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>

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

CSS
Zen
Garden

what is the key CSS challenge?

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; }

IE6 is the [CSS] devil.
Microsoft agrees.
ie6countdown.com

What’s CSS3?
Extensions for CSS2.1
Add functionality, refine definitions

Browser Prefixes
15

-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;

CSS3 IN ACTION
DEMO

wouldn’t it be nice if CSS…

Made it easier to target different browsers
Supported global variables
Made it easier to do DRY CSS
Simplified complicated style hierarchies

LESS for CSS
Use LESS to write less CSS
Variables, operations, mix-ins, nested rules
lesscss.org
LESS is CSS

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*

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; }

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%;
}

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;
}

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;
}

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>

Can you do more with LESS?

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

http://www.telerikwatch.com	1322
http://feeds.feedburner.com	96
url_unknown	32
https://pulse.neudesic.com	15
http://www.techgig.com	15
http://www.newsblur.com	2
http://115.112.206.131	2
http://webcache.googleusercontent.com	1
http://translate.googleusercontent.com	1
http://static.slidesharecdn.com	1

Doing More with LESS for CSS

by Todd Anglin

Accessibility

Categories

Upload Details

Usage Rights

10 Embeds 1,487

Statistics

Doing More with LESS for CSS Presentation Transcript