Stop writing var() to use custom properties in VS Code

preview_player
Показать описание
Custom Properties can be long to type out, but you can save a lot of keystrokes in VS Code.

#shorts #css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Рекомендации по теме
Комментарии
Автор

Found this out a few days ago. Really a time saver 💯

joynal_dev
Автор

I had no idea this macro exists. Thanks for sharing!

davidmyersdev
Автор

As someone typing var(-- about 30-40 times a day, I THANK YOU

devine_noise
Автор

this is so helpful, thanks a lot kevin

ahmadfaisal
Автор

Thank you, Kevin! var() was troubling me all the way!

sashatv
Автор

Enjoy your channel. A lot of super tips ⭐️

AlexandraKapit
Автор

I tried doing that, but it didn't work. It just wrote the name of the variable and didn't add var().

BlueHat
Автор

Yes but it's glitchy when you're calling variables from other files, it gives you a full list when it's the first time you're using variables, then it only suggests the ones you have already used in that particular file.

sahandnasr
Автор

Learning to use Vim, this is probable a feaure I'll miss, but one that could be added to Vim too. Thanks for sharing!

cdey
Автор

I was surprised this became a video but then realized not everyone uses intellisense well... There's actually more emmet and other autofill stuff that should totally be covered which are massive timesavers

hikari
Автор

I found your colouring "system" very intuitive, and implemented it myself, so for me, what works even better is I can type the double hyphen flowed by the first letter of the colour style.

For example, --p will only give me a list of the "primary" colours, --a will give me only the "accent" colours, and --d will give the list of "dark" colours, such as "--clr-dark-100, --clr-dark-400, and --clr-dark-900". Just a couple of options to scroll down through then, instead of the complete list.

MrMairu
Автор

Ya it's there

But there's a little catch here, most of the times, it doesn't work when you've got much more than just a single value, say background gradients, filter effects and transforms too

ayaanshaikh
Автор

Cool, I did not know that. Built in snippet!

hardluck
Автор

In vs code if you want to write shortly then never start to write with opening bracket

radadiyanikunj
Автор

I do va + enter + select the one I want

koi
Автор

OMG, it works! And all this time I could have been writing the next best selling novel but I was too busy typing --var()... I just hate when this happens!

bobdinitto
Автор

That's great, and I use this trick alot.
However, it doesn't work in shorthands or properties that expect multiple values like "border:" or "animation:".

Example:
when I write "--" after "animation:" vscode doesn't autocomplete correctly

Expected output
animation: var(--red)

Real output
animation: --red

dunno why...

Hope this helps, thanks for all ur fantastic videos Kevin!

PS: I am ialian btw, I hope there aren't too many english grammar errors :)


EDIT:
.... I just updated vscode...
it works now
oh yeah

francescos
Автор

I think I did this but did control + z because I got confused lmao

koi
Автор

yep! i knew this one. it was a very nice thing to accidentally find out.
i LOVE vscode :)

doriomer
Автор

Omg I would have saved about an hour last night if I realized this 😳

richardwelsh