1

when developing for web (in Vim) I'm always using the BEM methodology. I have identified that I always go through the same steps when adding a new block element, and I'm looking for ways to automate the whole/or parts of the process.

What I now have to do for each block being added:

Using UltiSnips, c- is expanded and edited into something like this: 

<!-- Component: Button -->
<div class="c-button">
  <div class="c-button__border">
    <img class="c-button__icon" src="img/mic-off.svg" />
  </div> 
  <p class="c-button__title">Mic off</p>  
</div>

Then I have to navigate to src/sass/components/ and add a file named _c-button.sass with the content:

.c-button

  &__border
  &__icon
  &__title

Finally edit src/sass/main.sass and add @import 'components/button' to the end of the file.

So any tips/ideas how to start to automate this process further?

Improve this question
1
  • 3
    I think it's not Vim's job to create file and put skeleton in them (Vim is a text editor). You might be looking for a tool like yeoman which allows you to scafold a project but also to automate the addition of new components in web project (and basically in any project with the right generator)
    – statox
    May 28, 2018 at 8:06

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.