3 ms·

The Absolute Beginner's Guide to Sass

50 points by achalkley 14y ago

ataleb52 14y ago
I haven't used Sass yet but it seems pretty cool. Does anyone know how it compares to Less?
- envex 14y ago
  It's basically the same, minus a few differences in syntax. ie. Mixins LESS .border-radius(@radius){ border-radius: @radius; } .border-radius(5px); SCSS/SASS @mixin border-radius(@radius){ border-radius: @radius; } @include border-radius(5px); - - - The biggest difference is being able remove curly braces and semi-colons, which can speed up your development h1 font-weight: bold color: red
  - ataleb52 14y ago
    Ah, very nice. Will definitely have play around with it. Thank you!!!
  - nathos 14y ago
    Ignoring Sass @extend is ignoring perhaps its most powerful feature: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#extend http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#ex...
- homosaur 14y ago
  Chris Coyier wrote a nice article detailing some of the details http://css-tricks.com/sass-vs-less/ http://css-tricks.com/sass-vs-less/ The single biggest difference is in available style libraries in my opinion. I could probably never use Less because my workflow has become so heavily intertwined with Bourbon, Susy, and Compass.
  - ataleb52 14y ago
    This article is sweet! Sass is definitely looking more and more appealing. Thanks for sharing!
fekberg 14y ago
Bah. I read SaaS and thought the CSS image was a joke at first.
jpb0104 14y ago
Am I the only one that would rather there be one syntax? Sass and Scss is probably confusing for "Absolute Beginners". My vote would be for Scss because you can start with regular old css and sprinkle in the awesome Scss features as you need them and learn.
- hackerboos 14y ago
  I was disappointed that the article didn't recommend using SCSS over SASS.
  - nathos 14y ago
    Why should it? SCSS is already the default syntax, and all the Sass documentation is written in SCSS. Think of Sass Indented Syntax as a power tool for advanced users. (Although I usually use indented, there are times where I prefer SCSS instead)
  - sp4rki 14y ago
    Why would it recommend one over the other if it's something that's most definitely a user preference? I wish we had stayed with the first syntax as it's "cleaner" in my opinion, but at the end of the day that's exactly what it is: my opinion.
- homosaur 14y ago
  I disagree that there needs to be one syntax because Sass comes with the tools to convert between these freely. I would prefer people release code in SCSS though. There's a lot to be said for having it be a superset and maintain familiarity of code structure. Anyone starting out should almost certainly not use the legacy Sass syntax.
blissofbeing 14y ago
I prefer Stylus.
- 2mur 14y ago
  If you're a JS person, Stylus is pretty great.
- sp4rki 14y ago
  May I ask why? I had used Sass for along time (with Compass) and decided to try Stylus for a pretty big project, and for some unforeseeable reason I ended up with less maintainable post compile css. I really don't understand how I ended up with a mess if they're so alike to be honest and since I've been doing web development for quite some time. It may have been more fault of the project and it's inherent structure, goals, and deadlines, but I would reckon that it wouldn't have been as bad had I done it in Sass.
  - JeroenRansijn 14y ago
    Working on a Coffeescript project together with node, I figured stylus would be an awesome addition, for an js-only stack. Began out all nice and fine, one thing bugging me was that syntax highlighting was horrible in ST (if you know of a better package please let me know). As the project grew I encountered very annoying implementations when using the arguments keyword in mixins (box-shadow I am looking at you) and I ended up adding nasty if constructs inside my mixins. Stlus was getting annoying over time, at first I thought it to be the liberal kid on the block — who needs braces/colons anymore? But it turns out the highlighting could not figure out what was going on, and me neither. As the project grew, I started missing my braces. Compared to sass/less, sometimes I needed to build before I knew if something worked the way I expected, in addition visual clues are non existent and comments were needed to identify structure. So in response to this comments, stylus is quite nice, but it needs some rules, especially for bigger projects, because it does get messy. And last thing, I wish it was more like Coffeescript, at least use # for comments stylus and you make my day.

50 points by achalkley 14y ago

ataleb52 14y ago

I haven't used Sass yet but it seems pretty cool. Does anyone know how it compares to Less?

envex 14y ago
It's basically the same, minus a few differences in syntax. ie. Mixins LESS .border-radius(@radius){ border-radius: @radius; } .border-radius(5px); SCSS/SASS @mixin border-radius(@radius){ border-radius: @radius; } @include border-radius(5px); - - - The biggest difference is being able remove curly braces and semi-colons, which can speed up your development h1 font-weight: bold color: red
- ataleb52 14y ago
  Ah, very nice. Will definitely have play around with it. Thank you!!!
- nathos 14y ago
  Ignoring Sass @extend is ignoring perhaps its most powerful feature: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#extend http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#ex...
homosaur 14y ago
Chris Coyier wrote a nice article detailing some of the details http://css-tricks.com/sass-vs-less/ http://css-tricks.com/sass-vs-less/ The single biggest difference is in available style libraries in my opinion. I could probably never use Less because my workflow has become so heavily intertwined with Bourbon, Susy, and Compass.
- ataleb52 14y ago
  This article is sweet! Sass is definitely looking more and more appealing. Thanks for sharing!

fekberg 14y ago

Bah. I read SaaS and thought the CSS image was a joke at first.

jpb0104 14y ago

Am I the only one that would rather there be one syntax? Sass and Scss is probably confusing for "Absolute Beginners". My vote would be for Scss because you can start with regular old css and sprinkle in the awesome Scss features as you need them and learn.

hackerboos 14y ago
I was disappointed that the article didn't recommend using SCSS over SASS.
- nathos 14y ago
  Why should it? SCSS is already the default syntax, and all the Sass documentation is written in SCSS. Think of Sass Indented Syntax as a power tool for advanced users. (Although I usually use indented, there are times where I prefer SCSS instead)
- sp4rki 14y ago
  Why would it recommend one over the other if it's something that's most definitely a user preference? I wish we had stayed with the first syntax as it's "cleaner" in my opinion, but at the end of the day that's exactly what it is: my opinion.
homosaur 14y ago
I disagree that there needs to be one syntax because Sass comes with the tools to convert between these freely. I would prefer people release code in SCSS though. There's a lot to be said for having it be a superset and maintain familiarity of code structure. Anyone starting out should almost certainly not use the legacy Sass syntax.

blissofbeing 14y ago

I prefer Stylus.

2mur 14y ago
If you're a JS person, Stylus is pretty great.
sp4rki 14y ago
May I ask why? I had used Sass for along time (with Compass) and decided to try Stylus for a pretty big project, and for some unforeseeable reason I ended up with less maintainable post compile css. I really don't understand how I ended up with a mess if they're so alike to be honest and since I've been doing web development for quite some time. It may have been more fault of the project and it's inherent structure, goals, and deadlines, but I would reckon that it wouldn't have been as bad had I done it in Sass.
- JeroenRansijn 14y ago
  Working on a Coffeescript project together with node, I figured stylus would be an awesome addition, for an js-only stack. Began out all nice and fine, one thing bugging me was that syntax highlighting was horrible in ST (if you know of a better package please let me know). As the project grew I encountered very annoying implementations when using the arguments keyword in mixins (box-shadow I am looking at you) and I ended up adding nasty if constructs inside my mixins. Stlus was getting annoying over time, at first I thought it to be the liberal kid on the block — who needs braces/colons anymore? But it turns out the highlighting could not figure out what was going on, and me neither. As the project grew, I started missing my braces. Compared to sass/less, sometimes I needed to build before I knew if something worked the way I expected, in addition visual clues are non existent and comments were needed to identify structure. So in response to this comments, stylus is quite nice, but it needs some rules, especially for bigger projects, because it does get messy. And last thing, I wish it was more like Coffeescript, at least use # for comments stylus and you make my day.