1 files changed, 62 insertions, 0 deletions

diff --git a/src/_bem.scss b/src/_bem.scss
new file mode 100644
index 0000000..b6032ea
--- /dev/null
+++ b/src/_bem.scss
@@ -0,0 +1,62 @@
+////
+/// BEM.
+///
+/// BEM is a methodology for structuring websites and is mostly known for it's CSS naming convention.
+/// BEMIT is in extension of this methodology and allows you to give blocks a more fine-grained  purpose
+/// than BEM alone would let you do.
+///
+/// Sass does support BEM quite well thanks to the ampersand (&) and the @at-root directive. However,
+/// there is no way to make sure users adhere to the BEM or BEMIT methodology.
+/// That's where the mixins in this file come into play: They automatically generate the right selectors
+/// and perform checks regarding the nesting order, nesting depth, and so on.
+///
+/// There are comments in the mixins explaining what selector is generated. The EBNF grammar is as follows:
+///
+///   (* Shorthands for block, element, modifier, suffix *)
+///   entity_shorthand = "b" "e" "m" "s" "t" ;
+///   
+///   (* One or multiple BEMIT entities that were generated with an earlier mixin invocation *)
+///   existing_entities = "{" entity_shorthand { "," entity_shorthand } "}" ;
+///   
+///   (* A BEM entity that doesn't depend on a parent entity *)
+///   generated_independent_entity = "block" ;
+///   
+///   (* A BEM entity that is attached to a parent entity *)
+///   generated_attached_entity = existing_entities ( "__element" | "--modifier" | "@suffix" ) ;
+///   
+///   (* A selector created by the user, such as "&:hover", "> a", and so on *)
+///   manual_selector_part = "[manual selector]" ;
+///   
+///   (* A part of the selector that may or may not be in the generated result *)
+///   optional_selector_part = "(" ( existing_entities | manual_selector_part ) ")" ;
+///   
+///   (* One part of the selector *)
+///   selector_part = existing_entities | manual_selector_part | optional_selector_part | generated_independent_entity | generated_attached_entity ;
+///   
+///   (* How the left and right selector are related, i.e. space means right is a descendant of left, and dot means right specializes left *)
+///   selector_link = " " | "." ;
+///   
+///   (* The whole selector *)
+///   selector = selector_part { ( selector_link ) selector_part } ;
+///
+/// @link https://en.bem.info/                                                                   Information about BEM
+/// @link https://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/ Information about BEMIT 
+///
+/// @group BEM
+///
+/// @access public
+////
+
+@import 'bem/vars';
+@import 'bem/functions';
+@import 'bem/validators';
+@import 'bem/block';
+@import 'bem/element';
+@import 'bem/modifier';
+@import 'bem/suffix';
+@import 'bem/state';
+@import 'bem/theme';
+@import 'bem/multi';
+@import 'bem/debug';
+
+@include iro-context-stack-create($iro-bem-context-id);