

Why Sass? - Brajeshwar
http://alistapart.com/article/why-sass

======
lightblade
I am a non-believer, even when I have to use it everyday at work (the
technology wasn't really my choice).

I feel that sass is like an amplifier of css. It doesn't actually solve any of
the short comings of css. It enhances the features of css, both good and bad
parts.

I really want css preprocessor that is non obtrusive. So that the file could
still be parsed as valid css. Any feature enhancements used by the
preprocessor just get ignored by the engine.

------
Jgrubb
Ever since ALA's redesign, the header has looked like this for me -
[http://i.imgur.com/CcpjRHV.png](http://i.imgur.com/CcpjRHV.png)

It's in Chrome and FF on a Mac, and it's been this way for months. I assumed
it was a bug that they'd catch, but I guess I'm the only one seeing it this
way?

~~~
wmeredith
It's that way on purpose. Yes, seriously.

~~~
Jgrubb
What an incomprehensible design decision for a site targeting front end devs
and designers. Is there any explanation out there? Google doesn't give me one.

~~~
dictum
I never thought I'd have the opportunity to act like a fashion designer on HN,
but here it is:

It's that way because they want it—Jeffrey Zeldman and the ALA team. It's
their playground.

It looks like that because it's striking. _Gets the people going_. Made you
look. Got you mad.

It breaks the mold of traditional website design:

    
    
      | Logo |      Nav      |
      |----------------------|
      | Content              |
      | Additional info      |
      | Editorial info       |
    

...and replaces it with the vertical design of book pages, with some clues
from magazine design (like the header that's only partially shown). Ever read
a magazine that had text on the page margins?

There's a place for purely functional design, and there's a place for
experimental design.

~~~
awj
Well, as someone who _isn 't_ a web design diva it makes them look like they
have no idea what they're doing.

"Hey guys, listen to us about design, we can't even get basic things right!".
That's the message I get.

~~~
dictum
Using the diva metaphor: why did theater owners suffer prima donnas and their
attitude? Because they brought in the crowds. They'd move tickets.

It's ALA's willingness to experiment (even if the end result is suboptimal)
that made people listen to them about web design.

~~~
rhizome
What were some of their suboptimal experiments?

------
mattberg
One of the tricky things for me has been in the handoff from HTML template
developers to CMS integration developers. The way we currently have things
setup, the developers doing the CMS integration no longer have the ability to
make small/quick changes to the main CSS file. It actually has to go back to
the HTML developers for the revision, recompile the CSS, then back to the CMS
developers.

~~~
joshuacc
Why can't your CMS developers edit the Sass file and compile it themselves?

~~~
mattberg
A lot of it is environmental issues. Currently the codebase for the CMS
developers is managed by global TFS repos. While the pure HTML templates are
done by each local office in SVN repos. Good times.

------
csmuk
I still refuse to use Sass or LESS.

1\. Tooling integration is a PITA, especially with Visual Studio.

2\. Nothing but trouble merging the stored output from the tooling if you are
in a branchy development. Basically, merge the CSS, then run sass/less and
check in the change. Too much friction on a large project, especially when it
comes to a non-Sass/Less dude doing the merge.

3\. Parsers are both shit. Sometimes attributes don't get "understood"
properly resulting in compile errors and point blank refusal to work.

4\. Hacks used for older browsers aren't parsable by either.

5\. It's another layer of abstraction. Less abstraction decreases debugging
effort.

Sorry but I don't buy it despite the promoted advantages.

~~~
lmm
> Nothing but trouble merging the stored output from the tooling if you are in
> a branchy development. Basically, merge the CSS, then run sass/less and
> check in the change. Too much friction on a large project, especially when
> it comes to a non-Sass/Less dude doing the merge.

Wtf? You don't check generated files into VCS. You check in the source
sass/less, and do the generation as part of the build process.

~~~
csmuk
Actually no it doesn't work like that. It's really a pain in the arse for
windows users like myself who are part of more than a one man team.

What happens is, you get three options:

1\. Deploy Ruby, Sass and associated dependencies to every workstation, build
agent, test machine etc. Deploy tooling and build integration to the above so
that any changes to .sass files in the IDE and build process get reflected on
disk in the VCS. Educate every developer who touches the project on what they
are, how to manage them effectively, the rules around merging etc.

-or-

2\. Do the above but ship the entire Ruby VM and libraries in your VCS.

-or-

3\. Get random build failures company-wide, old versions of generated CSS
files and crap floating around and being checked in by developers, half arsed
merges and just pain.

I'll pick option (4) which is don't use it.

I've been at ALL of the above steps. We have removed it from our product. Life
is better now.

~~~
lmm
> Deploy Ruby, Sass and associated dependencies to every workstation, build
> agent, test machine etc. Deploy tooling and build integration to the above
> so that any changes to .sass files in the IDE and build process get
> reflected on disk in the VCS

This should be easy. If it is hard that means your deployment/ops
infrastructure is inadequate, and you should fix that now rather than after
your build machine suffers a hard disk failure.

> Educate every developer who touches the project on what they are, how to
> manage them effectively, the rules around merging etc.

You don't edit files that aren't in VCS; if some files are ignored you assume
there's a good reason for it; you edit the source version, and you merge the
normal way you merge source. These are all standard rules of development that
every developer should know.

I guess using sass means every developer needs to learn sass, sure. But in
terms of how quickly you can learn, and how much time it saves you over
editing raw css, that pays for itself in like an hour.

------
mokkol
I love sass but I don't like the scss syntax that much. Im happy to stick with
the sass syntax :)

~~~
welly
You don't like the SCCS syntax that much? So you're saying you don't like CSS
syntax that much then? Because that's what it is.

~~~
toggle
I think got SCSS and SASS backwards. Probably meant to say he likes SCSS, not
SASS.

------
axblount
> Or how about repeated blocks of styles that are used in various locations
> throughout the stylesheet?
    
    
      p {
      margin-bottom: 20px; font-size: 14px; line-height: 1.5;
      }
      footer {
               margin-bottom: 20px;
               font-size: 14px;
               line-height: 1.5;
      }
    

I don't know why this situation is a such a common example of the need for
SASS & company. It's easily addressable with plain ol' CSS. No mixins
required.

    
    
      p, footer {
               margin-bottom: 20px;
               font-size: 14px;
               line-height: 1.5;
      }

~~~
IceyEC
So how would you reduce this version:

p { margin-bottom: 20px; font-size: 14px; line-height: 1.5; } footer {
position: fixed; margin-bottom: 20px; font-size: 14px; line-height: 1.5; }

~~~
shawabawa3

      p, footer {
        margin-bottom: 20px; 
        font-size: 14px; 
        line-height: 1.5;
      }
      footer {
        position: fixed;
      }
    

btw I'm totally pro less/sass, but that example sucked :p

------
tomcdonnell
Why Sass indeed, when all that can be done with Sass, can be done with plain
old PHP?

Example: style.css.php

    
    
      <?php
      header('Content-Type: text/css');
      
      $brandColor = "#fc3;\n";
      
      $defaultStyles = <<<STR
      margin-bottom: 20px;
         font-size: 14px;
         line-height: 1.5;\n
      STR;
      ?>
      a {
         color: <?php echo $brandColor; ?>
      }
      nav {
         background-color: <?php echo $brandColor; ?>
      }
      
      p {
         <?php echo $defaultStyles; ?>
      }
      footer {
         <?php echo $defaultStyles; ?>
      }

~~~
krapp
This makes it impossible to deal with the CSS without also having to deal with
server-side coding, though.

------
Mithaldu
His elevator pitch doesn't sell for me. The color thing is correct. Having an
easy way to handle that is neat. Right now i use templating, which serves
fairly fine.

However the reusable block makes no sense. That's what multiple classes on an
element and selector lists are there for. I can't tell if SASS will still help
me, since this is merely a bad example.

So it could mean that either he didn't think that through, the book isn't very
good because of his lack of understanding, or that SASS is mostly fluff.

~~~
awj
Other things that SASS does well at:

* Wrapping up vendor specific properties. Put all of them into a mixin, use arguments for the value and any edge cases, be sure that all vendors are covered properly at each usage site.

* @media directives in SASS can be used inside a style definition.[1] IME this makes heavy use of media sensitive styling significantly easier to read/manage.

* Nested rules and nested properties[2] help to make your styling cleaner. If your html already has a very component-like structure nested rules can mimic that, which makes the overall design easier to manage.

A lot of the functionality of SASS is geared around reusing bits of styling.
Much of what you can do with it could _also_ be done with multiple classes,
but that generally comes at the cost of a class explosion as you parcel out
the differences.

It makes it easier to move more of the declaration of how your styling works
into CSS itself, instead of the final styling being almost equal parts html
(and classes) and CSS, with you as the developer/designer being responsible
for remembering how all of the details fit together.

[1] [http://sass-
lang.com/documentation/file.SASS_REFERENCE.html#...](http://sass-
lang.com/documentation/file.SASS_REFERENCE.html#media)

[2] [http://sass-
lang.com/documentation/file.SASS_REFERENCE.html#...](http://sass-
lang.com/documentation/file.SASS_REFERENCE.html#nested_properties)

------
bwilliams
Too bad SASS didn't help out with their indentation problems.

------
mcmillion
The biggest issue with SASS is the non-optimized output you get (i.e.
combining similar media queries, etc.) That being said, it's still an
absolutely amazing tool.

~~~
austinpray
Well, the similar media queries and repetitive output are eaten for breakfast
by Gzip and such. I worried a lot about CSS performance when I started using
SASS. I quickly found that CSS is so fast I am better off spending time
optimizing my JS and images.

------
nilgradisnik
I was a non-believer in preprocessors for a while until I actually started
using one. Writing HTML and CSS can be a pain, so much repetition and closing
tags/brackets for something that's just a markup/stylesheet language. I've
been using Jade and Stylus for while and oh my god how much faster you can
write stuff and how quickly you get spoiled by it.

------
timme
As someone else has mentioned: SASS is an amplifier.

If you hate or don't get CSS to begin with, stay the hell away from SASS.

If you do serious work with CSS, SASS will probably help you solve things
better.

------
adamb_
For me, the big value-add of CSS pre-processors is nested rules[1].

[1] [http://lesscss.org/#-nested-rules](http://lesscss.org/#-nested-rules)

------
leokun
Wish it would at least mention why they didn't even consider less, which I
prefer to sass, since it still resembles css and is a superset, so you can
turn any css easily into less. Great for switching over to less from css with
an existing project.

~~~
brandonbloom
I can only assume you grepped the article for Less, then came here to
complain. The article explicitly mentions SCSS and points out that it is a
superset of CSS. SASS' original (and still available) indented syntax isn't
shown.

~~~
leokun
I don't think this refutes the point that less wasn't mentioned.

~~~
welly
Why would it be? The article was named "Why Sass".

