SASS mixins in css3buttons?

[antage]

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):

.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?

.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):

@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:

@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

What do you think?

[Nerian]

I love this idea 👍

I think it would be nice to have a default import for Formtastic. So you would just need to:

@import "css3buttons/formtastic"

And that takes care of all.

[Nerian]

@thetron Any chance to integrate this?