5 tips to learn Sass quickly

🎓 beyondcss.dev/?...
🔗 Links
✅ Sass vs. SCSS: • sass vs scss - what's ...
⌚ Timestamps
00:00 - Introduction
00:55 - Keep your CSS file open
02:42 - Level up SLOWLY
05:31 - Don't make things complicated for no reason
06:18 - Use comments
08:07 - Don't use a compiler
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@randy918]

Of all the support technologies I had to learn on the way, Sass is my #1 favorite and the most appreciated day in and day out.

[@vasyaqwe2087]

Nice video, can't wait for the beyond CSS course, keep it up!

[@davidogundiran4791]

Hello Kevin, I really love the way you explain things and make everything simple and that enable us to understand it better. Can you put it in your agenda to talk deeper about SVG and positioning

[@A_Lesser_Man]

I host my own site at home on my linux box. I don't have to code CSS (or HTML, even). i write PERL code. PERL has a SASS package. I write my SASS into an inline document (saved as a scalar, aka string) and pass that string to the SASS package's "compiler" subroutine. I never actually have a true CSS file anywhere on my server. It's 100% PERL code, and the CSS is generated for me (as expected). No pre-compiling for it to work. Just write the SASS and yer done. You have been my goto for SASS education and I have thoroughly enjoyed building up my code! I've gotten so far into this project, I wrote a special "tag" function for generating my HTML for me, so i don't make mistakes in my HTML even. Create a PERL hash with fields: my %attr; $attr{tag}="div"; $attr{class}="thick-border"; $attr{innerHTML}="DIV's inner html"; I never ever have HTML syntax errors. EVER. Never do i forget the , for example (or flip end tags so a div ends before it's contents are finished ( is just NOT a thing anymore!). I can even pass in $attr{spacing}=" "; to allow pretty printing. PERL has to be the easiest thing to learn and is super powerful. Strange why PERL isn't used alll that much. Anyways, the whole point is to let you know I am forever grateful for your teaching me all of this (not the perl coding, that i learned by myself, too) - but ya, ty so much Kevin! Super videos! A link to that subroutine's code? pastebin.com/wkQwguGb Very proud of this "tag" subroutine code. If you happen to take a look at it, it's pretty easy to read - did I miss anything (attributes or whatnot)? Did I get something wrong? I'd love to improve the subroutine. for sure improvements can be made.

[@filipslezak5152]

For the last tip, I found building tooling and dev environment around my projects in go-task is very fast, simple and working 100% of times when i want to achive some things like live reload sass builds, postcss etc. go-task, sass and browser-sync is great combo to have a very good setup with bare configuration.

[@user-ms8ei9le7x]

Thank Kevin , the nice example 🎓

[@kemal6039]

I've watched hundreds of your videos by now. And all this time I thought you were saying "Hello my friend and friends" just realized it's "front-end friends" 😯😯

[@vask5500]

Once I learned about sass, I started using it right away. Haven't learnt it all yet, but still in the process

[@fullgames926]

Yeah it's a one way path

[@extrempty]

wow Kevin your sass videos are really awesome, syntactically awesome. also does anyone know how can i access the values inside a nested map in another file by bringing it in via @use and namespacing it? because i can only access them like with double map-get when i've namespaced it as * and that does work, but it doesn't seem like a best practice cause there might be other files with same names in the future. any idea you might have concerning this question is very appreciated.

[@KevinPowell]

If you don't want to have name-spacing, that's the only option. But if you were worried about naming conflicts, that's why we have that name-spacing. We can shorten it as well, making it one letter instead of the full-name, for example.

[@codeblazefire7653]

Sass is awesome truly speaking

[@d4rzk252]

Hello Kevin, can you make a video on convert scss $ variable to css var? I dont know how to do it and you have this in your project. :) Thanks. 5:05

[@lillime0]

I'm in love with sass syntax😍, but since I couldn't write map in multi lines I switched to scss.. Is there any way to write multi lines map with sass instead of add them all in one line??

[@kat_td7675]

Hi Kevin..... I really enjoy your tutorials. On this one particularly, you mentioned something that I've been struggling to find on KZbin. NO ONE has a video out on how to use comment. Please do not misinterpret what I'm trying to say. Like there are no videos that show us what to say in our comments... We know how to comment but we struggle with what to say in our comments. Can you do a video that shows your most used comments

[@parthkumarchaudhary]

Hey Kevin, Thanks for this informative video. Btw it's may, It's time for the Beyond CSS course. Any update about the course? I'm very excited.

[@KevinPowell]

Few more weeks :D

[@theyreMineralsMarie]

I watched and liked, but as a mainly backend dev who needs to periodically boot strap react apps, Tailwind is all I will ever use.

[@luketurner314]

6:28 and your future-self when you come back to your own code after a long time and have forgotten what it does or what it's for

[@robinstoytchev3472]

Hello Kevin, great video. I want to learn Sass more but before I do that I have kind of a random question if that's ok. I am building my own website and would like to implement a nice looking payment gateway for my products, is this something that is possible to do in Sass or HTML/CSS/JS? Since I am having a ton of fun with my own creative flow it would be really dull to have to SCRAP everything I hav done thus far and just go for shopify, woo etc which is really just templates and kinda boring if u ask me... I thoroughly enjoy your content, keep at it please!

[@KevinPowell]

You'll need to use something to process the payments, but you can use something like Stripe (and there are alternatives to that as well). You don't need Shopify or whatever, but it does take a bit of work :)

[@shedouu]

Watching your channel for a week now and lerning some new stuff, like and subscribe from me ;)

[@Adjust91]

Is scss vs sass personal preference? For someone using html css js react I’m not sure which one to focus on

[@KevinPowell]

yeah, purely personal preference, they both can do the same things.

[@RickBeacham]

Increasingly, my personal preference is to use plain CSS and vanilla JavaScript whenever possible. Projcts not having a pre-processor can simplify the build and work load later (Compass is EOL). However, there are some things that plain CSS can’t quite replicate, like Sass, mixins etc. Hopefully web browsers may support some of these features from SASS but in a stable and secure fashion!

[@abourachedesign9306]

should i learn sass first or js ?

[@oliver139]

SCSS is just so awesome LOL

[@sq5321]

I use scss a lot but i really want to convert myself to sass, i already work with pug and i'm used to use indentation. The problem is on VSCode because there is no emmet in sass files but there is in scss files. If someone knows how to fix that, i would really appreciate it!

[@KevinPowell]

I'm guessing there must be an extension? I don't think VS code comes with syntax highlighting for .sass either? Always found that strange.

[@sq5321]

@@KevinPowell well i was looking for one but didn't find anything unfortunately

[@donmorris4506]

👍

[@nomadshiba]

can you make a video about why tf fuck max-width or max-height refuses to work right sometimes i started to think display:block is just broken also when you set max-width or height on grid, the grid respects it but areas in the grid not respecting it weirdly like when i hove on the grid the blur highlight shows that grid is sized correctly but dashed lines showing the areas of the grid shows that they are overflowing weirdly

[@SM-ok3sz]

snip snap, work it girlfrriiiiiend. There’s your lesson on sass.

[@remcodelouw1968]

Do you have css courses?

[@godmansarah]

See www.kevinpowell.co/courses !

[@Benw8888]

I thought this would be a comedy video not a CS vid LMAO

[@fluffyniki3257]

In my country once lived kind with surname Sass lool

[@zezty]

You've got some great stuff in here but where you lost me is at 7:20 because of the comments. You wrote in plain English what those if statements translate to. Besides the fact that your team should already be able to do that for themselves, you just introduced a scenario where the two can easily get out of sync if any changes are made.

[@Supersoaker-xy2cr]

I feel like woman will watch this so good job bro

[@WERWOLION]

Scss not Sass. Sass is cool scss is bad(