From d07f664450ddaaebb44127a4bd057763d13d3f82 Mon Sep 17 00:00:00 2001 From: Feuerfuchs Date: Sun, 1 Nov 2020 20:55:14 +0100 Subject: Init --- src/_bem.scss | 62 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 src/_bem.scss (limited to 'src/_bem.scss') 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); -- cgit v1.3.1