The document discusses CSS preprocessors like LESS and SASS. It explains that preprocessors allow you to write CSS in a more maintainable, programmatic way using features like variables, mixins, nested rules, and functions. These features make CSS code more organized, reusable, and reduce duplication. The document provides examples of how to use these features in LESS and recommends LESS for projects using Node.js and frameworks with built-in LESS support.

1. LESS is More
Getting More out of CSS with Pre-Processors

2. Sara Laupp
@slauppy
● First website in 2002
● Full Stack Developer - 5 years
● Custom web applications at
consulting firm
● Software Engineer at Enova
HTML
CSS
jQuery
AngularJS
PHP
MySQL
Redis
Ruby
Rails
Postgresql

3. What is a CSS Pre-Processor?
Extension of CSS
Compiles into CSS syntax

4. LESS or SASS?
● Both have the same basic features
● Syntax preference
● Dependency preference

5. Use SASS when...
● Ruby dependency is fine
● You prefer the Ruby syntax
○ SASS is NOT backwards compatible with CSS
○ SCSS (Sassy CSS) is backwards compatible with CSS
● Your project is using Ruby/Rails
● Frameworks with SASS support:
○ Rails
○ Laravel

6. Use LESS when...
● NodeJS dependency is fine
● You prefer the CSS code style
○ LESS is backwards compatible with CSS
● Frameworks with built-in LESS support
○ Laravel

7. LESS is More...
● Controllable
● Maintainable
● Robust
● Programmatic
Why is this better than CSS?

8. button, a.button {
display: inline-block;
padding: 6px 10px;
background-color: #551155;
font-family: Georgia, serif;
font-style: italic;
color: #E0D8E0;
font-size: 1.1em;
line-height: 1.5em;
border-top: 2px solid #E0D8E0;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
border-left: 2px solid #E0D8E0;
}
button:hover, a.button:hover {
background-color: #FFFFFF;
color: #330033;
border-top: 2px solid #443D44;
border-right: 2px solid #E0D8E0;
border-bottom: 2px solid #E0D8E0;
border-left: 2px solid #443D44;
cursor: pointer;
}
Button Example: CSS

9. @dark-purple: #551155;
@light-gray: #E0D8E0;
@dark-gray: #443D44;
@almost-black: #330033;
.bordered(@left-color, @right-color) {
border-top: 2px solid @left-color;
border-right: 2px solid @right-color;
border-bottom: 2px solid @right-color;
border-left: 2px solid @left-color;
}
button, a.button {
display: inline-block;
padding: 6px 10px;
background-color: @dark-purple;
font-family: Georgia, serif;
font-style: italic;
color: @light-gray;
font-size: 1.1em;
line-height: 1.5em;
.bordered(@light-gray, @almost-black);
&:hover {
background-color: white;
color: @almost-black;
.bordered(@dark-gray, @light-gray);
cursor: pointer;
}
}
Button Example: LESS

10. DRY,
Maintainable Code!

11. What’s the big deal?

12. LESS Setup
Install npm
Manually compile into css
Link your CSS in HTML as usual:
$ npm install -g less
$ lessc styles.less styles.css
<link rel="stylesheet" type="text/css" href="styles.css" />

13. Autocompiling on the Client Side
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
Compiles on every page load in the browser.
Not meant for use in production!
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>

14. Autocompiling During Development
Watch your LESS files with
● Grunt - https://github.com/gruntjs/grunt-contrib-less
● autoless - https://github.com/jgonera/autoless
Link to the compiled CSS as usual
<link rel="stylesheet" type="text/css" href="styles.css" />

15. CSS Pre-Processor Features
● Variables
● Mixins
● Nested rules
● Operators
● Basic inheritance
● Function library

16. Variables
@nice-blue: #5B83AD;
@light-yellow: #000000;
#header {
background-color: @nice-blue;
color: @light-yellow;
}
button.default {
background-color: @light-yellow;
color: @nice-blue;
}
#header {
background-color: #5B83AD;
color: #000000;
}
button.default {
background-color: #000000;
color: #5B83AD;
}

17. Mixins
.dotted-border {
border-top: dotted 2px red;
border-bottom: dotted 1px red;
}
#breadcrumbs a {
color: #111;
.dotted-border;
}
.dotted a {
color: red;
.dotted-border;
}
#breadcrumbs a {
color: #111;
border-top: dotted 2px red;
border-bottom: dotted 1px red;
}
.dotted a {
color: red;
border-top: dotted 2px red;
border-bottom: dotted 1px red;
}

18. Nested Rules
a {
text-decoration: none;
color: #880099;
&:visited {
color: #E0D8E0;
}
&:hover,
&:visited:hover,
&:active {
color: #330033;
}
}
a {
text-decoration: none;
color: #880099;
}
a:visited {
color: #E0D8E0;
}
a:hover,
a:visited:hover,
a:active {
color: #330033;
}

19. Operators
@base-width: 5%;
@base-color: #224488
@lighter-color: #112244 + #111;
#sidebar {
max-width: @base-width;
color: @base-color;
background-color: @base-color / 2;
}
#filler {
max-width: @base-width * 2;
color: @lighter-color;
}
#sidebar {
max-width: 5%;
color: #224488;
background-color: #112244;
}
#filler {
max-width: 10%;
color: #223355;
}

20. Basic Inheritance (extend)
.button-default {
font-size: 1.2em;
font-weight: bold;
color: black;
background-color: white;
}
.button-submit {
&:extend(.button-default);
color: white;
background-color: black;
}
.button-default {
font-size: 1.2em;
font-weight: bold;
color: black;
background-color: white;
}
.button-submit,
.button-default {
color: white;
background-color: black;
}

21. Function Library
@purple: mix(#ff0000, #0000ff, 50%);
@color-base : #800080;
@color-complement : spin(@color-base, 180);
Supported function types:
● String manipulation
● Math (abs, sqrt, etc…)
● Color manipulation
● http://lesscss.org/functions/

22. References
● LESS: http://lesscss.org/
● SASS: http://sass-lang.com/
● Laravel LESS & SASS Documentation: https://laravel.com/docs/5.1/elixir#working-
with-stylesheets
● Rails SASS Documentation: https://github.com/rails/sass-rails
● LESS Color Manipulation Tutorial: http://webdesign.tutsplus.
com/tutorials/creating-color-schemes-with-less-color-functions--cms-23668

23. ?