Recently, our team thought that some things we do too often, and we need to optimize these processes. We have written 2 functions that help us to slice faster. To use these functions you need to connect jQuery (even if you have declaimed from it, connect it temporarily).
Collect classes from the BEM page in Sass
During development, we use the following approach: each element has one main class, the other classes are modifiers. You can read more about it in our CBEM article - Container, Block, Element, Modifier. We use sass as a preprocessor with the scss syntax, and in order to collect all the classes from the page and insert them into the style files we will need one function:
In the first parameter, we indicate where to collect the classes, in the second - where to put the result.
Let’s write a small markup and collect the classes:
Fetch the function in your js-file:
The function will collect all the classes from the page and put them into the selector with the class `elements_list`. The result is:
Next what we do, we copy the classes to the editor in scss, and it arranges auto-formatting (for example, in PHPStorm using the key combination Ctrl+Alt+L). And in the end, we get a convenient sass file that can be used:
Note that modifiers are automatically inserted after the main classes.
Creating quick navigation on a static layout
Quite often we develop websites which have more pages than a person has fingers on his hand (and sometimes even on legs). In order to jump through the pages you need to either change the address in the browser, or put links in the markup (which is often inconvenient, confusing, and useless, because the programmer changes this). So, we wrote a widget for quick navigation on the project, which is a single js-function:
As arguments, we pass an array with pages:
You don’t need to specify the extension .html. After fetching this function, a small square appears in the upper left corner of the page, by hovering on which the widget with the pages will come out: