chattigo-webkit 1.19.7

BEM Mixins

@mixin element()

Helper mixin to create elements class with the block prefix.

Shorthand to create element classes, is made to @include inside a block definition.

Parameters & Output

$element-name: (String)

Element’s name

{CSS output} (code block)

class block-name__element-name

Example

scss New Element 
.block-name {
  @include element('element-name') {
    some: attributes;
  }
}
css compiled 
.block-name__element-name {
  some: attributes;
}

Requires

$element-separator [private]

@mixin modifier()

Helper mixin to create modifier classes with the block - element prefix.

Shorthand to create modiers classes, is made to @include inside a element or block definition.

Block and Elements can have modifiers classes, this mixin help you to keep in the right track.

Parameters & Output

$modifier-name: (String)

Modifier’s name

{CSS output} (code block)

class block-name__element-name–modifier-name

class block-name–modifier-name

Example

scss New Modifier 
.block-name {
  @include modifier('modifier-name') {
    some: attributes;
  }
}
.block-name {
  @include element('element-name') {
    @include modifier('modifier-name'){
      some: attributes;
    }
  }
}
css compiled 
.block-name--modifier-name {
  some: attributes;
}

.block-name__element-name--modifier-name {
  some: attributes;
}

Requires

$modifier-separator [private]

@mixin if-block-has-modifier()

Helper mixin for ask if a block have some modifier

This is made for work certain behavior in elements or blocks who has set modifier classes.

This work in elements inside blocks or blocks inside anothers blocks, with the help of the var $current.

Parameters & Output

$block-name: (String)

Block’s name

$modifier-name: (String)

Modifier’s name

$current: false (Boolean)

Direct parent

{CSS output} (code block)

In the case of the defaul value of $current, the current class it’s inside the block defined.

If the $current value is set to true, this will append the current class to the current element or modifier.

Example

scss 
.main-block-name {
  some: attributes;
  @include modifier('modifier-name') {
    some: attributes;
  }
}

.sub-block-name {
  @include element('element-name') {
    some: attributes;
    @include if-block-has-modifier('main-block-name', 'modifier-name'){
      some: other-attributes;
    }
  }
}

.block-name {
  some: attributes;
  @include modifier('modifier-name') {
    some: attributes;
  }
  @include modifier('modifier-name-2') {
    some: attributes;
    @include if-block-has-modifier('block-name', 'modifier-name', true){
      some: other-attributes;
    }
  }
}
css compiled 
.main-block-name {
  some: attributes;
}

.main-block-name--modifier-name {
  some: attributes;
}

.sub-block-name__element-name {
  some: attributes;
}

.main-block-name--modifier-name .sub-block-name__element-name {
  some: other-attributes;
}

.block-name {
  some: attributes;
}

.block-name--modifier-name {
  some: attributes;
}

.block-name--modifier-name-2 {
  some: attributes;
}

.block-name--modifier-name-2.block-name--modifier-name {
  some: other-attributes;
}

Requires

$modifier-separator [private]