Bringing the Sexy back to CSS: Sass, SCSS, Compass

[should have repeated the name of the building]

The maintenance of this building is pretty costly.

[the building with the elevators and plumbing (?) and infrastructure on the

I find Zen's breaking into multiple stylesheets unweildly.

CSS Extensions, as i like to call them, or you might hear them called pre-processors, they are really meta languages

[hmm, of those three i prefer

Nathan Weizenbaum— creator of Sass, when LESS just came out, "there's reason to try out both"

Dries in his keynote

it's a relationship, we're going to be working together to make things better.

There is engineering behind Sass and Less, and the engineers have brought tools to us designers.

Sass is more mature, can run as standalone Ruby gem or through compass.

LESS in more versions— the JS version can be run client side, and in HTML5 the CSS will be cached locally.

[$Variables slide came out beautiful]

$primary: purple;
$secondary: pink;
$success: green;
$alert: red;

Less/SCSS structure, CSS-based:

body.unicorn {

Sass (more compact)
body.unicorn
background-color: $primary
$messases
p.friendly
color: $success

[missing the last S on success when used in the code.

[should have labeled the too types and made clear AGAIN that SCSS is in fact SASS, but LESS-like or LESS-compatible or whatever]

Can define a variable in-line.

If you don't want all your mixin code to be compiled into your CSS code you can bundle it.

Pound sign css 3

css3 {

.rounded-corners

-- will not be compiled into your CSS file, if you're trying to redice as much as possible.

@mixin banner($img, $height: 110px) {

Giving this mixin a default value for the second parameter, height, of 110 pixels.

[Time out slide]
Any questions?

"Can you show that last side again?"

:-) i expected that-- people will want to type

Compass is the framework. It is the pluggable framework. And it comes with Sass. Compass is the reason i work with Sass over LESS.

It does require Ruby, you can see what version you have

Do not be afraid of the comman line
[that is a really scary

Yes, there is a module for that: drupal.org/project/compass
i tried the module and it was more confusing

then i remembered a tweet from Jacine on how to set it up

http://compass-style.org/help/

That's to set it up without the module.

Once you get used to it, you'll be setting up Compass files all the time.

compass watch is what notices changes in your code and recompiles the CSS.

Will give you immediate notice of errors in syntax or undefined variable.

Compass can run alongside any theme.

I'm a very big fan of Tao as my base theme.

you can change the names of the directories Compass puts CSS and JavaScript in.

CSS is not modular enough to really allow for patterns; with these extensions you can have re-usable patterns.

You can import files, choosing exactly how much or how little you need.

And it's greatest advantage, fantastic documentation:

http://compass-style.org/reference/compass

don't even have to use compass if you want to write your own batch of mixins.

Compass uses its

Favorite mixin:
css3
takes care of writing all the browser-specific workarounds

Define at top of style sheet:

import "compass/css3"

[maybe be sure to have straight quotations in code]

Compass can automate working with grids.

compass install blueprint --semantic

Semantic is cleaner.

They do have liquid, responsive grids.

You can set your grid on the fly, and change it within [the page]

Can define how many columns you want your div to span simply by including the number:

#logo {
  @include column(12);
}

Think of Compass as a giant recipe book of mixins. Replace images, reset CSS, gradients, etc. etc. etc.

[True Value Hardware Stores sign]

Throughout these days and sessions, people saying "now i need to learn something else."

These CSS extensions are front-end developer's new armor.

Helps develop better practices.
Makes work better faster stronger
Manageable CSS
Reduces file size
Mainenance and configuration
* Develop patterns
* Shareable

Start out with variables.

We're not swapping CSS files, we're not sharing CSS files— but we should start sharing our Sass or LESS files [as they are compiled, and you can't

importing partials, we can share mixins, can extend to the feature server, the ability of [the front-end developer to choose from shared, mixins, with dependencies]

Incredible to see if the project went that way

Limitations of tools / problems with not knowing how to use

• Should do more up-front planning

DRY: Don't Repeat Yourself

any time you look at your code and see repetition, think how you can reduce that.

4:36pm reached the end of the slides, the resource page

"That's it. Any questions?"

I commit my Sass files so other people can work on them, and just to put them in version control.

If you edit the CSS file and

No.

I'm only writing in Sass.

You need to pick what you're going to do.

If you're working with Sass or LESS only work with the file that generates.

Dani: I introduced LESS to a project with multiple people working with Especially if you're using the Less app, it watches every change in a folder it is watching-- works really fast

difficult for people who are really used to CSS3 "i just do a global find-and-replace" and they feel like they have all these tricks, these are the hardest to explain LESS or Sass to-- when someone is a

I don't see why i
if i say @blue and it's the color of blue i want, and need to change it if i have to.

Kay: Any questions on people like you

a contributed theme including LESS or Sass files?

Dani: a big danger to that. Any of these will have evangelists. It will become a mac vs PC debate eventually. You have danger of people not knowing what a Less theme is.

me: it's like including the photoshop or other original graphics, it should be included [with a theme for the public or handed to a client]

Kay: Any reason to not include the Sass files?

No.

I do include the files, because i view them as the canonical development version of the CSS. If i pass this on to the client, i expect them to edit there.

Kaleem: The new Zen has Sass files included.

Ed: Control over class or ID?

You can put any selector in there. All of them have to be taken from your HTML5

FireSass plugin?

Mason: See what line of CSS you are changing in Sass rather than the compiled CSS line number. (WHie developing, you write

Will you share your slides online

http://itsmisscs.com

And i will tweet the location at all, and from the D4D page.

If you want to dig in more, or have more questions, we will have a BoF right here.

Suzi: I had to sudo all the install commands.

Dani: What did you say the base theme you like is?

Tao. It is really, really aggressive. It just flattens Drupal.

RJ: That's the base theme in Open Atrium, right?

Ed: I always use

CS: I always create my own subtheme directly off of Tao.

After applause for teh end.

Kaleem: A whole other language to use. Now i have to switch to mac.