diff options
Diffstat (limited to 'src/_bem.scss')
-rw-r--r-- | src/_bem.scss | 62 |
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 @@ | |||
1 | //// | ||
2 | /// BEM. | ||
3 | /// | ||
4 | /// BEM is a methodology for structuring websites and is mostly known for it's CSS naming convention. | ||
5 | /// BEMIT is in extension of this methodology and allows you to give blocks a more fine-grained purpose | ||
6 | /// than BEM alone would let you do. | ||
7 | /// | ||
8 | /// Sass does support BEM quite well thanks to the ampersand (&) and the @at-root directive. However, | ||
9 | /// there is no way to make sure users adhere to the BEM or BEMIT methodology. | ||
10 | /// That's where the mixins in this file come into play: They automatically generate the right selectors | ||
11 | /// and perform checks regarding the nesting order, nesting depth, and so on. | ||
12 | /// | ||
13 | /// There are comments in the mixins explaining what selector is generated. The EBNF grammar is as follows: | ||
14 | /// | ||
15 | /// (* Shorthands for block, element, modifier, suffix *) | ||
16 | /// entity_shorthand = "b" "e" "m" "s" "t" ; | ||
17 | /// | ||
18 | /// (* One or multiple BEMIT entities that were generated with an earlier mixin invocation *) | ||
19 | /// existing_entities = "{" entity_shorthand { "," entity_shorthand } "}" ; | ||
20 | /// | ||
21 | /// (* A BEM entity that doesn't depend on a parent entity *) | ||
22 | /// generated_independent_entity = "block" ; | ||
23 | /// | ||
24 | /// (* A BEM entity that is attached to a parent entity *) | ||
25 | /// generated_attached_entity = existing_entities ( "__element" | "--modifier" | "@suffix" ) ; | ||
26 | /// | ||
27 | /// (* A selector created by the user, such as "&:hover", "> a", and so on *) | ||
28 | /// manual_selector_part = "[manual selector]" ; | ||
29 | /// | ||
30 | /// (* A part of the selector that may or may not be in the generated result *) | ||
31 | /// optional_selector_part = "(" ( existing_entities | manual_selector_part ) ")" ; | ||
32 | /// | ||
33 | /// (* One part of the selector *) | ||
34 | /// selector_part = existing_entities | manual_selector_part | optional_selector_part | generated_independent_entity | generated_attached_entity ; | ||
35 | /// | ||
36 | /// (* How the left and right selector are related, i.e. space means right is a descendant of left, and dot means right specializes left *) | ||
37 | /// selector_link = " " | "." ; | ||
38 | /// | ||
39 | /// (* The whole selector *) | ||
40 | /// selector = selector_part { ( selector_link ) selector_part } ; | ||
41 | /// | ||
42 | /// @link https://en.bem.info/ Information about BEM | ||
43 | /// @link https://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/ Information about BEMIT | ||
44 | /// | ||
45 | /// @group BEM | ||
46 | /// | ||
47 | /// @access public | ||
48 | //// | ||
49 | |||
50 | @import 'bem/vars'; | ||
51 | @import 'bem/functions'; | ||
52 | @import 'bem/validators'; | ||
53 | @import 'bem/block'; | ||
54 | @import 'bem/element'; | ||
55 | @import 'bem/modifier'; | ||
56 | @import 'bem/suffix'; | ||
57 | @import 'bem/state'; | ||
58 | @import 'bem/theme'; | ||
59 | @import 'bem/multi'; | ||
60 | @import 'bem/debug'; | ||
61 | |||
62 | @include iro-context-stack-create($iro-bem-context-id); | ||