SassyBeam (deprecated)

Use sassy-beam

---

Beam (or SassyBeam) allows the use of a BEM-like notation but with a lighter HTML markup.

It is a combo based on BEM, Nicolas Gallagher's thoughs, Harry Roberts's adaptations and Jonathan Snook's amazing SMACSS … while adding my personal touch!

The SassyBeam goals

1. Applying a BEM method like .block__element--modifier.

2. Keeping a light HTML markup!

   <div class="block block--mod1 block--mod2 block--mod3">
   

   becomes:

   <div class="block--mod1--mod2--mod3">
   

3. Managing easily the states via pseudo-classes, classes or a data-state attribute.

4. Allowing the nesting of blocks and elements … or not!

5. Maintaining the integrity of class names (no dynamic concatenation like #{$block}__element).

Usage

via Bower

$ bower install SassyBeam

.html

<div class="foo">
    <div class="foo__baz"></div>
    <div class="foo__baz--qux"></div>
</div>
<div class="foo--bar"></div>

.scss

@import 'sassybeam';

@include beam('foo') {
    property: value;

    @include beam('foo--bar') {
        property: value;
    }

    @include beam('foo__baz') {
        property: value;

        @include beam('foo__baz--qux') {
            property: value;
        }
    }
}

.css (output)

.foo, [class*="foo--"] {
  property: value;
}
[class*="foo--"][class*="bar"] {
  property: value;
}
.foo__baz, [class*="foo__baz--"] {
  property: value;
}
[class*="foo__baz--"][class*="qux"] {
  property: value;
}

Extra

• Examples (more coming soon…)
• Documentation

---

Feel free to improve, comment, share, …