5 tips to learn Sass quickly

🔗 Links

⌚ 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

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!

[randy]

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.

[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 </div>, for example (or flip end tags so a div ends before it's contents are finished (<div><form></div></form> 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!

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.

[davidogundiran]

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

[vasyaqwe]

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

[coldcircuit]

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.

[vask]

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

[drzk]

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

[luketurner]

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

[kemal]

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" 😯😯

[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.

[kat_td]

Hi I really enjoy your tutorials. On this one particularly, you mentioned something that I've been struggling to find on YouTube. 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

[lillime]

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??

[Adjust]

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

[sq]

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!

[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-oksz]

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

[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.

[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.

[robinstoytchev]

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!

[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.