Consider adopting SASS

[GoogleCodeExporter]

Consider SASS language for generating CSS. See http://sass-lang.com/

Original issue reported on code.google.com by johnvanb...@gmail.com on 16 Mar 2011 at 10:40

[GoogleCodeExporter]

This is definitely something I'd like to work in in the medium to long-term. 
Sass brings many of the sensibilities and discipline of programming to CSS 
authoring. It makes coding CSS faster and easier. Using the SCSS syntax flavour 
of Sass means a very easy transition (you can rename a .css file to .scss and 
the Sass compiler will compile it).

In particular, we could adopt Compass, the CSS authoring framework built on top 
of Sass. Compass is a framework in which a library of common CSS tasks and 
patterns come provided[1].

A classic example is the CSS3 property 'border-radius'. In ordinary CSS, a 
simple rule to apply rounded corners would be:

.simple {
    -webkit-border-radius: 4px 4px;
    -moz-border-radius: 4px / 4px;
    -o-border-radius: 4px / 4px;
    -ms-border-radius: 4px / 4px;
    -khtml-border-radius: 4px / 4px;
    border-radius: 4px / 4px;
}

Using Compass you would do this:

@import "compass/css3/border-radius"   #(or @import "compass/css3" to import 
all css3 mixins)

.simple { @include border-radius(4px, 4px); }

[1] http://compass-style.org/reference/compass/

Original comment by charles....@gmail.com on 20 Jun 2011 at 7:28

[GoogleCodeExporter]

Plan is to create a file called indicia.scss which contains Sass styling, then 
generates a file called indicia.css that is included everywhere that 
default_site.css is. The idea being to migrate the messy styling from 
default_site.css into indicia.css. By keeping the default_site.css file we 
allow developers with no Sass experience to still tweak syles, though in the 
long term we'd aim to move the style into indicia.css and keep default_site.css 
more or less empty.

Original comment by johnvanb...@gmail.com on 31 Aug 2011 at 4:20

[GoogleCodeExporter]

More comments from Charles:
Re. Sass vs Less, I would definitely opt for Sass for several reasons:

1. Sass has several features that Less simply does not possess. The two most 
important of these are the @extend directive, which allows for a more 
object-oriented approach and functions, which operate like 'real' programming 
language functions.

2. Sass has Compass, a standard library of sorts and a way of consistently 
creating and packaging extensions.

3. Sass has a couple of apps for Mac and Windows that add a nice UI. 
(http://mhs.github.com/scout-app/ and http://compass.handlino.com/)

4. Sass is better engineered. It has been more thoroughly thought through, the 
code is more robust, it is a true superset of CSS, and the programmers are 
simply better.

Getting started with Sass is actually very easy on Windows. Just install Ruby 
(http://rubyinstaller.org/) and at the command line type gem install compass 
(installing Compass will automatically install Sass). A slightly more in-depth 
tutorial can be found here: http://sonspring.com/journal/sass-for-designers. If 
you're capable of building web sites (which the users of Indicia should be) 
then installation of Ruby and Sass/Compass is a no-brainer. The apps previously 
mentioned means that not even Ruby needs to be installed (they come with JRuby 
embedded).

I would definitely recommend Compass as well as Sass. It provides a very handy 
library of mixins, functions and helpers (such as spriting) and is really the 
standard library of Sass. It's well worth the overhead.

Original comment by johnvanb...@gmail.com on 31 Aug 2011 at 4:20

[GoogleCodeExporter]

I would vote to use a CSS preprocessor, even if just to be able to declare 
colour constants. 

I'm not sure of the relative merits of SASS/SCSS vs. LESS, but SASS seems to 
have more adherents and be more actively developed. I also note the positive 
comments for SASS/SCSS above, so I'd be more than happy to go with SASS/SCSS. 

A small learning curve, but worth it.

Original comment by randomdo...@gmail.com on 31 Aug 2011 at 4:54

[GoogleCodeExporter]

Groovy stuff but it would be way down my list of priorities.

Original comment by ja...@ceh.ac.uk on 31 Aug 2011 at 5:53

[GoogleCodeExporter]

Ok, hopefully the adoption of Sass as a way forward need not impact on your 
time Jim as the default_site.css file should be available for you to add CSS to 
for at least the medium term. It just means that if we work on new areas of 
styling or rework any existing ones, then we have a better architecture for 
doing so. For example Charles & I are looking at the CSS required to do nicely 
styled map toolbars. 

Original comment by johnvanb...@gmail.com on 31 Aug 2011 at 7:45