99designs/asimov-alert — pull request #5 by joshamos (2014-09-26 06:25:00+00:00)
Title: Add ability to prefix alerts

Given something like:

```
.contest-help {
@include alert("info", $prefix: "contest-help");
}
```

Output component with desired component element classes:

```
.contest-help { display: table; width: 100%; padding-top: 0.6em; padding-right: 0.6em; padding-bottom: 0.6em; padding-left: 0.6em; margin-bottom: 30px; border-radius: 3px; background: #454954; }
.contest-help > .contest-help__body { display: table-cell; padding: 0 0 0 30px; }
.contest-help > .contest-help__icon { display: table-cell; width: 1%; }
.contest-help > .contest-help__icon > img { display: inline-block; max-width: none; }
.contest-help > .contest-help__icon, .contest-help > .contest-help__body { vertical-align: top; }
.contest-help .contest-help__body { padding-left: 7px; }
.contest-help .contest-help__icon, .contest-help .contest-help__body, .contest-help .contest-help__title, .contest-help .contest-help__message { line-height: 1.6; font-size: 16px; color: #fff; margin: 0; }
.contest-help .contest-help__icon, .contest-help .contest-help__body, .contest-help .contest-help__title, .contest-help .contest-help__message { color: #fff; }
.contest-help a:link, .contest-help a:visited, .contest-help a:hover, .contest-help a:active { color: #fff; text-decoration: underline; }
```

@xzyfer mentioned he would prefer naming each element specifically, but this results in a cleaner api for users.

Thoughts @xzyfer @dannymidnight @andrewk ?