thetron/css3buttons_rails_helpers — Issue #27: SASS mixins in css3buttons?
Author: antage
Created: 2011-10-24 04:59:13+00:00
State: open

This issue is not bug report. It is discuss.

In first, I want to say `css3buttons` (and `css3buttons_rails_helpers` too) is awesome project!

**Problem: plain CSS-framework has some defects**.

1) Class-name collisions: `.button` class has too general name and it can conflicts with other css-framework or user styles.
2) IMHO, class-names chaining is ugly. Take a look at following code (it's haml):

``` haml
.actions.button-group
%a.add.button.primary.safe.icon.add(href="blabla") Add
%a.delete.button.danger.icon.remove(href="blabla") Destroy
```
Why can't I write semantic class names only?

``` haml
.actions
%a.add(href="...") Add
%a.delete(href="...") Destroy
```
3) We can't inject css3buttons in unobtrusive style. Css3buttons_rails_helpers uses some special css-styles for formtastic but what's about simple_form or something another?

**Solution: transform css-framework to sass-framework** (I did it already, take a look at my fork https://github.com/antage/css3buttons_rails_helpers).

1) Name collisions: we can import sass-mixins without any css-styles.
2) Semantic class names: we can include sass-mixins in user-defined styles.
Example (see html code in example above):

``` scss
@import "css3buttons/mixins";

.actions {
@include css3buttons-button-group;

> a {
@include css3buttons-button;
@include css3buttons-button-in-group;
}
> a:first-child { @include css3buttons-button-in-begin-of-group; }
> a:last-child { @include css3buttons-button-in-end-of-group; }

a.add {
@include css3buttons-safe;
@include css3buttons-primary;
@include css3buttons-icon-add;
}

a.delete {
@include css3buttons-danger;
@include css3buttons-icon-remove;
}
}
```

3) Inject css3buttons in formtastic in unobtrusive style:

``` scss
@import "css3buttons/mixins";

.formtastic {
.button input {
@include css3buttons-button;
}

.button.commit input {
@include css3buttons-primary;
}

.buttons {
padding-left: 0;
}

.buttons {
@include css3buttons-button-group;

.button {
padding-right: 0;
}

.button input {
@include css3buttons-button-in-group;
}

.button:not(:first-child):not(:last-child) input {
@include css3buttons-button-in-middle-of-group;
}

.button:first-child input {
@include css3buttons-button-in-begin-of-group;
}

.button:last-child input {
@include css3buttons-button-in-end-of-group;
}
}
}
```

4) **BONUS**: we can keep backward compatibility - [styles.css](https://github.com/antage/css3buttons_rails_helpers/blob/master/lib/assets/stylesheets/css3buttons/styles.css.scss)

What do you think?