Drupal & CSS Preprocessors

VS

CSS preprocessors like Sass and LESS are languages made up of
normal CSS plus some extra features, such as variables, nested
rules, math, mixins, etc.

Helper applications can convert stylesheets written in Sass or
LESS to standard CSS that can be included normally with your
theme.
LESS Sass & Compass
http://lesscss.org http://sass-lang.com
http://compass-style.org

Because CSS SUCKS
(sometimes)

Redundancy
#block-menu-block-main-menu-level-tertiary .content a:link {}
#block-menu-block-main-menu-level-tertiary .content a:visited {}
#block-menu-block-main-menu-level-tertiary .content a:hover,
#block-menu-block-main-menu-level-tertiary .content a:focus {}

Redundancy
a { color: #cff; }
.box { border-color: #cff; }

Redundancy
.box {

-webkit-box-shadow: 1px 1px 10px 3px #ccc;

-moz-box-shadow: 1px 1px 10px 3px #ccc;

box-shadow: 1px 1px 10px 3px #ccc;
}

From John Albins WIlkins’ “SASS: CSS with Attitude,” Drupal Design Camp Berlin 2011.

(From Matt Farina and Nathan Smith's "Using Sass & Compass in Drupal Theming" http://denver2012.drupal.org/program/sessions/using-sass-compass-drupal-theming)

Preprocessors make CSS
more awesomer.
Unlike in standard CSS, with a preprocessor you can:
1. Build complicated mixins
2. Create variables and perform operations on variables like in PHP
(Mixins and Parametric Mixins)
3. Nest rules and syntax
4. Accept math operations and computations inline
5. Change scope
6. Evaluate JS inline
7. Organize your CSS rules in hierarchies; group things logically
8. Create reusable code to use on any project

VARIABLES

SASS LESS
$color: red; @color: red;
div { div {
color: $color; color: @color;
} }

Chris Epstein: Sass/Less Comparison, https://gist.github.com/674726

NESTED SELECTORS

SASS LESS
p { p {
a { a {
color: red; color: red;
&:hover { &:hover {
color: blue; color: blue;
} }
} }
} }


MIXINS

SASS LESS
@mixin bordered { .bordered {
border-top: dotted 1px black; border-top: dotted 1px black;
border-bottom: solid 2px black; border-bottom: solid 2px black;
} }

#menu a { #menu a {
@include bordered; .bordered;
} }


MIXINS WITH ARGUMENTS

SASS LESS
@mixin bordered($width: 2px) { .bordered(@width: 2px) {
border: $width solid black; border: @width solid black;
} }

#menu a { #menu a {
@include bordered(4px); .bordered(4px);
} }


SELECTOR INHERITANCE

SASS LESS
.bordered { N/A
border: 1px solid back;
}

#menu a {
@extend .bordered;
}


CONDITIONALS & CONTROLS

SASS LESS
@if lightness($color) > 30% { .mixin (@color) when (lightness(@color) > 30%) {
background-color: black; background-color: black;
} }
@else { .mixin (@color) when (lightness(@color) =< 30%) {
background-color: white; background-color: white;
} }

@for $i from 1px to 10px {
.border-#{i} {
border: $i solid blue;
}
}


NAMESPACES
SASS LESS
N/A #bundle () {
.red { background-color: red }
.green { background-color: green }
}

.foo {
#bundle > .red;
}

COMPILES AS:

.foo {
background-color: red;
}


What does all this mean?

Libraries!

STYLE LIBRARIES

Both LESS/SASS can be used to create personal libraries of
mixins and variables, which you can import into projects
with a single line: @import “import-mixins.less”;

PRE-BUILT LIBRARIES

Many pre-built collections are available for both LESS and Sass.
The best known are Bootstrap for LESS and Compass for Sass.

BOOTSTRAP
Bootstrap for LESS includes mixins and variables for:
Global styles Buttons
Grid systems Navigation
Layouts Navbars
@media queries Breadcrumbs
Typography Pagination
Tables Labels and badges
Forms Thumbnails
Images Alerts
Icons Progress bars
Dropdowns

It also includes 13 Javascript scripts for everything from dropdowns and buttons to popups and
carousels.

COMPASS
Compass is a helper library for Sass. It includes libraries of shared mixins, a package manager to add
additional extension libraries, and an executable that can easily convert Sass ﬁles into CSS.
Reset Helper functions for: CSS3 Mixins:
Grid Background Color Stops Appearance Font Face
Sticky Footer Colors Background Clip Hyphenation
Stretching Constants Background Origin Images
Typography Cross Browser Background Size Inline Block
Vertical Rhythm Display Helpers Border Radius Opacity
Color Font Files Box Shared Utilities
General Image Dimensions Box Shadow Text Shadow
Print Inline Data Box Sizing Transform
Sprites Math CSS Regions Transition
Tables Selectors CSS3 Pie User Interface
Sprites Columns
URLs Filter

In addition, many 3rd-party extensions exist for Compass, including a Sass version of Bootstrap:
Sassy Buttons: fancy CSS3 button - jaredhardy.com/sassy-buttons
Modular Scale: calculate typographic scales - github.com/scottkellum/modular-scale
Survival Kit: toolset for designing web sites in the browser - thecodingdesigner.com/survivalkit
Susy: responsive grids for Compass - susy.oddbird.net
Singularity Grid: responsive grid system - singularity.gs
Breakpoint: really simple media queries - breakpoint-sass.com
Text shadow - sassymotherefﬁngtextshadow.com

Libraries are nice for reusing code...
and sharing with your team.

COMPILING CSS
LESS and SASS are preprocessed languages that must be
compiled before being served to the browser.
There are three ways to compile LESS & Sass:
• Server-side
• In Drupal
• Pre-compiled

The exception is including
less.js on the page and
compiling client-side.
Not recommended.

COMPILING SERVER-SIDE

LESS & Sass can be converted on-the-fly using PHP.

LessPHP (http://leafo.net/lessphp) compiles LESS at
runtime, using server-side PHP rather than client-side
Javascript. This method requires lessphp and the creation
of a styles.php.

SASS typically runs on Ruby and is processed server-side.
PHPSass (http://www.phpsass.com) is a PHP compiler for
SASS.

For both, compiling on-the-fly can make development
more difficult, and there may be some performance and
caching issues.

COMPILING IN DRUPAL
LESS CSS Preprocessor - http://drupal.org/project/less
The LESS module parses LESS on the server. Once LESS is compiled, it's cached by the Drupal’s default CSS
caching, so the performance hit is negligible. The modules will automatically process any LESS files that are
added using drupal_add_css or through your theme's .info file. Works with Drupal's CSS compression.
Requires the Libraries API and lessphp (http://leafo.net/lessphp/). Place LESS and Libraries in your modules
directory and lessphp in your libraries directory (sites/all/libraries/lessphp/lessc.inc.php).

Sassy - http://drupal.org/project/sassy
The Sassy module automatically compiles SASS/SCSS into CSS via PHP, rather than Ruby. Compiles all .scss
and .sass files that are added using drupal_add_css or through your theme's .info file. Includes support for
Compass, Bootstrap, and Foundation. Works with Drupal's CSS compression.
Requires the Prepro module, Libraries API, and PHPSass (http://github.com/richthegeek/phpsass/downloads).
Place Sassy, Prepro, and Libraries in your modules directory and PHPSass in your libraries directory.

NOTE: Sass (http://drupal.org/project/sass) is another module for Drupal that compiles SASS/SCSS files. However, PHP needs code
write access to theme.

COMPILING IN DRUPAL

The bad news.

Compiling broken LESS or
Sass can break your site.

Not good.

PRE-COMPILING
Many people recommend compiling LESS and Sass locally.
They suggest isolating LESS/Sass from Drupal by using a
compiler to watch your .less/.sass/.scss files, then compiling to
pure CSS files that you can deploy to your staging and
production servers.

Compiling locally makes sense. It takes advantage of first-party
releases of Sass and LESS directly. It avoids performance and
caching issues. And your site won’t break if you push broken
LESS or Sass.

If CSS preprocessors are really only useful during the
development phase, it makes sense to keep them there,

PRE-COMPILING: LESS
To compile LESS locally:

1. Add less.js to your development theme.

2. You can use a compiler like Less.app (http://incident57.com/less/) or
CodeKit (http://incident57.com/codekit/) to compile your LESS into CSS
before publishing on the web. But you could also compile LESS into CSS
using just your browser: view the source CSS in a browser and copy-n-paste
into a CSS ﬁle.

PRE-COMPILING: SASS/SCSS
You can use Compass.app or CodeKit to compile Sass locally, or you can
compile via the command-line:
1. If on Windows or Linux, set up Ruby - http://sonspring.com/journal/sass-for-designers.
2. Set up Compass & SASS: $gem install compass
3. Add conﬁg.rb to your theme directory (see next slide)
4. cd to your theme directory and run: $compass watch
If you just want to ﬂush cache and compile, run:
$compass clean && compass compile

(From Matt Farina and Nathan Smith's "Using Sass & Compass in Drupal Theming" http://denver2012.drupal.org/program/sessions/
using-sass-compass-drupal-theming)

DRUPAL CSS COMPRESSION

Even when you minimize compiled files, use Drupal’s CSS compression to benefit from:

1. Cache-busting. File name is changed to... “css_VvtjvgJd9tI4sfrm9jVFoHRnrEBsJlQs.css”

2. <link /> instead of <style>@import</style> (older IE versions are slower at the latter)

3. Full paths: Drupal replaces url(../images/file.png) with url(/full/path/to/images/file.png)
— Useful if you have assets on a CDN or subdomain.

(From Matt Farina and Nathan Smith's "Using Sass & Compass in Drupal Theming" http://denver2012.drupal.org/program/sessions/using-sass-compass-drupal-theming)

Which is better--
LESS or Sass?

THEIR SIMILARITIES
There really isn’t much difference between Sass and LESS.
1. They both have active communities.
2. Both will run on PHP.
3. LESS syntax was closer to CSS than Sass, but with the
release of Sassy CSS (SCSS), this is no longer the case.
4. It’s just as easy, less fragile, and probably more secure to
use Sass and LESS straight-up, rather than with a module.
So there's no need to evaluate the Drupal modules.
5. Both should be used only for development and compiled
locally, and both have decent compilers available.

THEIR DIFFERENCES
The main difference between LESS and Sass is in the
libraries and frameworks available for each.
Sass LESS
Compass Bootstrap
Foundation
Bootstrap

In addition, more Drupal themes use Sass:
Sass LESS
Zen Basic
AdaptiveTheme
Basic
Boilerplate
Sasson
Aurora

WHO’S USING WHAT?

Results from 13,000 respondents to Chris Coyier’s “Popularity of CSS Preprocessors” poll.

Why John Albin Wilkins choose SASS for Zen: "We picked Sass mostly
because it is a much more mature project, especially when you add
Compass into the mix. The answer to 'Does LESS have any supporting
libraries that can compare to Compass?' seems quite lacking."

CONCLUSION
(GRAND FINALE)

Use Sass for development only, compile locally
and share a team library.
LESS might be a little easier to learn and install. However:
★ In my research, I found more documentation and extensions for Sass.
★ I heard more people say they’d switched from LESS to Sass (never vice versa).
★ FireSass.
★ Sass has Compass, as well as the Sass version of Bootstrap.

Drupal & CSS Preprocessors

Recommended

More Related Content

What's hot (20)

Viewers also liked (8)

Similar to Drupal & CSS Preprocessors (20)

Recently uploaded (20)

Drupal & CSS Preprocessors

Editor's Notes