Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
17th February 2014

Supercharge your CSS – pt 2

In part 2 we take a close look at the installation options, the tools to make processing easier with some code examples

Supercharge your CSS - pt 2

INSTALLATION OPTIONS

COMMAND LINE

LESS is written in JavaScript. You can include the script in your sources while developing – but not for production, unless you want to cripple your server. For a one-time final compile, install Node.js on a dev machine and run the .less files through the lessc tool (visit bit.ly/1bG2N9D).

SASS works with Ruby. See rubyinstaller.org for Windows, and www.ruby-lang.org/en/downloads for Linux and OS X (Mavericks includes a version of Ruby, but RVM can manage multiple versions). You can then ‘gem install sass’, and use ‘sass input.scss output.css’ in order to compile.
Stylus also needs Node.js. Once installed, Stylus gives you many more command line options than the other tools, including some clever features for handling entire directories of files. See bit.ly/1bagyKS for examples.

SERVER-SIDE

If you have Node.js on your server, you can install LESS as an npm package with ‘npm install –g less’. You can then use the lessc tool to compile files manually, just as you would on a development machine. But you can also render CSS live with Node’s less.render command but this can get pretty complicated.

In theory, SASS is never run server-side. In practice you can set up Ruby on a server and have it either compile on the fly whenever the user loads a page (inefficient…) or compile then cache, so only changed files are rebuilt when they need to be. Stylus is available for Node.js as an npm package. With Node you can use scripting to customise your compilation workflow in the usual way. Alternatively, use another web server called Harp.js, which has support for Stylus baked in.

4 TOOLS TO MAKE PROCESSING EASIER

CODEKIT

incident57.com/codekit

CodeKit is the ultimate preprocessor toolkit, with built-in GUI support for LESS, SASS, and Stylus and automatic compilation after any edit. Forget the command line, with CodeKit you can experiment with all the preprocessors in one place to see which suits you best.

CodeKit speaks fluent CoffeeScript, Jade, HAML, if you need those as extras. For $28 – payable after a free trial period – you get an impressive selection of tools for HTML, JavaScript, as well as CSS management. You can even mash JavaScript and CoffeeScript files together, then minify them before uploading, optimise images. and test JavaScript with JSHint and JSLint. CodeKit is only available for OS X. There’s no Windows or Linux version, and it’s unlikely there ever will be. Note though that CodeKit is not an editor – it’s a compiler and packager.

SCOUT

mhs.github.io/scout-app

Scout takes the effort out of Ruby, Compass and SASS for Mac users, by bundling them all into one development environment. It includes a project console for file and directory management, and an embedded terminal output window.

It’s not a full GUI editor – like CodeKit, you’ll need to do your editing elsewhere – but it simplifies project management for developers who want to work with SASS and Compass but don’t want to end up dealing with command line directory copying and compilation. You are able to set up development and production environments, specify input and output directories, and leave Scout to handle everything else.

Scout is Mac-only but it’s completely free. It’s also open source. The code is available on GitHub, so you can fix and/or modify it for yourself.

LIVE RELOAD

livereload.com

LiveReload combines built-in compilation for SASS, LESS, Stylus and an alphabet soup of other tools.

LiveReload’s big feature is automated compilation: it monitors the files in your project and automatically recompiles CSS when you edit it, so you don’t need to worry about command line tools or setting up a preprocessor on your server. Optionally you can run a script after each compilation – for example, to run FTP and upload the compiled files to a production server.

LiveReload is available from the Mac App Store for $9.99. Versions are also being developed for Windows and Linux, but they’re not quite ready for prime time – but they are free, so you can try them out and see if they do enough to be worth working with. There’s a useful knowledge base with information about getting started, selecting an editor, and setting up frameworks and other topics.

CRUNCH

crunchapp.net

Crunch is a LESS editor and compiler. You edit LESS, you save CSS. It’s that simple. You don’t need to set up a command line tool, or install any extra add-ons, plug-ins, extensions, daemons, apps, or anything else.

Crunch is Mac-only, and free from the website. There really isn’t all that much else to know. It works in a simple GUI-editor kind of a way. You are able to have multiple files open at the same time. It’s LESS only, so there’s no support for SASS or Stylus. It also doesn’t have any direct links to Bootstrap or any other LESS-friendly frameworks.
Nevertheless, Crunch is a good option if you want to do some quick experiments with LESS without getting distracted by the time needed for a more comprehensive server- or client-side installation. It’s by no means the most complete CSS editor out there, but it’s simple, clean, accessible – and it does what it sets out to do.

PREPROCESSORS IN ACTION
So how do you use a preprocessor in practice? Here are some examples

VARIABLES AND ARITHMETIC
Create DRY code with simple automated colour effects

All preprocessors support variables with optional math functions. Even if you never use any other preprocessor feature, variables can save you hours of update time by concentrating critical definitions in one location in one file. This is usually at the start of the file, although for even simpler maintenance you can keep all the main colour palette and font definitions in one file and import it into the others. In LESS, variables begin with @. In SASS, they start with $, rather like PHP variables. Stylus is understated, and you don’t need any special symbols.

The following code illustrates a very simple SASS example, compiled in CodeKit. It defines two variables: a font list, and a text colour. There are also a couple of sketched out container definitions, so you can see exactly how the variables are used. The compiler takes the variable values and parks them inside the standard CSS. The second example also applies some basic arithmetic to the predefined colour. All the preprocessors have more sophisticated colour features, but note how easily you could create a palette of related colours, given a base colour and some very simple extra code.

//Original scss
002 $font-list: Helvetica, sans-serif;
003 $bodytext-color: #111;
004 .acontainer {
005  font: 100% $font-list;
006  color: $bodytext-color;
007 }
008 .another_container {
009    font: 50% $font_list;
010  color: $bodytext-color*0.1;
011 }
012 //Compiled CSS
013 /* line 4, ../sass/new.scss */
014 .acontainer {
015  font: 100% Helvetica, sans-serif;
016  color: #111111; }
017 /* line 9, ../sass/new.scss */
018.another_container {
019  font: 50% Helvetica, sans-serif;
020  color: #010101; }

USE MIXINS
Manage browser support with one-off browser-specific definitions

CSS3 can drive you insane with endless repetitions of browser-specific code every time you want to use a feature. A mixin is like a variable that contains boilerplate definitions you define once and re-use over and over. To confuse you, this time LESS uses a dot to define a mixin, while SASS uses @. Stylus mixins look like functions, with round brackets, although they’re treated like standard properties.

Although mixins look more complicated than variables, they’re almost as simple and they may be more useful, especially for CSS3. LESS has an extra feature called a guarded mixin, which can include a conditional if/else test that only applies the mixin if the test ‘triggers’ true. Just add ‘when’ after the mixin, and follow it with a condition.

The following SASS code provided is simpler, and shows how to simplify basic CSS3 browser support. Note how it uses @include, and a variable called $radius and passes its value to the mixin, which fills in the details when it’s compiled. You can change the value that’s passed each time you use the mixin.

001 //Original scss
002 @mixin border-radius($radius) {
003  -webkit-border-radius: $radius;
004     -moz-border-radius: $radius;
005      -ms-border-radius: $radius;
006       -o-border-radius: $radius;
007          border-radius: $radius;
008 }
009 .rounded_box { 
010     @include border-radius(50px); }
011 .very_rounded_box { 
012     @include border-radius(500px); 
013 }
014 //Compiled CSS
015 /* line 9, ../sass/new.scss */
016 .rounded_box {
017  -webkit-border-radius: 50px;
018  -moz-border-radius: 50px;
019  -ms-border-radius: 50px;
020  -o-border-radius: 50px;
021  border-radius: 50px; }
022 /* line 13, ../sass/new.scss */
023 .very_rounded_box {
024  -webkit-border-radius: 500px;
025  -moz-border-radius: 500px;
026  -ms-border-radius: 500px;
027  -o-border-radius: 500px;
028  border-radius: 500px; }

CREATE LOOPS
Save time by creating repeated code with a simple loop

CSS is literal; unlike real programming languages, it has no concept of repetition or progress. You can fix this in a preprocessor. Some possible applications of repetition include creating grids and tables with optional shrinking/expanding elements, a set of font sizes from a base size, a colour palette from a base colour and a list of URLs given the keywords they differ by.

LESS has basic looping. You have to make it behave with a combination of a loop index variable and @when followed by a conditional that ends the loop. SASS has much simpler syntax, with a proper @for statement for basic counting, and @each for reading items from a list and doing something with each one. Stylus can do both, without the punctuation. Use for… in and follow it with (1..5) for counting, or a list of text items.

NESTED RULES
Lost your way with inheritance? Preprocessing can lead you home

Inheritance can kill a bigger project where the basic elements have tens of variations. With nested rules, you can keep all the related details in a single location, indented for clarity. Nested rules make it much easier to keep track of which sub-elements have which styles, and – even more usefully – the added readability makes it easier to see where you need to make changes to update some elements, while leaving others unchanged.

Nested rules in SASS and LESS look very similar. You add extra curly brackets and indentations as you work your way down the inheritance tree. Stylus is simpler, and uses plain indentation with no extra brackets. This makes it easier to read, and edit.

THE FUTURE OF PREPROCESSING
There’s even more to come, as CSS gets closer and closer to a real programming environment

The biggest change in the near future will likely be the wider use of preprocessors. In a css-tricks.com survey last year, it was revealed that nearly half of all users still hadn’t tried a preprocessor. It’s true there’s a certain learning curve involved – especially if you’re installing a server-side implementation or working at the command line – but the initial time demands are tiny compared to the effort you can save yourself if you add a preprocessor to your workflow.
All the main CSS preprocessors are continuing to be developed, but at the moment there are no plans to roll any of them into official w3.org CSS specifications – so don’t expect to see native browser support for a while yet. A few features, such as smarter selectors, are working their way into mainstream CSS. But for the time being, the inefficient official syntax is unlikely to change.

What may change, however, is the way developers think about CSS. The official aim of CSS was to abstract content from presentation. HTML and CSS includes hints of a mainstream coding technique called object-oriented programming, but they certainly don’t take it as far as it could be taken.
Nicole Sullivan’s Object Oriented CSS (for a helpful introduction provided by Nicole herself, visit slidesha.re/4y3U0u) doesn’t just try to fix inefficient CSS syntax, it attempts to fix inefficient design practices. The idea is to move CSS and HTML towards a cleaner, more straightforward but more abstract form, where it’s easier to make content containers smart and responsive, while also avoiding unnecessary repetition in coding.

The other likely development is an ever-growing number of drop-in frameworks. In the same way that LESS is associated with Bootstrap, SASS is closely associated with Bourbon (bourbon.io) and also with Zurb (foundation.zurb.com), while Stylus is associated with Jeet (jeetframework.com). Expect more of this in the future, and less reinvention of grids and wheels as site developers share their tools.

There’s no practical limit to the extra definitions you can add, or the order you can add them in. A SASS example can be found at www.webdesignermag.co.uk/tutorial-files.

Tags: , ,
  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://www.splinterteal.com/ splinterteal

      bookmarked :)