1. Myths of CSS
Preprocessors
Ramon Lapenta - @ramono - #sass

2. About me
• Frontend developer @ Cyber-Duck Ltd
• Making websites for over 10 years
• Love what I do for a living
• Love to talk about it

3. What are CSS Preprocessors?
• A way of adding functionality to CSS in the
form of mixins, extends, functions.

4. What are CSS Preprocessors?
• A way of reducing development time by
using variables and nesting rules.

5. Usage stats: Europe

6. Usage stats: America

7. Usage stats: America

8. Why use preprocessors?
1. CSS is repetitive
2. CSS doesn’t have variables
3. Inflexible, limited reusability
4. Complex websites are hard to maintain

9. The Myths
1.Adds complexity to the development process
2.You lose control over the final code
3.Adds overhead to the website
4.Adds extra dependencies to your workflow
5.Too hard to debug

10. The Myths
God, SCSS looks like
JavaScript and PHP
mated in a drunken state.
Christian Heilmann

11. Bull!
The Famous Bull Of Wall Street - http://goo.gl/kKsghb

12. Lets debunk
the myths!

13. Myth: Complexity
• Nesting is a natural way of coding
• Named variables are easier to manage than
individual values like colours (E.g.
#0E2740)
• You don’t have to use all the functionality

14. Myth: Lose control
• If your CSS code is currently horrible, your
Sass will undoubtedly be horrible
• Sass doesn’t write code by itself
• Use expanded output option during
development

15. Myth: Overhead
• Compiled file is just plain CSS
• Automatically minify/compress
• Easy to add (or remove) vendor evil
prefixes
• Seamless file concatenation

16. Myth: Dependencies
• Your current set up has many
dependencies
• If you don’t use a pre-processor, you need
a post-processor
• Many tools are available for free, for every
platform

17. Myth: Hard to debug
• Organised code shouldn’t be hard to debug
• There are ways
• It’s getting better
• The cost is low compared to the benefit

18. Resources & Tools

19. Documentation
• All three major pre-processors have
excellent documentation online
• Tutorials available
• Videos everywhere

20. Graphic Tools
• Codekit
(http://incident57.com/codekit/)
• Prepros
(http://alphapixels.com/prepros/)
• Compass
(http://compass.kkbox.com)
• Hammer
(http://hammerformac.com)
• Koala (http://koala-app.com)
• Mixture (http://mixture.io)
LiveReload (http://livereload.com)
Scout
(http://mhs.github.io/scout-app/)
Crunch (http://crunchapp.net)
SimpleLess
(http://wearekiss.com/simpless)
WinLess (http://winless.org)
LessApp
(http://incident57.com/less/)

21. Other tools
• Brunch.io
• Grunt!
• Buildr
• Gulp
• Command line
(it’s not hard)
$ sass --watch file.scss:file.css
$ sass --watch scss:css
Watch a file
Watch a folder

22. Techniques &
Tips

23. Debug: —debug-info
• Debug info flag tells you with a comment where
the rule is located in the source file.
• Available only up to Sass 3.2
$ sass --watch —style expanded —debug-info scss:css
Watch a folder
/* _head.scss line: 24 */
.head {
background-color: darkslateblue;
}
Output

24. Debug: Chrome inspector
• Chrome 30+ includes
Sourcemap (Sass 3.3
and Less 1.5+) support
by default
• Stylus considering it

25. Debug: Chrome inspector
• Sourcemaps creates a map of your CSS
• Available only on Sass 3.3+
$ lessc common.less > common.css
Watch the folder
common.css
common.map
Output

26. Debug: File organisation
• Divide and conquer
• Master the
@import rules and
file concatenation
• It’s easier to find a
rule in a small file
public/
assets/
css/
styles.css
img/
js/
scss/
_carousel.scss
_contact.scss
_grid.scss
_home.scss
_typo.scss
styles.scss

27. Tip: File organisation
• Import within media queries so don’t repeat
media queries
@media (max-width: 599px) {
@import “small/base.scss”;
}
• Make one file by component / section with
all its media queries

28. Tip: Mixins
• Mixins are
parametrisable
snippets of code
@mixin box($type: border-box) {
box-sizing: $type;
-ms-box-sizing: $type;
-moz-box-sizing: $type;
-webkit-box-sizing: $type;
}
.box {
padding: 20px;
width: 100%;
@include box(border-box);
}

29. Tip: Mixins
• Easy way to add
prefixes .box {
padding: 20px;
width: 100%;
box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

30. Tip: Extends
• Extends allows you
to alter rules
without repeating
code
• Use % to create a
rule that outputs
code only when
extended.
.go {
color: $white;
padding: 5px 10px;
border-radius: 5px;
text-decoration: none;
font-size: 1em;
text-transform: uppercase;
background-color: $green;
}
.cancel {
@extend .go;
background-color: $red;
}

31. Tip: Extends
• Clever separation
.go, .cancel {
color: white;
padding: 5px 10px;
border-radius: 5px;
text-decoration: none;
font-size: 1em;
text-transform: uppercase;
background-color: green;
}
.cancel {
background-color: red;
}

32. Tip: Nesting
• Nesting feels right
• It’s easy and you
write less
.box {
float: right;
footer {
padding: 20px;
.btn {
color: $white;
}
}
}

33. Tip: Nesting
• Easy to get carried away
• Can bring over-specificity issues
/ Compiles to
.box {
float: right;
}
.box footer {
padding: 20px;
}
.box footer .btn {
color: white;
}

34. Tip: Github resources
• Tons of resources:
Mixins, frameworks, libraries, tutorials,

35. Tip pitch: hoisin.scss
• Light & extensible
• Responsive
• Doesn’t make any design assumptions
• Mobile first, Content first, Performance first
• http://cyber-duck.github.io/hoisin.scss/

36. Which one is the best?
• Sass!
• All have about the same functionality
• Ensure it fits with your workflow
• Compatibility with existing code
• What feels better to you?

37. The Myths
1. Adds complexity to the development process
2. You lose control over the final code
3. Adds overhead to the website
4. Adds extra dependencies to your workflow
5. Too hard to debug

38. Final Considerations
• If you are a CSS beginner
• You need to know how CSS works before
using a pre-processor
• Source Control: ignore compiled / compile on
deployment

39. Thanks!
Ramon Lapenta - @ramono - sxsw.com/rate