A brief tutorial on some of the basic advantages LESS and other CSS preprocessors have over pure CSS.

1. LESS is More

2. CSS is Great
• Keeps style separate from content
• Lets us write once, use many times
• Helps us stay organized and do really amazing things super
easily

3. Until it Isn’t
• The larger your site gets, the more difficult it can be to know
what’s going on.
• It’s very easy to re-use styles as a package, but not parts of
styles, or basic principles that come up repeatedly
• If we re-use basic ideas by adding classes to our HTML (like we
would with Bootstrap or Foundation), the HTML loses its
semantic meaning.

4. Not Exactly Semantic…
<div class="panel-panel panel-
homepage-column-middle-right
col-md-4”>
(This is Bootstrap.)

5. Preprocessors Fix These Issues
• Variables
• “Mixins”
• Built-in Functions
• Nested Rules
• Calculations

6. Why are we using LESS today?
• SASS/SCSS is somewhat more popular.
• LESS is potentially more familiar to people working in journalism.
• Bootstrap is built on LESS, although they now offer a SASS port.

7. Why are we using LESS today?
If you do work on the web,
chances are you already know
how to use LESS.

8. Clone My Repo
git clone
https://github.com/NathanLawrence
/LESS-demo.git

9. Install Prepros, SimpLESS or Koala
https://prepros.io/
http://wearekiss.com/simpless
http://koala-app.com/

10. Variables
• Actually, “constants” would be more accurate…
• Variables are global.
@primary-color: #006af3;
@alert-type: warning;

11. Mixins
• Incorporate broader ideas into a specific style.
.dotted-border {
border-top: dotted 2px @dk-gray;
border-left: dotted 2px blue;
border-right: dotted 2px blue;
border-bottom: dotted 2px @dk-gray;
}

12. Mixins
• Incorporate broader ideas into a specific style.
.author-bio {
font-size:0.8em;
.dotted-border;
}

13. Mixins
• You can even have mixins with parameters!
.dotted-border (@color-in) {
border-top: dotted 2px @color-in;
border-left: dotted 2px @color-in;
border-right: dotted 2px @color-in;
border-bottom: dotted 2px @color-in;
}

14. Mixins
• You can even have mixins with parameters!
.author-bio {
font-size:0.8em;
.dotted-border(@my-color);
}

15. Built-in Functions
• Color mixing, number rounding, element sizing and more!
@my-color: screen(@color-a, color-b);
@my-string: escape(‘a=2’)

16. Calculations
• Simple math embedded in your styles, so you don’t have to do it
yourself.
@line-height:2*image-height(abc.jpg)

17. Nested Rules
.article-text{
color:@my-color;
h1{
color:red;
}
a{
text-decoration:underline;
&:hover{
text-decoration:none;
}
}
}

18. Nested Rules
.article-text{
color:#006af3;
}
.article-text h1{
color:red;
}
.article-text a{
text-decoration:underline;
}
.article-text a:hover{
text-decoration:none;
}