Skip to content
This repository has been archived by the owner on Sep 27, 2019. It is now read-only.

Minimalistic core. Supports mixins: +m(<list of modifiers>) and +e(<list of elements>) with nest-in-state support.

Notifications You must be signed in to change notification settings

troglotit/bem-sass-mixins

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 

Repository files navigation

Bem class mixins

Minimalistic core. Supports mixins: +m(<list of modifiers>) and +e(<list of elements>) with nest-in-state support.

Usage

Install

npm i -S bem-sass-mixins

Include

Webpack

@import '~bem-sass-mixins/bem-sass-mixins' (Sass 4.0 will give us improved resolving)

Gulp

See gulp-sass options. You'll need includePaths option to resolve @import 'bem-sass-mixins' (from node_modules/bemsass-mixins) or @import 'bem-sass-mixins/bem-sass-mixins' (from node_modules/). Looks simple enough to configure.

Configure

Define preferrable separators in your variables file like $bemSeparators: (element: '-', modifier: '--') (these are mine for .MyBlock-myElement--myModifier style) or rely on defaults __ and --.

Use

I came to conclusion that it was ALWAYS better to write blocks as pure classes. Problems happen when composing mixins which represent blocks. E.g. we cannot have two block mixins each under another, so we may think about list of blocks passed to mixin. Ok, but what if we also want to specify namespaces, which may also be different per block or even absent for some blocks?

Nevermind... Looks like unnecessary work at all.

.Block
  color: red
  +e(element1 element2)
    color: green
    +m(elementModifier1 elementModifier2)
      color: blue
  +m(blockModifier1 blockModifier2)
    color: red
    +e(element)
      color: green
      +m(elementModifier)
        @extend %TestPlaceholder // Stylus can't do this without ugly prefix :)
        color: blue

Will produce:

.Block {
  color: red;
}
.Block-element1, .Block-element2 {
  color: green;
}
.Block-element1--elementModifier1, .Block-element1--elementModifier2, .Block-element2--elementModifier1, .Block-element2--elementModifier2 {
  color: blue;
}
.Block--blockModifier1, .Block--blockModifier2 {
  color: red;
}
.Block--blockModifier1 .Block-element, .Block--blockModifier2 .Block-element {
  color: green;
}
.Block--blockModifier1 .Block-element--elementModifier, .Block--blockModifier2 .Block-element--elementModifier {
  color: blue;
}

.Block--blockModifier1 .Block-element--elementModifier, .Block--blockModifier2 .Block-element--elementModifier {
  font-weight: bold;
}

About

Minimalistic core. Supports mixins: +m(<list of modifiers>) and +e(<list of elements>) with nest-in-state support.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 100.0%