Intro to LESS – But first, CSS – Now, LESS

View Github Repository Open presentation in a new window

dunsworth

See all presentation from dunsworth

Intro to LESS – But first, CSS – Now, LESS

0 0

introToLESS

introToLESS

On Github dunsworth / introToLESS

Intro to LESS

Jeremy Dunsworth - Learning Objects

But first, CSS

CSS lets you apply styling to elements

Selectors apply declarations to elements

Declarations specify values for properties

Let's see what this baby can do

CSS

Don't worry. As long as you hit that wire with the connecting hook at precisely 88 miles per hour, the instance the lightning strikes the tower, everything will be fine. You too. A bolt of lightning, unfortunately, you never know when or where it's ever gonna strike. Damn, where is that kid. Damn. Damn damn. You're late, do you have no concept of time? You know Marty, I'm gonna be very sad to see you go. You've really mad a difference in my life, you've given me something to shoot for. Just knowing, that I'm gonna be around to se 1985, that I'm gonna succeed in this. That I'm gonna have a chance to travel through time. It's going to be really hard waiting 30 years before I could talk to you about everything that's happened in the past few days. I'm really gonna miss you, Marty.

Please note that Einstein's clock is in complete synchronization with my control watch. No no no no no, Marty, both you and Jennifer turn out fine. It's your kids, Marty, something has got to be done about your kids. No, Marty, we've already agreed that having information about the future could be extremely dangerous. Even if your intentions are good, they could backfire drastically. Whatever you've got to tell me I'll find out through the natural course of time. After I fell off my toilet, I drew this. Yeah.

deloreanipsum.com

Output

#backToTheFuture { background: url(http://images3.wikia.nocookie.net/__cb20121024231110/epicrapbattlesofhistory/images/3/34/Doc_Brown.png) no-repeat; height: 300px; position: relative; } #backToTheFuture p { color: white; font-size: 35px; font-family: Impact; text-shadow: -3px 0 black, 0 3px black, 3px 0 black, 0 -3px black; letter-spacing: 2px; position: absolute; bottom: 0px; left: 100px; }

CSS is very powerful, but it does have some issues...

It's hard to promote reuse 
#something {
  background: #123456; /* client branding color */
}
#somethingElse {
  background: #123456: /* the same exact color */
}
#yetAnotherThing {
  background: #234567; /* minor variation of that same color */
}

You can get around this by sullying your beautiful semantic markup , but that's fragile 

<style>
    .brandingColorOne {
      background: #123456;
    }
</style>
<div class="brandingColorOne">
    Messy
</div>
There are

always

browser specific hacks

These are hard to read and maintain

Relationships between elements are fragile 
.column {
  display: inline-block;
}
#column1 {
  width: 70%;
}
#column2 {
  width: 30%;
}
It can be verbose 
#myDiv {
  background: linear-gradient(to bottom,
                rgba(30,87,153,1) 0%
                rgba(41,137,216,1) 50%,
                rgba(32,124,202,1) 51%,
                rgba(125,185,232,1) 100%);
}
And that's without vendor prefixes and hacks 
#myDiv {
  /* Old browsers */
  background: rgb(30,87,153);
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  /* FF3.6+ */
  background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);
  /* Chrome,Safari4+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1)));
  /* Chrome10+,Safari5.1+ */
  background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);
  /* Opera 11.10+ */
  background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);
  /* IE10+ */
  background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);
  /* W3C */
  background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);
  /* IE6-8 */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
}
We can do better!

Now, LESS

LESS is a superset of CSS that gives us programming concepts

Variables

@color: #4D926F; #variables { background: @color; } LESS 
#variables {
    background: #4D926F;
}
CSS

Mixins

.border-radius (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) { -webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); -moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); } #somediv { .border-radius(20px); }

LESS

#somediv {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

CSS

Color Math

@base: #789; @lighten1: lighten(@base, 15%); @complement1: spin(@base, 180); @complement2: lighten(spin(@base, 180), 15%); #colorMathExample { .swatch { padding: 5px; span { width: 45%; height:2.7em; display: inline-block; } .one { background: @base; } .two { background: @lighten1; } .three { background: @complement1; } .four { background: @complement2; } } }

LESS

Output

@base: #336666; @lighter1: lighten(spin(@base, 5), 10%); @lighter2: lighten(spin(@base, 10), 20%); @darker1: darken(spin(@base, -5), 10%); @darker2: darken(spin(@base, -10), 20%); #colorMathExample { .swatch { margin-top: 1em; span { height: 3em; width: 90% / 5; display: inline-block; } .one { background: @base; } .two { background: @lighter1; } .three { background: @lighter2; } .four { background: @darker1; } .five { background: @darker2; } } }

Nested Rules

#header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } }

LESS

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

CSS

Functions & Operators

@the-border: 1px; @base-color: #111; @red: #842210; #header { color: (@base-color * 3); border-left: @the-border; border-right: (@the-border * 2); } #footer { color: (@base-color + #003300); border-color: desaturate(@red, 10%); }

LESS

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer {
  color: #114411;
  border-color: #7d2717;
}

CSS

Potential pitfalls

  • Huge stylesheets - concise LESS compiles to verbose CSS
  • Decreased readability - deeply nested mixins, logic

More advanced things (for later)

  • JavaScript Evaluation
  • Loops
  • Conditions
  • Nested media queries
  • Color blending
  • Namespaces

What about Sass?

A topic for another day

Sass is often a step ahead in terms of power, but the power comes with complexity. We've settled on LESS for now.

Questions or comments?

Additional Resources