Context()

• Overview
• Parameters

This mixin is part of Cell Query

Overview

This mixin allows you generate styles when the target element is within a parent module or component, optionally filtered by one or more modifier(s)/pseudo-state(s).

@include context($block, $context);

Example

In the below example, $this is a global variable that output's the current module's name, which in this case would be 'accordion' (learn more)

@include module('accordion') {
  @include component('content') {
    display: none;

    @include context(($this, 'panel'), 'active') {
      display: block;
    }
  }
}

Which is equivalent to (in the sense they output the same CSS):

@include module('accordion') {
  @include component('panel') {
    @include is('active') {
      @include component('content') {
        display: block;
      }
    }
  }

  @include component('content') {
    display: none;
  }
}

<div class="accordion">
  <div class="accordion__panel">
    <div class="accordion_title">...</div>
    <div class="accordion__content">
      ...
    </div>
  </div>
  <div class="accordion__panel--active">
    <div class="accordion_title">...</div>
    <div class="accordion__content">
      ...
    </div>
  </div>
</div>

CSS Output

.accordion__content, 
[class*="accordion__content--"] {
  display: none;
}

[class*="accordion__panel--"][class*="--active"] .accordion__content, 
[class*="accordion__panel--"][class*="--active"] [class*="accordion__content--"] {
  display: block;
}

Parameters

• $block
• $context

$block

Type	String | List
Description	The name of a module or a list that will be concatenated to a BEM component selector
Default	undefined

$block as String

.foo {
  @include context('myModule') {
    color: red;
  }
}

CSS Output

.myModule .foo {
  color: red;
}

[class*="myModule--"] .foo {
  color: red;
}

$block as List

.foo {
  @include context('myModule', 'fizz', 'buzz') {
    color: red;
  }
}

CSS Output

.myModule__fizz__buzz .foo {
  color: red;
}

[class*="myModule__fizz__buzz--"] .foo {
  color: red;
}

$context

Type	String | List
Description	The name of a modifier of pseudo-state (pseudo-state must be prepended with :)
Default	null

Example

.foo {
  @include context('myModule', ('active', ':hover')) {
    color: blue;
  }
}

CSS Output

[class*="myModule--"][class*="--active"] .foo {
  color: blue;
}

.myModule:hover .foo {
  color: blue;
}

[class*="myModule--"]:hover .foo {
  color: blue;
}