
I can style a whole app with only four hex values and SASS. - erinbean
http://blog.12spokes.com/web-design-development/simple-css-color-management-with-sass/
======
BerislavLopac
Personally, I have recently come to love SASS after using it for the past five
months on a very large project. What I hate about it, though, is the
implementation, which is currently (AFAIK) available only in Ruby, and I just
can't stand all the issues with dependencies, fickle behaviour of support apps
and the like.

I'm yearning for a good Python-based implementation, ideally a drop-in with
Django so I could use SASS files directly instead of Django templates, but
nothing fully satisfactory has been produced yet (and I don't have the time to
do it myself).

Please note: this is not intended as Ruby bashing, it's a perfectly fine
language; it's just that I've practically never had a smooth experience with
it.

Edit: Ah, and yes -- the author's job could be even easier if you used the
Compass framework (specifically, it has a predefined helper for those
gradients, and other stuff that are currently in a browser-prefix-hell):
<http://compass-style.org>

~~~
hellerbarde
Uh... what about this one? <https://github.com/Kronuz/pyScss> It seems to
support compass. Could you report whether it's good, because I would like to
get into SASS as well and I'm a python-guy.

edit: in the readme there is even a django example.

~~~
BerislavLopac
Hmm this seems interesting, thanks, I'll check it out! :-)

------
gamache
This stuff is kind of old news for Sass/SCSS/etc users, but it's no less
breathtaking when you do it the first time.

CSS preprocessors sell themselves.

~~~
mnicole
Agreed. We did this with LESS for the brand palettes on
<http://www.evanta.com> (ignore the awful homepage/logos) and it saved us a
lot of time that let me experiment with other techniques and tweaks that I
wouldn't have been able to get to otherwise.

It's a pretty beastly stylesheet in the end, but it's a great method to
learn/optimize for future projects.

------
jewel
I believe the author is missing out on one other feature of Sass: browser-
prefix values are generated automatically, so no more (-webkit- _, -ms-_ ,
etc.). This would make his Sass gradient code more succinct.

~~~
shioyama
That's a feature of Compass, not Sass.

<http://compass-style.org/>

~~~
ajacksified
More accurately, SASS includes the ability to create functions to build out
prefixes, and Compass includes default functions to do this.

~~~
wahnfrieden
Yeah, we do this with SASS without using compass.

~~~
shioyama
I stand corrected. I think though that Compass is the most common way people
do this.

------
creativityhurts
In my opinion, this is one of the most important features of CSS
preprocessors. Wether you're doing rapid prototyping and working on the real
deal, having a set of variables for colors, fonts and whatnot helps you a lot
controlling the look and feel of your site and avoid mistakes that even
Facebook did [1]

This is one of the main reasons why foundations like Twitter Bootstrap or
Compass are awesome but unfortunately people are so lazy they don't even
change the color variables in Bootrstrap, hence the "yet another Twitter
Bootstrap" site.

[1] Facebook had 706 CSS files, they declared the Facebook blue color 261
times, used 548 unique hex values for colors, had 6498 declarations of color.
<http://www.lukew.com/ff/entry.asp?1379>

~~~
garethadams
If Facebook used SASS they may _still_ appear to have the Facebook blue
defined 261 times and have 548 unique hex values. The redundancy is only
removed in the preprocessed files, when the files are processed the values are
transformed and inserted back into the document

------
cheald
This is a large part of why I love SASS. I frequently work with a base color +
some combination of lighten/darken/saturate/desaturate/opacify/transparentize
for a given widget or whatnot. Changing the entire widget is as easy as
changing the base color. It makes tweaking and theming super easy.

It's a lot easier when you think of colors as derivatives of a base color,
rather than a collection of 7 different colors that have to be kept in sync.

------
benatkin
I'd like for people to try to push the envelope with this, by creating a live-
tweakable theme (would need a ruby backend for Sass) and a nice overlay widget
for editing the settings like dat.gui and seeing how much flexibility they can
get with a small number of variables.

[http://workshop.chromeexperiments.com/examples/gui/#1--
Basic...](http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage)

That's what I was hoping to see when I saw this title, but it's just a proof-
of-concept of styling a whole app.

------
damoncali
Serious question - am I the only one who has looked at SASS and all its
whizbang features, and decided that plain old CSS is just fine?

~~~
mattwdelong
I agree. Though, I would love if someone responded and convinced me otherwise.
What am I missing?

~~~
shuzchen
If you've ever had to go back to your CSS and redo the colors (client wanted
red instead of blue) then you'll find yourself thinking "I wish I could just
store these redundant values in one place". At that point you'll start looking
at css preprocessors. A simple find/replace doesn't always cut it (I want
these things red, keep these other things blue), especially if your design
also has derivative values (used in gradients, shadows).

Personally, while I do try to take advantage of all the features of LESS, I
think the biggest thing is the ability to define macros (utilizing mixins or
functions). Never again do I need to write multiple rules for one style (-moz-
foo, -webkit-foo, and foo) or need to remember the complicated argument order
(defining gradients is vastly different between all of them).

The cost is in introducing a compile step, but the benefit is that your
stylesheet becomes easy to write, easy to read, easy to modify.

~~~
damoncali
Just curious - is there a reason CSS can't incorporate variables/macros and
basic math without having to resort to a preprocessor? When CSS 5 or whatever
is released, will all of this just be known as CSS?

------
mafro
Actually what I liked most about SASS was the nesting of CSS rules. Since CSS
has no inherent structure is can quickly become a mess. SASS stylesheets can
mimic the HTML document's structure - which in turn makes finding a rule in a
stylesheet so much easier.

The colours and mixins are a total winner too :)

~~~
nathos
Be careful not to nest too deeply, as you can end up with huge CSS selectors
in your output.

------
r0s
Alright, I have to ask:

Why use a preprocessor for HTML but not styles? Intentionally breaking
development tools seems like a dead end, the only use-case I can imagine is
client side manipulation; and then javascript has you covered by a huge
legacy.

~~~
alanh
Hey, not trying to be a jerk here, but I am an experienced web developer who
loves Compass and CoffeeScript and spends hours in dev tools daily, so I feel
like I should understand your comment, but I simply cannot understand what you
are asking. At all. Consider re-phrasing?

~~~
mappu
Maybe he means writing css in PHP and serving it as text/css.

That does give you pretty good flexibility.. you have to pay a little more
attention to caching compared to static (/compiled) .css files though.

------
sneak
The word you're looking for is "motherfucking".

------
jhund
out of curiosity, what is the purpose of the function color?

~~~
youngrufus
The function color is (probably a pretty poor) way of describing a color I
often see in UIs that prompts for a "secondary" action - examples would be a
Close or Cancel button, or administrative functions like "Edit your account",
etc. The action color, on the other hand, is something that the app or site's
creator wants to the user to do - "Sign up now!", etc.

