Hi Nate, I accept your challenge. For those reading who don't know, SASS--"Syntactically Awesome Style Sheets (www.sass-lang.com)" --is a CSS preprocessor. When bundled with COMPASS (http://compass-style.org/) I find that it does a few things:
1.) Helps write DRYer CSS 2.) Makes managing huge site-wide stylesheets easy 3.) Helps write CSS faster. 4.) um, variables. 5.) math. Less does all this, too - but IMHO SASS is much more robust and user-friendly. Oh, Chris Coyier (www.css-tricks.com) agrees (http://css-tricks.com/sass-vs-less/). He does a very thorough, perk-by-perk breakdown and ultimately concludes with SASS. I guess, ultimately, use what you like. Here's my take: We have to adhere to our institutional color scheme. We use about ten colors that periodically get changed. As you probably know, running through your CSS to find and change hex color codes can be a pain. With SASS, you can store all of your colors as variables and have to only change them once. For example: $light-blue: #50AFDF; $dark-blue: #006699; a { color: $dark-blue; } SCSS (Sassy CSS) is exactly the same syntax as CSS. So the best way to start using SASS is to just write CSS. Normally, for hover / focus / active effects, you would have to write a:hover. With SCSS you can nest a { color: $dark-blue; &:hover, &:active, &:focus { color: $light-blue; } } I've started getting away from hex colors, but I have a hard time looking-up rgba. SASS does it for me: color: rgba($dark-blue); Which, if you remember, I stored as a hex value. It also helps me pick a consistent hover/active effect without having to have predefined "light blue". I could just do color: lighten($dark-blue, 9%); The most important thing for me is the ability to organize. For best performance, you usually want just 1 CSS file. There are a lot of parts of the CSS that are modular and benefit from being reused. So, what you can do, is make up as many modular .scss files as needed and import them into a main stylesheet. @importing in SCSS isn't like in CSS, because the compiler will take all your different chunks and output one compressed CSS file. My folder structure usually looks like this _normalize.scss _mixins.scss _base.scss _481up.scss _grid.scss _768up.scss _1030up.scss styles.scss The underscore tells the preprocessor not to compile and output individual, mini-CSS files. All it outputs is a single styles.css file. This also makes for an easy mobile-first stylesheet, because you @import into styles.css first the normalize/mixins/base styles, and then the rest import into appropriate mediaqueries. Styles.css might look like @media only screen and (min-width: 768) { @import 'grid'; @import '768up'; } Other things: @extending a class rather than repeating styles (again, DRY). Utilizing @includes and mixins to write prefix free CSS3 (the resulting CSS is packaged with all the prefixes). ... at this point, my wife comes around to pick me up from work. But, Nate (and whomever else), I think this is definitely a useful bandwagon to jump on. Again, see: http://css-tricks.com/sass-vs-less/ All the best, Michael Schofield -----Original Message----- From: Code for Libraries [mailto:CODE4LIB@LISTSERV.ND.EDU] On Behalf Of Nate Hill Sent: Thursday, November 01, 2012 5:06 PM To: CODE4LIB@LISTSERV.ND.EDU Subject: Re: [CODE4LIB] one tool and/or resource that you recommend to newbie coders in a library? Huh. Michael, I'd love to know more about why I should care about SASS. I kinda like writing CSS. I see why LESS http://lesscss.org/ makes sense, but help me under stand why SASS does? On Thu, Nov 1, 2012 at 5:02 PM, Ethan Gruber <ewg4x...@gmail.com> wrote: > Google is more useful than any reference book to find answers to > programming problems. > On Nov 1, 2012 4:25 PM, "Bohyun Kim" <k...@fiu.edu> wrote: > > > Hi all code4lib-bers, > > > > As coders and coding librarians, what is ONE tool and/or resource > > that > you > > recommend to newbie coders in a library (and why)? I promise I will > create > > and circulate the list and make it into a Code4Lib wiki page for > collective > > wisdom. =) > > > > Thanks in advance! > > Bohyun > > > > --- > > Bohyun Kim, MA, MSLIS > > Digital Access Librarian > > bohyun....@fiu.edu > > 305-348-1471 > > Medical Library, College of Medicine Florida International > > University http://medlib.fiu.edu http://medlib.fiu.edu/m (Mobile) > > > -- Nate Hill nathanielh...@gmail.com http://4thfloor.chattlibrary.org/ http://www.natehill.net