blob: e34b79b53dfa4bfdbc4a24a6ba0992e9f94e3193 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
////
/// 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
////
@forward 'bem/vars';
@forward 'bem/functions';
@forward 'bem/validators';
@forward 'bem/block';
@forward 'bem/element';
@forward 'bem/modifier';
@forward 'bem/suffix';
@forward 'bem/state';
@forward 'bem/theme';
@forward 'bem/multi';
@forward 'bem/debug';
@use 'bem/vars';
@use './contexts';
@include contexts.create(vars.$context-id);
|
