Using CSS preprocessors effectively¶
by Jonas Wagner
- Known for doing crazy and creative stuff
- Porting Physic engines to JavaScript via Python
- Works as Software Engineer at local.ch
- 3.1 million unique clients
Don’t make a mess¶
- Most programming languages encourage good code pattern
- CSS is not one of those languages
Issues with CSS¶
- No Variables
- No hierarchy
- Prefixes
- Sprites
- Lack of abstraction
Solution: CSS Preprocessors¶
Choosing a Preprocessor
SASS¶
- Official implementation is in Ruby
- Two dialects scss and sass
- Sassy CSS
- Syntactically Awesome Stylesheets
- PySCSS is an implementaton of SCSS in Python
- Compass is
LESS¶
- Originally written in Ruby
- Now implemented using JavaScript in Node.js
- Can be compiled on the client and using Node.js
- Twitter bootstrap uses LESS
Which one?¶
Features virtually equivalent
Both are a superset of CSS
He recommends SCSS
- More explicit syntax
- Compass offers lots of goodies
- Decent Python implementation
Common Features¶
- Variables
- math and functions
- nesting
- avoiding CSS hacks
- More elegant comment system
- Mixins
- Prefixes
Doing it with Django¶
pip install webassets cssmin
STATICFILES_FINDERS = (
...
'django_assets.finders.AssetsFinder',
)
INSTALLED_APPS = (
...,
'django_assets',
)
in assets.py:
from django_assets import Bundle, register
js = Bundle('common/jquery.js', 'site/base.js', 'site/widgets.js',
filters='jsmin', output='gen/packed.js')
register('js_all', js)
{% load assets %}
{% assets "js_all" %}
<script type="text/javascript" src="{{ ASSET_URL }}"></script>
{% endassets %}
Tools¶
- Good editor support for Preprocessors
- Graphical tools like LiveReload and Compass.app
- FireSASS
Warning¶
- Increased complexity
- Might not work with IE
- Makes debugging harder
- Potential for bloat
Conclusion¶
- Preprocessors solve common problems
- Allow us to focus on writing clear and meaningful CSS
- Try it on at least one project
- Plain old CSS feels very silly