A LIST Apart: For People Who Make Websites

No. 340

Discuss: Getting Started with Sass

Pages

 1 2 >

1 new development of web design

Excellent thing, minus only that it will be necessary for a long time to adapt, in order to freely practice to write code in Sass, even for the skilled web designer.
But judging from the article – Sass is a worthy replacement of CSS in web design, the future of this technology exists.
Easier syntax, logical structure and the possibility of using variables provides an excellent opportunity for developers and can significantly speed up the writing and editing CSS files.

posted at 07:54 am on November 29, 2011 by CheapWebDesignSEO

2 Errata

Good to see this topic tackled by ALA. I think of the two I prefer the Less syntax, but CSS preprocessing is definitely catching on either way.

Two things I notice: I don’t think the @import syntax is new — when you reference local stylesheets you don’t need to use “url()” even in regular CSS.

When you describe the clearfix mixin, you include it later as “clearFloats” — might confuse some people so I thought I’d point it out.

Thanks for writing!

posted at 08:11 am on November 29, 2011 by rhodesjason

3

I am so happy to finally see a Sass article on ALA! It adds incredible control over stylesheets that just can’t be done with regular CSS.

Lately I have been enjoying building advanced tools with Sass and have found it to be far more extensible than anything else. The convenience of not having to use an external calculator, color schemer, modular scale, you name it is invaluable. Not to mention the robust frameworking capabilities Sass provides that allow the logic of styles to work beyond predefined values.

Great article! Thanks for writing.

posted at 10:37 am on November 29, 2011 by Scott Kellum

4 Re: Errata

Thanks for commenting! The clearFloats thing is definitely a mistake; we’ll fix it.

As for import@, I just tested a import statement without url-less in plain CSS (in Safari 5.1) and you’re right: url is no longer required. Good to know, though I’m interested to know what browsers support this form of the import syntax. One advantage to the classic import url@ is that I know it’ll work everywhere.

Sass always prefers to use url for external CSS files. The main difference between url and no-@url@ in Sass is that the preprocessor will check the ones with no url to see if they might be Sass partials, whereas urls are always assumed to be external. (They’re also always assumed to be correct syntax—you don’t need quotation marks inside your urls in CSS, so Sass doesn’t include them, but if you include them yourself Sass doesn’t take them out.)

posted at 10:57 am on November 29, 2011 by David Demaree

5 Good stuff (and bit o' errata)

I’ve really taken to the idea of Sass and Compass and think they will make a huge difference. One cool thing I didn’t see mentioned is the ability to put robust comments in your .scss and strip them out for production stylesheets.

Looks like the CMS has expanded the ampersand for referencing the parent. Looking at Sass’s documentation, I see the syntax as “&:property” not “&:property”

posted at 01:02 pm on November 29, 2011 by Captain Genius

6

Looks like the CMS has expanded the ampersand for referencing the parent. Looking at Sass’s documentation, I see the syntax as “&:property” not “&:property”

Fixed this morning. Thanks!

posted at 02:06 pm on November 29, 2011 by Jeffrey Zeldman

7 Never going back again...

Yeah, just like the Fleetwood Mac song, since switching to a stack for rapid prototyping (StaticMatic, MiddleMan, etc) using Haml, Sass, and Compass – I really can’t imagine ever going back to the old method of building for the web.

Recently collected som resources for anyone interested in getting started:
http://do-internets.posterous.com/rapid-prototyping-with-hamlsass-compass-stati

Cheers.
-a2h

posted at 02:15 pm on November 29, 2011 by a2h

8 Very Informative

I loved reading this post, it conveys the essence of Sass quickly and I must admit, I am very tempted to pick up this technology. When it comes to CSS, even something simple like CSEdit is so welcome because we NEED ways to manage CSS. It looks to me like Sass may be the way forward, or as Pat Metheny might say, “The Way Up”.

posted at 02:50 am on November 30, 2011 by Larry Gerndt

9 SASS within a team environment

My main stumbling block with SCSS is that I need to check all SCSS and compiled CSS into version control and ensure all developers (including server-side developers who want to make a quick change) whether freelance, internal or external, use SCSS and have Ruby or Scout installed to compile. Otherwise, merging their changes back into the original SCSS is a nightmare.

My other option is to combine and minify all CSS and JS server-side on deployment, which is much simpler and still allows for multiple stylesheets and comment stripping.

posted at 05:27 am on November 30, 2011 by ronansprake

10 When..

When you start to use Sass and Coffee Script You wouldn’t go back

posted at 07:49 pm on November 30, 2011 by federicobucchi

Pages

 1 2 >

Got something to say?

Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.

Create a new account or sign in below if you’d like to leave a comment.

Remember me

Forgot your password?

Subscribe to this article's comments: RSS (what’s this?)