Vim plugs to work with custom HTML tags and SCSS

Issue

My Vim level is about intermediate - I've been using it about 10 years, but on "newbie" level - find file, delete something, add something, save and quit. Now I decided to make Vim my only code editor. I'm working with Ionic framework (it's Angular + SCSS) and I have a question about some useful things:

1. Is there a way to add all non-standard HTML tag to Syntastic? It's highlights all of Ionic tags, such as <ion-list>, <ion-button>, <ion-radio> and so on. If my google skills are good enough, there's no full Ionic plugin, which will add snippets, syntastic checkers and so on.
2. Is there a way to find and add classes from HTML to SCSS and from SCSS to HTML? I mean, if I'll write .my-very-important-class in SCSS file and then go to HTML file (which is in the same directory with same name and differs by .html or .scss) and in class="" attribute start to input "my" I'll get autocomplete suggest for this class. Is it real to make or maybe someone did already?
3. There is also main file for theming an app, called variables.scss. I need this file to be scanned and match colors (in this file there is an color section, where I can put all colors, I'll need in app, and in .scss file of any page I can get color I need with just color: color($colors, colorname) where colorname is the name of color variable. It's awesome feature, except no color highlighting in code. So it would be great to get color mappings and then highlighting with correct color in .scss file of page.

I didn't found any plugins for this. If there some existing plugins I've missed - I'll be happy to try it. If it's no - I will be glad to made one myself (if it's not very hard). Anyway, I think this are useful things not just for me.

UPD: #1 was fixed - I'm not sure, how exactly, but now it's fine in HTML and I have no errors or warnings from syntastic about wrong tags. I'm feeling newbie, but seems like I forgot to install Vim-ionic2 plugin - just added it to my .vimrc.

And #2 seems to be answered - does what I need.

Solution

1. Syntastic is a frontend to several linters. Find the linter used by Syntastic and look for a way to make it accept those custom tags.

2. If you have the CSS file opened, <C-n> should let you complete the CSS class.

   You might need something like set iskeyword+=- for Vim to complete the whole class name.

3. I think this would be totally useless. That said, if you didn't find such a thing… write it.

Answered By - romainl