[CODE4LIB] SASS
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
Re: [CODE4LIB] SASS
friggin' awesome Michael. thanks for your clear explanation!
i'll try out SASS :)
On Thu, Nov 1, 2012 at 6:03 PM, Michael Schofield mschofi...@nova.eduwrote:
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
--
Nate Hill
nathanielh...@gmail.com
http://4thfloor.chattlibrary.org/
http://www.natehill.net
