LESS and SASS are CSS preprocessors that allow for writing CSS in a smarter, more organized way using functions, mixins, and other features. This results in more concise CSS that is easier to write, track, and maintain over time. To use a preprocessor like LESS, a file with a .less extension is created. A LESS app or tool is used to watch the .less file and compile it into a .css file that can then be used on a website. CSS preprocessors are useful for Drupal themes as they allow for better organization of CSS and reusability through variables and nesting.

1. Do MORE WITH LESS
for your CSS
Sean Lange
Frontend Developer, Lullabot
sean.lange@lullabot.com

2. Who are you?
Drupal? FrontPage? Dreamweaver?
Have you ever written HTML
Are you familiar with CSS
Programmers / Developers
Experience with PreProcessors
Fear Factor?

3. Who am I?
Sean Lange
FrontEnd Developer with Lullabot
Website Perception Enhancement Facilitator
Web Beautification Implementation Specialist
Drupal via FrontPage/Dreamweaver
FrontEnd --> Developer --> FrontEnd

4. Why are we here?
What is a CSS preprocessor?
What is LESS and SASS?
Is it valuable in Drupal?
How do I preprocess my CSS?
Why is CSS preprocessor important?!?

5. What is CSS?
Cascading Style Sheets - Responsible for
determining presentation of HTML. Provides
ability to create terrific visual displays.
Has evolved over the years with CSS2, CSS3,
based in the needs of web browser
presentation.
Long, repetitive, inconsistent

6. what is pre-process?
Typ Smthng --> TYPE SOMETHING
Rules, Patterns, Syntax to produce some kind
of desired output. (@imgpath == ‘“../../images/buttons/
green-buttons/large-green.jpg)
Provides opportunity for logical order and
structure to output results.
Compiler

7. what is LESS?
Write CSS in a smarter more organized
manner.
Use functions, mixins, operations and more.
Ability to reuse colors, styles and snippets
easily.
Results in the ability to write more concise
style information that is easy to read, track,
and build upon.

8. what it is like
LESS is Shorthand for CSS
LESS is Visual Structure for CSS
LESS is Automation for repetitive styles for
CSS
LESS is Consistency for CSS
it’s good for...

9. break it down
Ultimately, the
browser reads
CSS, so
ultimately you #main-menu {…}
have to end up #main-menu img {…}
with a .css file #main-menu ul.menu {…}
to render the #main-menu ul.menu li {…}
page. so… #main-menu ul.menu a {…}
for .css we just
make a long list,
and try to keep
it 'together'.

10. Is this REAL?
A though with
another thought's Jon Smith […]
hat on…. Jon Smith's address […]
Jon Smith's phone (h) […]
If you were Jon Smith's phone (w) […]
writing down Jon Smith's email […]
someone's contact
information, you'd
never write…

11. less address cruft
WE SEE....
WE DON’T SEE...
Jon Smith
Jon Smith […] address
Jon Smith's address […] phone
Jon Smith's phone (h) […] (h)
Jon Smith's phone (w) […] (m)
Jon Smith's email […] email

12. keeping it together
WE WANT TO SEE....
WE DON’T WANT
TO SEE...
#main-menu {
#main-menu {…} img {...}
#main-menu img {…} ul.menu {...
#main-menu ul.menu {…}
#main-menu ul.menu li {…} li {...}
#main-menu ul.menu span {…} span {…}
}
}

13. is it for Drupal?
LESS is Order and Structure for Drupal Theming
(hierarchy of elements/classes/nesting)
LESS is Rapid CSS Evolution for Drupal Theming
(creating variables for swapping values and alterations of values)
LESS is Fail, Fail, Pass for Drupal Theming (reusing success
and changing simple values in functions)
LESS is Consistency for Drupal Theming (padding/line-
height/clearfixes/similarities within different views)

14. how to do
a file with a .less extension.
use LESS app (or Codekit) and let it ‘watch’
the file or directory.
write some less in the .less file
save the .less file, the watcher (app) does it’s
thing.
RESULT... a .css file

15. how to do
a file with a .less extension.
use LESS app (or Codekit) and let it ‘watch’
the file or directory.
write some less in the .less file
save the .less file, the watcher (app) does it’s
thing.
RESULT... a .css file

16. tool
JS & DOC: http://
lesscss.org
APP: http:/ /
incident57.com/less/
Write
Compile
Use

17. http://css-tricks.com/poll-results-popularity-of-css-preprocessors/