I can style a whole app with only four hex values and SASS. | Hacker News Reader

I can style a whole app with only four hex values and SASS.

blog.12spokes.com

159 pointserinbean45 comments

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

A C implementation just came out recently[0]. Unfortunately, no support for indented SASS, only the CSS-superset SCSS.

[0]: https://github.com/hcatlin/libsass

Although not Python, a Scala and thus Java version has been out for quite a while.

See https://github.com/derekjw/scala-sass-compiler

I haven't actually used it yet though, so I can't comment on its quality.

For the rare (on HN, it seems) PHP user, I work on the latest iteration of PHamlP (stripped down to just SASS):

https://github.com/richthegeek/phpsass

It's feature-complete up to 3.2, although there are a few bugs that still need to be ironed out (very rare to come across).

This is the nearest thing that I've come across in python: http://sandbox.pocoo.org/clevercss/

http://jaredforsyth.com/blog/2010/jun/17/clevercss-reloaded/

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.

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

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.

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.

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.

That's a feature of Compass, not Sass.

http://compass-style.org/

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

Yeah, we do this with SASS without using compass.

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

And Stylus with Nib - I don't believe they do the lighten / darkening of colours however.

Actually, lightening and darkening are built-in functions in Stylus:

http://learnboost.github.com/stylus/docs/bifs.html

Stylus is amazing

You may find my Stylus plugin useful: http://boronine.com/colorspaces.js/

How do Stylus+Nib compare to Sass+Compass, in your opinion?

They are both awesome and compare quite well :D I think its mostly a question of the syntax you prefer (and possibly the way you'd like to manage the dependency, with ruby gems, npm, or manually).

IMHO Stylus is an overall win over SASS. The ability to write transparent mixins for my team (made by people not wanting to know how to implement `display:inline-block` on IE) is so great I can't be happier.

I've been able to completely replace SASS on Liferay [1] themes development and raised my team's productivity a lot.

[1]: http://www.liferay.com

No language hate - but are there similar projects that don't require a ruby installation?

I'm currently playing with a very, very small environment. I might want to check out a (powerful) css preprocessor project, but it feels wasteful to add a dependency on an otherwise unnecessary (for my work/projects) language. Alternatives? Suggestions?

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

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

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.

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...

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.

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?

no, you're not the only one.

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

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.

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?

I think SASS is great for reusing pages or styles within or across projects. If a website has color-coded areas, say like The Guardian[1], then using color variables as the OP mentioned would make it extremely trivial to reuse.

The math behind layouts can also be set using variables reducing a lot of headaches while the client wants 'the left column could be a bit wider'.

I agree that it requires a lot more coding discipline than plain 'ol CSS. So much to the extent that one would be tempted to abandon it. But like all good layers of abstractions, it reduces a lot of effort in the future.

[1]: http://www.guardian.co.uk/

I hate to pull the "you must work on trivial projects" card, but really, this article points out one very solid reason to use a CSS pre-processor. If you've never felt the pain of managing the colors, with gradients and everything else, I'm not convinced you've worked on a decent-sized project--that or you love project search/replace.

Try out the SCSS syntax (or LESS), might warm you up to it a bit more.

Trivial projets? Perhaps. How many layouts does one need before a project becomes decent-sized? In the several years I've been doing web development professionally, I've changed the colors on a site exactly zero times - it just never comes up. I have wished for variables in CSS from time to time to make things more readable, but really not enough to care about SASS.

In the end I find that if I organize my CSS well, changing things like colors really isn't such a big deal. Like you say. Find/Replace.

Oh well. Either it will pass as a fad or I will one day be forced into the light.

As nice as the colors are, the value I find in CSS preprocessors is the nested rule syntax and being able to use math and variables.

I strongly advocate giving the SCSS version a try. It's straight-up CSS with all the things that should have been there in the first place.

Perhaps it's the type of design projects that are undertaken and the work style of the designer.

In the situations where a designer provided .psds for me to transform into html/css, no I haven't had to modify anything. But then, the iteration on the design happens with the other guy, and he does it in photoshop. If a change happens, he just sends me the new asset images, and I just replace them in the repo.

The times where I'm the one doing the design work, I end up switching things up a lot. This is because I don't do my design work in photoshop, but rather in the browser with actual html/css. So even while I'm iterating on something by myself (before having even shown the client anything), I'll switch colors up constantly trying to get something I'm okay with.

It's not just something like changing colours, though i have had to do that - it's applying the colours in the first place.

Rather than trying to remember a previous hex, or looking it up, you can think ok, this should be the darker highlight colour - and as you say, looking later you know which colour that is.

It's not just colours - a good example is a clearfix. Rather than add it to the markup, you can add it via css, and of course if you change it, you change it once.

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 :)

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

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.

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?

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.

Oh sorry, I mean why not do the server side work with PHP or whatever on the back end, or javascript on the front end?

By breaking existing tools I mean Firebug or whatever else is viewing the compiled styles.

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

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

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.

Reply on news.ycombinator.com