2. VSCSS preprocessors like Sass and LESS are languages made up ofnormal CSS plus some extra features, such as variables, nestedrules, math, mixins, etc.Helper applications can convert stylesheets written in Sass orLESS to standard CSS that can be included normally with yourtheme. LESS Sass & Compass http://lesscss.org http://sass-lang.com http://compass-style.org
5. (From Matt Farina and Nathan Smiths "Using Sass & Compass in Drupal Theming" http://denver2012.drupal.org/program/sessions/using-sass-compass-drupal-theming)
6. Preprocessors make CSS more awesomer.Unlike in standard CSS, with a preprocessor you can:1. Build complicated mixins2. Create variables and perform operations on variables like in PHP (Mixins and Parametric Mixins)3. Nest rules and syntax4. Accept math operations and computations inline5. Change scope6. Evaluate JS inline7. Organize your CSS rules in hierarchies; group things logically8. Create reusable code to use on any project
21. STYLE LIBRARIESBoth LESS/SASS can be used to create personal libraries ofmixins and variables, which you can import into projectswith a single line: @import “import-mixins.less”;
22. PRE-BUILT LIBRARIESMany pre-built collections are available for both LESS and Sass.The best known are Bootstrap for LESS and Compass for Sass.
24. COMPASSCompass is a helper library for Sass. It includes libraries of shared mixins, a package manager to addadditional 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 FaceSticky Footer Colors Background Clip HyphenationStretching Constants Background Origin ImagesTypography Cross Browser Background Size Inline BlockVertical Rhythm Display Helpers Border Radius OpacityColor Font Files Box Shared UtilitiesGeneral Image Dimensions Box Shadow Text ShadowPrint Inline Data Box Sizing TransformSprites Math CSS Regions TransitionTables Selectors CSS3 Pie User Interface Sprites Columns URLs FilterIn addition, many 3rd-party extensions exist for Compass, including a Sass version of Bootstrap:Sassy Buttons: fancy CSS3 button - jaredhardy.com/sassy-buttonsModular Scale: calculate typographic scales - github.com/scottkellum/modular-scaleSurvival Kit: toolset for designing web sites in the browser - thecodingdesigner.com/survivalkitSusy: responsive grids for Compass - susy.oddbird.netSingularity Grid: responsive grid system - singularity.gsBreakpoint: really simple media queries - breakpoint-sass.comText shadow - sassymotherefﬁngtextshadow.com
25. Libraries are nice for reusing code...and sharing with your team.
26. How do LESSand Sass work?
27. COMPILING CSSLESS and SASS are preprocessed languages that must becompiled 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.
29. COMPILING IN DRUPALLESS CSS Preprocessor - http://drupal.org/project/lessThe LESS module parses LESS on the server. Once LESS is compiled, its cached by the Drupal’s default CSScaching, so the performance hit is negligible. The modules will automatically process any LESS ﬁles that areadded using drupal_add_css or through your themes .info ﬁle. Works with Drupals CSS compression.Requires the Libraries API and lessphp (http://leafo.net/lessphp/). Place LESS and Libraries in your modulesdirectory and lessphp in your libraries directory (sites/all/libraries/lessphp/lessc.inc.php).Sassy - http://drupal.org/project/sassyThe Sassy module automatically compiles SASS/SCSS into CSS via PHP, rather than Ruby. Compiles all .scssand .sass ﬁles that are added using drupal_add_css or through your themes .info ﬁle. Includes support forCompass, Bootstrap, and Foundation. Works with Drupals 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 ﬁles. However, PHP needs codewrite access to theme.
30. COMPILING IN DRUPALThe bad news.Compiling broken LESS orSass can break your site.Not good.
31. PRE-COMPILINGMany people recommend compiling LESS and Sass locally.They suggest isolating LESS/Sass from Drupal by using acompiler to watch your .less/.sass/.scss ﬁles, then compiling topure CSS ﬁles that you can deploy to your staging andproduction servers.Compiling locally makes sense. It takes advantage of ﬁrst-partyreleases of Sass and LESS directly. It avoids performance andcaching issues. And your site won’t break if you push brokenLESS or Sass.If CSS preprocessors are really only useful during thedevelopment phase, it makes sense to keep them there,
32. PRE-COMPILING: LESSTo compile LESS locally:1. Add less.js to your development theme.2. You can use a compiler like Less.app (http://incident57.com/less/) orCodeKit (http://incident57.com/codekit/) to compile your LESS into CSSbefore publishing on the web. But you could also compile LESS into CSSusing just your browser: view the source CSS in a browser and copy-n-pasteinto a CSS ﬁle.
33. PRE-COMPILING: SASS/SCSSYou can use Compass.app or CodeKit to compile Sass locally, or you cancompile 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 compass3. 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 Smiths "Using Sass & Compass in Drupal Theming" http://denver2012.drupal.org/program/sessions/using-sass-compass-drupal-theming)
34. (From Matt Farina and Nathan Smiths "Using Sass & Compass in Drupal Theming" http://denver2012.drupal.org/program/sessions/using-sass-compass-drupal-theming)
35. DRUPAL CSS COMPRESSIONEven when you minimize compiled ﬁles, use Drupal’s CSS compression to beneﬁt 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/ﬁle.png) with url(/full/path/to/images/ﬁle.png) — Useful if you have assets on a CDN or subdomain.(From Matt Farina and Nathan Smiths "Using Sass & Compass in Drupal Theming" http://denver2012.drupal.org/program/sessions/using-sass-compass-drupal-theming)
36. Which is better-- LESS or Sass?
37. THEIR SIMILARITIESThere 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 theres no need to evaluate the Drupal modules.5. Both should be used only for development and compiled locally, and both have decent compilers available.
38. THEIR DIFFERENCESThe main difference between LESS and Sass is in thelibraries and frameworks available for each. Sass LESS Compass Bootstrap Foundation BootstrapIn addition, more Drupal themes use Sass: Sass LESS Zen Basic AdaptiveTheme Basic Boilerplate Sasson Aurora
39. 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."
40. CONCLUSION (GRAND FINALE)Use Sass for development only, compile locallyand 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.