friggin' awesome Michael. thanks for your clear explanation!
i'll try out SASS :)
On Thu, Nov 1, 2012 at 6:03 PM, Michael Schofield <[log in to unmask]>wrote:
> 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:[log in to unmask]] On Behalf Of
> Nate
> Hill
> Sent: Thursday, November 01, 2012 5:06 PM
> To: [log in to unmask]
> 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 <[log in to unmask]> wrote:
>
> > Google is more useful than any reference book to find answers to
> > programming problems.
> > On Nov 1, 2012 4:25 PM, "Bohyun Kim" <[log in to unmask]> 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
> > > [log in to unmask]
> > > 305-348-1471
> > > Medical Library, College of Medicine Florida International
> > > University http://medlib.fiu.edu http://medlib.fiu.edu/m (Mobile)
> > >
> >
>
>
>
> --
> Nate Hill
> [log in to unmask]
> http://4thfloor.chattlibrary.org/
> http://www.natehill.net
>
--
Nate Hill
[log in to unmask]
http://4thfloor.chattlibrary.org/
http://www.natehill.net
