If you enjoyed this crash course, let me know what else you want to learn about Sass. I'm busy filming a short explainer series on the core Sass topics.
This was succinct but thorough and I found it super helpful. I'd love more detail on functions, perhaps as part of a deeper dive that also incorporates other items you didn't touch on in this crash course. Thanks for making this!!
For example, I often find my designers making outline buttons that turn solid/inverted on hover, and functions would be a nice way to programmatically account for those I'd imagine!
@@p__wing Morning, yup I plan on doing exactly that over the coming months. I've already setup a Learn Sass playlist where I am doing individual videos per subject. I'm also going to do a whole series on converting Figma designs to Sass prototypes.
mate this is such a excellent tutorial. Not even the most experienced youtube developers go such in depth like you have at explaining things. you have a new subscriber and keep up the good work.
I enjoyed this crash course! I use Sass with BEM like you mention at the end of the video, I usually nest as you mention by using class, it's great, readable and maintainable
Glad you liked it! I am thinking of doing a series of videos on build tools (Parcel, Webpack etc) but at the moment I just don't have the viewers to make it worthwhile the effort. I get about 50 views a video, and it takes me around 4 - 8 hours to produce it. I think those are a little too niche for a new channel like mine. So I'm sticking to the easier more popular subjects. But hopefully over the coming six months, I'll release a full Parcel series.
🎯 Key Takeaways for quick navigation: 00:00 *💻 SASS - preprocesor CSS* 04:37 *🔄 SASS redukuje powtarzalność* 22:37 *📁 Importowanie plików* 26:15 *❌ Problem z `@use` a `@import`* 38:21 *🎨 Zmienne, listy i mapy* 47:01 *📝 Listy Sass* 52:03 *🧰 Mixiny Sass* Made with HARPA AI
Excellent tutorial! I used sass before in some of my static site when I'm learning html/css but didn't really take advantage of maps, loops and mixins. This crash course helped me understand it clearly.
@@baldmannnnn Absolutely, Nico. I can do better than that though - I'm busy working on the final bits of a new website. I'll have on there a full Sass for beginners course, with a whole bunch of quizzes and challenges. So keep an eye on my UA-cam channel. I am hoping to be live in around 6 - 8 weeks.
Thank you for making these videos! I just found your channel. I would like to stick with your channel this year. I found it very updated, especially the SASS and CSS. Keep it up with the courses it's very helpful to people, especially those who just started learning web dev. You deserve more subs! Are you looking forward with modern JS courses?
Yup, will be making courses on nuxt.js, vue.js, react.js and next.js over the next year. I have a couple more CSS-related crash courses (CSS Grid, Tailwind CSS), and then I'll be focusing on JS related stuff.
@@pixelrocket66 Absolutely sticking with your channel mate! Seems like you know exactly what I want to learn or review 😅🥳 Love this coincidence! Please keep up with your awesome work!
@@thiagosilvaloopes Funny you mention Nuxt and Vue - busy working on a Nuxt & Laravel project for my client. So will definitely be doing crash courses for both of those over the next few months.
Newbie here. I'm accessing the terminal through VS Code to set up the parcel bundler but it says zsh: command not found: npm - any ideas? I can't really continue further without this and I like your approach, hoping to complete this and other courses.
49:57 -- At this point I noticed that each of the grouping subfolders had a separate "dist/" folder. I found in the docs that the dist directory can be specified with "distDir": "./[name-of-dist-folder]". I'm hoping this will resolve the multiple dist folders issue
amazing tutorial, i just had spent alot of time on an outdated sass course on udemy and this clarified so much info for me. my only question is there anyhting or any way other than constantly having to npm run dev every few changes..
Glad you liked it! Keep an eye on my UA-cam channel, because in the next few months I'll be launching a new website. That will have a brand new Sass course on with a whole bunch of challenges and quizzes. To answer your question: absolutely. It depends on what your build tool is (I can't remember what build tool I used for this course - I think it was Parcel?) You'd have to dig around the build tool help docs to see what adjustments you need to make for it to watch and reload on changes.
What is the point of using parcel? Are there any advantages using it over a VSCode Compiler? I feel like all this bloated files that get added are not necessary especially when I just want to use Sass. All these files don't come with vanilla CSS
If we're only looking at it from a Sass point of view, then it really depends on the project setup. If you will be working with multiple team members, then your setup won't help the other team member compile the project's Sass. So in that case, it's better to use a build tool. On the other hand, if it's just you, and you only want to quickly build, say, a landing page, then I would say use whatever you feel is quicker and best. If that's just a VsCode plugin, then great.
You shouldn't have to restart the server each time. Do you mean the changes aren't pushed through to your browser? Or that sass changes aren't recompiled? If so, what version of Parcel are you using?
The explanations are really terrific but the examples you pick are confusing. What I got from this: I understand how to set up for Sass and how to organize styles. Have no clue what you were doing with Sass lists or maps. The examples were way over my head.
Hey Daniel, thanks for the feedback. Appreciate it. I think the whole topic of Sass for beginners needs much more than just video tutorials. So I'm currently working on a whole different approach for beginners, which I'll hopefully be releasing on my not-yet live website. It'll include more video tutorials on the basics, a series of coding challenges, quizzes and a few more elements. I'm going to be posting a series of videos when it's all available.
Just to add, have a look through my playlists. I did do additional sass videos where I covered a few sass topics in more depth. I intended to create more but those original videos really didn't get any views. So am saving my effort for the stuff I'm creating for my website.
Sorry Faeez, I didn't see this comment! That looks to me like you are not in the root of your project folder when running the parcel command. How are you running the command? Through Vscode's inbuilt terminal, or have you opened your computer's command line?
@@pixelrocket66 Thanks for the reply. When I used my computer command line, it didn't work but I tried it again with VS codes inbuilt terminal and it worked perfectly.
I am a beginner and I love this great video tutorials. But I do not know which files at the dist folder I have to copy to web server. And what is the best way to update them, if there are changes? Thank's dear.
Hey Laurentius, if you wanted to put the site live (developers will refer to this as production code), then you would transfer everything inside your dist folder to your web server - but don't include the actual dist folder. So just move all contents inside the dist folder to your live site. I will write a separate reply for how to update the site once it is live.
So once the site is live, how do you update it? Well, this is where version control software is used. Git is the most popular. You will hear developers refer to Git as "github" or "github repo" or sometimes just "repo". Any of those words usually means version control software. Git allows you to easily push changes from your development build (the version in your SRC folder on your computer) through to your live site. But this isn't something I can talk you through in the UA-cam comments! So keep an eye out on my channel because I am busy recording a full Github tutorial series. If you don't use version control software, then each time you make changes in your SRC folder, you have to recompile your DIST folder, then take those files and upload them to your live site web server.
hi nice tuts, subscribed. but a huge problem I don't know if its with parcel or with me . Parcel isn't compiling on save . It's HMR aint working . I am using wsl . and did exactly the same by adding script and type module in index.html. my package.json have source : ./src/index.html , dev: parcel . there are two dependencies , parcel and parcel/transformer-sass . both above 2.6 version . can you help me with this out ? thanks
Hi Faiq, I've noticed the same issue with my Parcel sometimes. Sometimes restarting dev server fixes it. Sometimes keeping your code inspector (in your browser) open fixes it. Really no idea why Parcel does that or what the fix is for that.
@@pixelrocket66 Hi, Pixela thanks for answering . I figured it out. Its actually a problem with wsl2 and HMR won't work when using zsh/wsl2 and working in a windows directory . otherwise its working great in bash or powershell . so no problem in the tuts
I don't work with scss on live server. What you are seeing in my video was all done on my local environment, meaning on my own computer. I would compile my scss into plain CSS and would then place those compiled CSS files onto a live server.
@@pixelrocket66 But in this way it is very hard working on a Project on a Live-Server, as working with scss/sass files. For every changes you have to upload the new generated css file in to the server.
Yup, that's why you would want a better workflow. I would suggest creating a repository on something like Github. Then pushing your code through to your repository, and finally, connect your repository to your live server. You can even setup hooks so that when you update your repository, your live server pulls the updated code.
Also I would suggest not uploading files each time you make a change. Make changes locally until you are happy, compile your production code, then upload that to your live server.
Hello, Pixel Rocket. For sometime now I noticed Parcel is not watching for changes in sass. It works fine with plain CSS and HTML and JavaScript but not with Sass. Is this a bug??? I decided to watch your installation process again and followed through strictly including adding the type='module' on JS link.
Taofeeq, what version of Parcel are you using? Check your package.json. If you're not using V2 of parcel, you need to install an additional Sass compilation package: v1.parceljs.org/scss.html. If you're using V2 of Parcel, the sass compilation plugin should be automatically added by Parcel. But you should see it in your package.json. So if it's missing for whatever reason, then just manually install it. If this doesn't help, put your code on a github repo and send me the repo link
Hi Javed, dot dot forward slash (../), is used when you want to go up one directory. So let's say you are in your CSS file, which is located in assets/css/main.css, but you want to reference font files which are in assets/fonts/font.tff, from inside your main.css, you would use ../ - that tells your browser or build tool to go up one level.
Then for the last one, no dots, no slashes, this can be used depending on where you are and what you are trying to reach. It's just going to add onto whatever your location is. So let's say we are on a page called "domain.com/category", and we want to have a page link (a href) on this category page. The full path of the URL is: domain.com/category/faq.html", inside our href, we can use Click here. But if we are on a different page (let's say contact), and we also want to link to the faq page, we have to use: Click here
Thank you for your response. Subscribed to your channel. One suggestion, Can you make a beginner friendly CSS+SASS tutorial that can help understand css concepts as well as sass simultaneously. I found the set up of sass part cumbersome. Once again Thank you.
If you enjoyed this crash course, let me know what else you want to learn about Sass. I'm busy filming a short explainer series on the core Sass topics.
I will love to see it bro! Lot of thanks for the own time of yours that you take to help other people learn 🙏🏼🥳 You absolutely rock buddy!
This was succinct but thorough and I found it super helpful. I'd love more detail on functions, perhaps as part of a deeper dive that also incorporates other items you didn't touch on in this crash course.
Thanks for making this!!
For example, I often find my designers making outline buttons that turn solid/inverted on hover, and functions would be a nice way to programmatically account for those I'd imagine!
@@p__wing Morning, yup I plan on doing exactly that over the coming months. I've already setup a Learn Sass playlist where I am doing individual videos per subject. I'm also going to do a whole series on converting Figma designs to Sass prototypes.
@@p__wing Hopefully my Figma to prototype series (I'll be doing the first video in the coming weeks) will cover topics such as that.
mate this is such a excellent tutorial. Not even the most experienced youtube developers go such in depth like you have at explaining things. you have a new subscriber and keep up the good work.
Thank you for the kind words, Serhan - I appreciate it!
You will get more subs in the future, nowadays it's difficult finding course like that! You deserve better.
Thank you so much!
Great course. Got me up and running. Thank you so much!
Great to hear!
Please keep making tutorials you really are great at explaining really helped me understand SCSS and now I truly want to master it, Thank you
That's great to hear Keszeey!
Thanks for this amazing tutorial man! It was a bit difficult for me at first but after learning the basics of sass I can say it's so helpful!
I enjoyed this crash course! I use Sass with BEM like you mention at the end of the video, I usually nest as you mention by using class, it's great, readable and maintainable
Your explanation is sooo amazing, Thischannel is underrated unfortunately.
Keep it up mate i'm huge fan of yours rn. And thank you .
Glad you enjoy it!
Thanks for your effort! Great Intro to SASS. I would also be interessted in a more in-deph training on parcel 🤩
Glad you liked it! I am thinking of doing a series of videos on build tools (Parcel, Webpack etc) but at the moment I just don't have the viewers to make it worthwhile the effort. I get about 50 views a video, and it takes me around 4 - 8 hours to produce it. I think those are a little too niche for a new channel like mine. So I'm sticking to the easier more popular subjects. But hopefully over the coming six months, I'll release a full Parcel series.
Very leka nice course mate! Keep it up!
I hope your channel grows, you deserve much more subs.
Thank you!
🎯 Key Takeaways for quick navigation:
00:00 *💻 SASS - preprocesor CSS*
04:37 *🔄 SASS redukuje powtarzalność*
22:37 *📁 Importowanie plików*
26:15 *❌ Problem z `@use` a `@import`*
38:21 *🎨 Zmienne, listy i mapy*
47:01 *📝 Listy Sass*
52:03 *🧰 Mixiny Sass*
Made with HARPA AI
Holey moley! Thank you so much.
You're welcome!
Thanks a lot 🙏🏼 This has given me enough to work with and made learning the rest a lot easier.
That's great to hear! Glad it helped!
Hello. I love it. Please make more Projects with Sass.
Thank you - I will do!
Excellent tutorial! I used sass before in some of my static site when I'm learning html/css but didn't really take advantage of maps, loops and mixins. This crash course helped me understand it clearly.
Fantastic, Nico, so glad it helped!
@@pixelrocket66 can you make another video about how and when to use sass functions?
@@baldmannnnn Absolutely, Nico. I can do better than that though - I'm busy working on the final bits of a new website. I'll have on there a full Sass for beginners course, with a whole bunch of quizzes and challenges. So keep an eye on my UA-cam channel. I am hoping to be live in around 6 - 8 weeks.
Your teaching school is fantastic. I lovve that. Thank you sir, for ur courses.
Thank you for the lovely words, Sardo. Glad you enjoyed the course!
well explained the tutorial, I needed that as a beginner. You deserve more subscribers. Me I'm one of them now. keep going wish you the best...✌
That's great - thank you!
this is sick
Glad you like it!
I loved so much the way you explained well. it would be better if you kept going like uploading such explanation videos. (;
Thank you, I will!
Amazing tutorial! keep going bro
thank you!
Awesome course, thank you so much!
You're very welcome!
Great tutorial man, great work!
Thanks Kurt!
Bravo Bravo
Thank you!
Excellent video!
Can you do an advanced sass project?
Yup, am planning on doing on later in the year!
Thank you for making these videos! I just found your channel. I would like to stick with your channel this year. I found it very updated, especially the SASS and CSS. Keep it up with the courses it's very helpful to people, especially those who just started learning web dev. You deserve more subs! Are you looking forward with modern JS courses?
Yup, will be making courses on nuxt.js, vue.js, react.js and next.js over the next year. I have a couple more CSS-related crash courses (CSS Grid, Tailwind CSS), and then I'll be focusing on JS related stuff.
@@pixelrocket66 Absolutely sticking with your channel mate! Seems like you know exactly what I want to learn or review 😅🥳 Love this coincidence! Please keep up with your awesome work!
@@pixelrocket66 Can't wait to see your Nuxt & Vue videos 🤩 Also, I love your editing, simple but really elegant 👏🏼
@@thiagosilvaloopes Funny you mention Nuxt and Vue - busy working on a Nuxt & Laravel project for my client. So will definitely be doing crash courses for both of those over the next few months.
@@thiagosilvaloopes Thanks Thiago, I appreciate the kind words!
Simply perfect ... hitting subscribe button
Thanks Jan, glad you enjoyed it!
Newbie here. I'm accessing the terminal through VS Code to set up the parcel bundler but it says zsh: command not found: npm - any ideas? I can't really continue further without this and I like your approach, hoping to complete this and other courses.
Awesome
Glad you liked it!
49:57 -- At this point I noticed that each of the grouping subfolders had a separate "dist/" folder. I found in the docs that the dist directory can be specified with "distDir": "./[name-of-dist-folder]". I'm hoping this will resolve the multiple dist folders issue
amazing tutorial, i just had spent alot of time on an outdated sass course on udemy and this clarified so much info for me.
my only question is there anyhting or any way other than constantly having to npm run dev every few changes..
Glad you liked it! Keep an eye on my UA-cam channel, because in the next few months I'll be launching a new website. That will have a brand new Sass course on with a whole bunch of challenges and quizzes. To answer your question: absolutely. It depends on what your build tool is (I can't remember what build tool I used for this course - I think it was Parcel?) You'd have to dig around the build tool help docs to see what adjustments you need to make for it to watch and reload on changes.
How does this video have only 87 views
Hopefully not for too long!
Great 😃 video 📸
Thanks!
What is the point of using parcel? Are there any advantages using it over a VSCode Compiler? I feel like all this bloated files that get added are not necessary especially when I just want to use Sass. All these files don't come with vanilla CSS
If we're only looking at it from a Sass point of view, then it really depends on the project setup. If you will be working with multiple team members, then your setup won't help the other team member compile the project's Sass. So in that case, it's better to use a build tool. On the other hand, if it's just you, and you only want to quickly build, say, a landing page, then I would say use whatever you feel is quicker and best. If that's just a VsCode plugin, then great.
Great course but having to restart the server every time I made a change wasn't ideal. I'm guessing gulp and webpack will behave in a similar minor.
You shouldn't have to restart the server each time. Do you mean the changes aren't pushed through to your browser? Or that sass changes aren't recompiled? If so, what version of Parcel are you using?
The explanations are really terrific but the examples you pick are confusing. What I got from this: I understand how to set up for Sass and how to organize styles. Have no clue what you were doing with Sass lists or maps. The examples were way over my head.
Hey Daniel, thanks for the feedback. Appreciate it. I think the whole topic of Sass for beginners needs much more than just video tutorials. So I'm currently working on a whole different approach for beginners, which I'll hopefully be releasing on my not-yet live website. It'll include more video tutorials on the basics, a series of coding challenges, quizzes and a few more elements. I'm going to be posting a series of videos when it's all available.
Just to add, have a look through my playlists. I did do additional sass videos where I covered a few sass topics in more depth. I intended to create more but those original videos really didn't get any views. So am saving my effort for the stuff I'm creating for my website.
How did you get the Zsh terminal? Thank you.
I use Iterm2: iterm2.com. But the built in Mac/Windows terminal will do the same job.
@@pixelrocket66 Thank you!
Hi there, I got an error at 19:47 in the video : 'parcel' is not recognized as an internal or external command,
operable program or batch file.
Sorry Faeez, I didn't see this comment! That looks to me like you are not in the root of your project folder when running the parcel command. How are you running the command? Through Vscode's inbuilt terminal, or have you opened your computer's command line?
@@pixelrocket66 Thanks for the reply. When I used my computer command line, it didn't work but I tried it again with VS codes inbuilt terminal and it worked perfectly.
I am a beginner and I love this great video tutorials. But I do not know which files at the dist folder I have to copy to web server. And what is the best way to update them, if there are changes? Thank's dear.
Hey Laurentius, if you wanted to put the site live (developers will refer to this as production code), then you would transfer everything inside your dist folder to your web server - but don't include the actual dist folder. So just move all contents inside the dist folder to your live site. I will write a separate reply for how to update the site once it is live.
So once the site is live, how do you update it? Well, this is where version control software is used. Git is the most popular. You will hear developers refer to Git as "github" or "github repo" or sometimes just "repo". Any of those words usually means version control software. Git allows you to easily push changes from your development build (the version in your SRC folder on your computer) through to your live site. But this isn't something I can talk you through in the UA-cam comments! So keep an eye out on my channel because I am busy recording a full Github tutorial series. If you don't use version control software, then each time you make changes in your SRC folder, you have to recompile your DIST folder, then take those files and upload them to your live site web server.
@@pixelrocket66 Thank you for the helpful explanations. I'm really looking forward to your Github series. That sounds extremely interesting.
hi nice tuts, subscribed. but a huge problem I don't know if its with parcel or with me . Parcel isn't compiling on save . It's HMR aint working . I am using wsl . and did exactly the same by adding script and type module in index.html. my package.json have source : ./src/index.html , dev: parcel . there are two dependencies , parcel and parcel/transformer-sass . both above 2.6 version . can you help me with this out ? thanks
Hi Faiq, I've noticed the same issue with my Parcel sometimes. Sometimes restarting dev server fixes it. Sometimes keeping your code inspector (in your browser) open fixes it. Really no idea why Parcel does that or what the fix is for that.
@@pixelrocket66 Hi, Pixela thanks for answering . I figured it out. Its actually a problem with wsl2 and HMR won't work when using zsh/wsl2 and working in a windows directory .
otherwise its working great in bash or powershell . so no problem in the tuts
How are you working with the scss files on live server? What kind of compiler are you using?
I don't work with scss on live server. What you are seeing in my video was all done on my local environment, meaning on my own computer. I would compile my scss into plain CSS and would then place those compiled CSS files onto a live server.
@@pixelrocket66 But in this way it is very hard working on a Project on a Live-Server, as working with scss/sass files. For every changes you have to upload the new generated css file in to the server.
Yup, that's why you would want a better workflow. I would suggest creating a repository on something like Github. Then pushing your code through to your repository, and finally, connect your repository to your live server. You can even setup hooks so that when you update your repository, your live server pulls the updated code.
Also I would suggest not uploading files each time you make a change. Make changes locally until you are happy, compile your production code, then upload that to your live server.
@@pixelrocket66 this is interesting. I will try it.
Hello, Pixel Rocket. For sometime now I noticed Parcel is not watching for changes in sass. It works fine with plain CSS and HTML and JavaScript but not with Sass. Is this a bug??? I decided to watch your installation process again and followed through strictly including adding the type='module' on JS link.
Taofeeq, what version of Parcel are you using? Check your package.json. If you're not using V2 of parcel, you need to install an additional Sass compilation package: v1.parceljs.org/scss.html. If you're using V2 of Parcel, the sass compilation plugin should be automatically added by Parcel. But you should see it in your package.json. So if it's missing for whatever reason, then just manually install it. If this doesn't help, put your code on a github repo and send me the repo link
Also check what method of import you are using for your Sass partials. Remember the difference between @import and @use!
@@pixelrocket66 Thanks so much for quickly responding to me. I'm just seeing your reply now. I would share a GitHub repo link shortly
How to know in the file path when to use single dot,(./) or double dot and even no dots?
Hi Javed, dot dot forward slash (../), is used when you want to go up one directory. So let's say you are in your CSS file, which is located in assets/css/main.css, but you want to reference font files which are in assets/fonts/font.tff, from inside your main.css, you would use ../ - that tells your browser or build tool to go up one level.
Dot forward slash (./) means same directory as current.
Forward slash (/) generally means the root of the project (so if we're talking about a website, that would be our index page or our homepage).
Then for the last one, no dots, no slashes, this can be used depending on where you are and what you are trying to reach. It's just going to add onto whatever your location is. So let's say we are on a page called "domain.com/category", and we want to have a page link (a href) on this category page. The full path of the URL is: domain.com/category/faq.html", inside our href, we can use Click here. But if we are on a different page (let's say contact), and we also want to link to the faq page, we have to use: Click here
Thank you for your response. Subscribed to your channel.
One suggestion,
Can you make a beginner friendly CSS+SASS tutorial that can help understand css concepts as well as sass simultaneously. I found the set up of sass part cumbersome.
Once again Thank you.
Can you please make one of these full tutorials for Open Props (open-props.style). Thank you for this sass tutorial.
That's a great suggestion! I've not worked with open props before but it looks great. Definitely will do something in the future with this.