5 ms·

Ask HN: Thoughts on Sass

8 points by jgv 16y ago

Anyone using Sass in production? Do you love it? Hate it? I'm thinking of implementing in a project but I don't want to end up making a bad decision. Thoughts on Sass?

aeontech 16y ago
I recommend checking out http://lesscss.org/ http://lesscss.org/ - haven't used SASS recently, not sure how well it compares these days. Used to be not as powerful as Less.
- jgv 16y ago
  I've looked into both and they seem like they share a lot of similar concepts. Why have you chosen Less over Sass? It seems like a potential issue with less/sass could be producing gigantic css files.
- yaxdotcom 16y ago
  I like the pure javascript less.js version: no gem, no plugin, all in the browser: http://is.gd/gOBou http://is.gd/gOBou and http://is.gd/gOBpV http://is.gd/gOBpV
  - jgv 16y ago
    Are you using this in production? If so how has performance been?
  - vorador 16y ago
    As an aside, don't use minified links.
knuckle_cake 16y ago
We've been using Sass in production since we launched. Love it. I've not seen any real comparison between LessCSS and SCSS (i.e. the new Sass syntax that became available with Sass version 3.0) There were some real differences before that, but that's not nearly so clear to me anymore. At present, we've decided that there's no reason to use LessCSS as we already use Haml and there's nothing that Less offers that gives us a reason to switch from recent versions of Sass. I'm not even sure what the differences are now.
- jgv 16y ago
  Have you found that it produces stylesheets that are noticeably larger than what you would have written in just CSS?
  - knuckle_cake 16y ago
    In my experience, no. After generating the CSS, we run it through YUI compressor for the deployed version. Any size differences remaining are measurable in bytes, and the ability to truly refactor our stylesheets more than makes up for that small difference.
  - cheald 16y ago
    My experience has been the opposite - stylesheets get smaller, because there's less repetition and fewer wasted styles. CSS has a really nasty habit of ballooning over time into an unholy tarpit of selectors and overrides and exceptions, especially when you're working with multiple people in the code. Any bloat caused by the more verbose selectors seems to be easily offset by the lack of repetition, and the maintenance is orders of magnitude easier to manage. At the end of the day, you're still talking about maybe a couple of extra kb, which ends up being a negligible number of bytes post-gzip. In exchange, you get massively easier-to-manage stylesheets and a whole lot less developer time spent to make things happen. Over the past couple of weeks, I've been refactoring a very large stylesheet with SASS. Original size: 138.8k (gz: 23.5k, 16.9% original size) Sass-generated size: 105.9k (gz: 18.2k, 17.1% original size) Very, very easily worth the transition, and as a bonus, the stylesheet is factored into a bunch of partials, each relevant to different parts of the site, so when I want to tweak something in comments, I just open _comments.sass and hack there, rather than trying to find the right section in a monolithic stylesheet.
- knuckle_cake 16y ago
  Replying to my own comment, but Chris Eppstein has put up a gist of some differences, both syntactical and semantic, between SCSS and LessCSS. They are very, very similar to each other now, as I thought. https://gist.github.com/674726 https://gist.github.com/674726
deleted 16y ago
[deleted]
twfarland 16y ago
I think it genuinely addresses some of the design flaws of css (too much repetition). That can't be bad. But I'm not sure a new syntax needs to be created for the job. I'm having a little play with using plain json to represent css in a similar style: http://github.com/twfarland/son http://github.com/twfarland/son (on node.js/express). There are still some things I need to add (firebug integration, creating actual css files) but it seems helpful so far.
cheald 16y ago
I'm using it in production in multiple places, and I adore it. I will never go back. If you want to just dip your toes in, look at SCSS. It's a superset of CSS, so you can take your existing stylesheets and start using more advanced features. That said, I prefer pure SASS. It's cleaner, IMO, forces better organization, and is less typing.

8 points by jgv 16y ago

Anyone using Sass in production? Do you love it? Hate it? I'm thinking of implementing in a project but I don't want to end up making a bad decision. Thoughts on Sass?

aeontech 16y ago

I recommend checking out http://lesscss.org/ http://lesscss.org/ - haven't used SASS recently, not sure how well it compares these days. Used to be not as powerful as Less.

jgv 16y ago
I've looked into both and they seem like they share a lot of similar concepts. Why have you chosen Less over Sass? It seems like a potential issue with less/sass could be producing gigantic css files.
yaxdotcom 16y ago
I like the pure javascript less.js version: no gem, no plugin, all in the browser: http://is.gd/gOBou http://is.gd/gOBou and http://is.gd/gOBpV http://is.gd/gOBpV
- jgv 16y ago
  Are you using this in production? If so how has performance been?
- vorador 16y ago
  As an aside, don't use minified links.

knuckle_cake 16y ago

We've been using Sass in production since we launched. Love it. I've not seen any real comparison between LessCSS and SCSS (i.e. the new Sass syntax that became available with Sass version 3.0) There were some real differences before that, but that's not nearly so clear to me anymore. At present, we've decided that there's no reason to use LessCSS as we already use Haml and there's nothing that Less offers that gives us a reason to switch from recent versions of Sass. I'm not even sure what the differences are now.

jgv 16y ago
Have you found that it produces stylesheets that are noticeably larger than what you would have written in just CSS?
- knuckle_cake 16y ago
  In my experience, no. After generating the CSS, we run it through YUI compressor for the deployed version. Any size differences remaining are measurable in bytes, and the ability to truly refactor our stylesheets more than makes up for that small difference.
- cheald 16y ago
  My experience has been the opposite - stylesheets get smaller, because there's less repetition and fewer wasted styles. CSS has a really nasty habit of ballooning over time into an unholy tarpit of selectors and overrides and exceptions, especially when you're working with multiple people in the code. Any bloat caused by the more verbose selectors seems to be easily offset by the lack of repetition, and the maintenance is orders of magnitude easier to manage. At the end of the day, you're still talking about maybe a couple of extra kb, which ends up being a negligible number of bytes post-gzip. In exchange, you get massively easier-to-manage stylesheets and a whole lot less developer time spent to make things happen. Over the past couple of weeks, I've been refactoring a very large stylesheet with SASS. Original size: 138.8k (gz: 23.5k, 16.9% original size) Sass-generated size: 105.9k (gz: 18.2k, 17.1% original size) Very, very easily worth the transition, and as a bonus, the stylesheet is factored into a bunch of partials, each relevant to different parts of the site, so when I want to tweak something in comments, I just open _comments.sass and hack there, rather than trying to find the right section in a monolithic stylesheet.
knuckle_cake 16y ago
Replying to my own comment, but Chris Eppstein has put up a gist of some differences, both syntactical and semantic, between SCSS and LessCSS. They are very, very similar to each other now, as I thought. https://gist.github.com/674726 https://gist.github.com/674726

deleted 16y ago

[deleted]

twfarland 16y ago

I think it genuinely addresses some of the design flaws of css (too much repetition). That can't be bad. But I'm not sure a new syntax needs to be created for the job. I'm having a little play with using plain json to represent css in a similar style: http://github.com/twfarland/son http://github.com/twfarland/son (on node.js/express). There are still some things I need to add (firebug integration, creating actual css files) but it seems helpful so far.

cheald 16y ago

I'm using it in production in multiple places, and I adore it. I will never go back. If you want to just dip your toes in, look at SCSS. It's a superset of CSS, so you can take your existing stylesheets and start using more advanced features. That said, I prefer pure SASS. It's cleaner, IMO, forces better organization, and is less typing.