This is an excellent video. One important detail that was missed in this video is regarding the savePath for Live Sass Compiler to know where you want it to create the css file for each scss file that it watches. If your Live Sass Compiler is placing the css files in a "dist" folder in your project root, go into your Live Sass Compiler settings and change your "liveSassCompile.settings.formats" to the following: { "format": "compressed", "extensionName": ".min.css", "savePath": "~/" } This also minifies the css file which is good for production.
I'm new to sass, like this has been the first video I'm watching on it and you explained it so well! I'm totally sold on it, and its efficiency! Would definitely love to see more advanced sass videos from you Pedro, thanks sm!!
Great Tutorial. But we can npm i sass instead of installing the vs-code extension for watching the .scss file. And we can directly import the .scss file to our .jsx files. Either way! this was really helpful.
Sass is amazing, you are amazing! Super comprehensive intro, everything you need to get well on your way with Sass. I'd love to see an advanced Sass vid like you mentioned. Specifically implementing selectors such as :hover or :focus, as well as animations perhaps using keyframes? Is that something you might do in the future? Thanks for the vids, love your content!
The live sass does not work whit @use & @forward, and @import is deprecated, I use sass -w origin_path:destiny_path, also working whit _part files, makes it way easier, since it doesn't keeps creating new css files. Happy learning!
1. The other .css/map/etc files were not auto-generated (7:20ish). I assume I'm doing something wrong. 2. I DID to an npm -g install sass and things appear to be working with my .scss file imported as-is on my App.jsx (working on all other components). Sweet. Love to hear thoughts on this! Go easy on me. Just trying to learn a bit.
Whats your output path for the compiler? to make it compile in the same folder as the scss file is in. Also, for some reason component.module.scss isn't working and not sure why. Make a video on using css module with scss because can't seem to get it to work myself unfortunately.
Olá, Pedro. Gostei muito do seu conteúdo. Abri seu site para pesquisar o curso, mas a página não traduz para o meu idiona de forma alguma. Alguma dica?
do I have to use Sass to make sure that CSS code works in all browsers or REACT does it just using regular CSS? I really need to know it. Thanks for this video
Ok i see you installed the "sass" extension, but i didnt understand, how does the ".sass" extension, run ? you have to configure it ? and how do you get the ".sass" extension started and watch the ".sass" extension files ?
Would it be better to write a script tag to compile Sass in your json file so that your styles are put into one css file instead of compiling two separate css files for each scss file? this is a great video but just curious on the best method to use sass with react.
Hey Pedro, don't use that live sass compiler from Ritwick Dey it has problems. Use the other one instead (Glenn Marks) that one is up to date and won't cause as much problems.
Thanks for the great video. How do you add global CSS? Let's say I want to add something like body: { font-family: 'Arial', sans-serif; }, which file should use?
Good video, hope see more like this. I have a question, dont u have to install Node-sass to compile sass-css..? I have seen videos where are using this method... sorry if im wrong, im new in this. Im just asking...Nice video, thx for all...!!!!!
This is SASS specific video, why you have used react project you can explain simply with HTML file also. React already has SASS package that package internally convert SCSS to CSS and instead of that you mentioned install vscode extension.
Great explanation. However, the Variables.scss file is being compiled unnecessarily since you imported it from Navbar.scss and MainPage.scss There must be a way to only compile the .scss you will actually need.
PedroTech totally unrelated working on a social media platform, want to simulate a gif using canvas.basically creating a canvas component which adds stickers or 3d objects to different frames of an image or video then converts the canvas (server side) to either a video or an audio gif: basically automat a gif with a canvas allow play and pause ,then add an audio file as a constraint to play and pause can you do a basic video on react with canvas thank you 😁 sensei😔🙏
Nice tutorial, I always enjoyed your tutorial...I will be so grateful if you can make a tutorial on user authenticate with social media in mern stack either graphql or restAPI
This video could have been, like, 50% shorter if the first half wasn't an unnecessary CSS tutorial. LIke, yeah, I know how to use CSS, I don't have to watch you write a couple dozen CSS properties before getting to the actual Sass part.
Bad video, very outdated. file structure is bad and also everything except you main style sass file should have "_" before the first letter, that means its a partial and it wont be compiled. then when everything is merged into main sass file, only that one is compiled into css
3 years later and this tutorial is still great, thanks for sharing PedroTech
This is an excellent video. One important detail that was missed in this video is regarding the savePath for Live Sass Compiler to know where you want it to create the css file for each scss file that it watches. If your Live Sass Compiler is placing the css files in a "dist" folder in your project root, go into your Live Sass Compiler settings and change your "liveSassCompile.settings.formats" to the following:
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "~/"
}
This also minifies the css file which is good for production.
Thank you so much
You explain everything clearly anyone can understand
Are you reading my mind? I searched for this literally just this morning. Thanks!
Hahaha happy to hear that
Most underrated Channel i've ever seen. 🔥
Glad you think so!
Best explanation of react and sass configuration I’ve seen
Once again, a masterpiece from Pedro Tech
OMG, I'm obsessed with your channel. You deserve way more subscribers. 😍
Hahaha thank you! Appreciate the support!
Yes , nice Pedro , keep up the good work!
Thanks a lot!
I promise this is a beautiful tutorial, every part was explained clearly. Thank you.
I'm new to sass, like this has been the first video I'm watching on it and you explained it so well! I'm totally sold on it, and its efficiency! Would definitely love to see more advanced sass videos from you Pedro, thanks sm!!
Great Tutorial. But we can npm i sass instead of installing the vs-code extension for watching the .scss file. And we can directly import the .scss file to our .jsx files.
Either way! this was really helpful.
this will be less messy, thanks
what about the autoprefixer?
Correct, to make everything simplier :D
Thanks a lot for the video Pedro!! Hoping more Sass tutorials from you
Pedro, estás salvando mi carrera, te amo!! ❤️
Your channel is a gem! I just wanna thank you🙏
Sass is amazing, you are amazing! Super comprehensive intro, everything you need to get well on your way with Sass. I'd love to see an advanced Sass vid like you mentioned. Specifically implementing selectors such as :hover or :focus, as well as animations perhaps using keyframes? Is that something you might do in the future? Thanks for the vids, love your content!
Great tutorial thank you so much!! 10000x times better than my course :)
aweaome..you make sass easy and clear..
Glad to hear that!
The live sass does not work whit @use & @forward, and @import is deprecated, I use sass -w origin_path:destiny_path, also working whit _part files, makes it way easier, since it doesn't keeps creating new css files. Happy learning!
You have explained perfect! Thak's!
Would be great to see a full project with react and sass to see how you organize your folders etc.
Same, i need best practice desprately, my codebase is a mess !
1. The other .css/map/etc files were not auto-generated (7:20ish). I assume I'm doing something wrong.
2. I DID to an npm -g install sass and things appear to be working with my .scss file imported as-is on my App.jsx (working on all other components). Sweet.
Love to hear thoughts on this! Go easy on me. Just trying to learn a bit.
Same issue. I cant seem to find a solution either.
Very insightful.
Excellent video. Thank you for your time
Very good explanation. Thank you!
You saved me. ❤️
Whats your output path for the compiler? to make it compile in the same folder as the scss file is in. Also, for some reason component.module.scss isn't working and not sure why. Make a video on using css module with scss because can't seem to get it to work myself unfortunately.
Great video, thanks Pedro
Great tutorial! Thank you very much!
Olá, Pedro. Gostei muito do seu conteúdo. Abri seu site para pesquisar o curso, mas a página não traduz para o meu idiona de forma alguma. Alguma dica?
looking forward to advance sass tuitorial brother!
Hey can you make one small example with HOC and React Router together?
Thanks
would be great
Would appreciate seeing ya make a whole website on sass :)
do I have to use Sass to make sure that CSS code works in all browsers or REACT does it just using regular CSS? I really need to know it. Thanks for this video
here we go again...thank you bro..
Always welcome!
Thanks for sharing
Thanks for watching!
When I save my SCSS Its not able to generate CSS. Please help me on this
you haven't turned on the watch scss on the bottom of your vs code
Ok i see you installed the "sass" extension, but i didnt understand, how does the ".sass" extension, run ? you have to configure it ? and how do you get the ".sass" extension started and watch the ".sass" extension files ?
in CRA, sass is configured by default, you just need to install it but if you are using webpack you need to configure it.
Yep! You technically dont need to do anything after downloading the extension. It will look for all .scss files and compile them to css!
Would it be better to write a script tag to compile Sass in your json file so that your styles are put into one css file instead of compiling two separate css files for each scss file? this is a great video but just curious on the best method to use sass with react.
Hey Pedro, don't use that live sass compiler from Ritwick Dey it has problems. Use the other one instead (Glenn Marks) that one is up to date and won't cause as much problems.
Thanks for the video
I have the sass compiler and the sass extensions. however when I save iit the not create the css files with the compiled scss.
Thank you bro ♥👍
Well done my dear friend👍
Thank you very match bro!
Thanks for the great video. How do you add global CSS? Let's say I want to add something like body: { font-family: 'Arial', sans-serif; }, which file should use?
Good video, hope see more like this. I have a question, dont u have to install Node-sass to compile sass-css..? I have seen videos where are using this method... sorry if im wrong, im new in this. Im just asking...Nice video, thx for all...!!!!!
thanks man🔥❤️
شكرا لك ، قناتك جدً مفيدة
This is SASS specific video, why you have used react project you can explain simply with HTML file also. React already has SASS package that package internally convert SCSS to CSS and instead of that you mentioned install vscode extension.
He mentioned in the beginning that this is a specific SASS+React video😂
Kindly help teach us how to use sass and react full tutorial.
Thanks
helpful video thanks
Live SASS does not support the @use and @forward. SASS is moving away from the @import. Maybe you could redo this video.
Hope so 😪
Thank you 👍🏼
hey pedro can you make a cms tutorial or a advanced javascript tutorial because im struggling to learn it. Love your work.
Great explanation. However, the Variables.scss file is being compiled unnecessarily since you imported it from Navbar.scss and MainPage.scss There must be a way to only compile the .scss you will actually need.
Hi. great rect-sass info. The video quality it s a bit annoying... hope you can fix that bc you created a good material.
Thank you
PedroTech totally unrelated working on a social media platform, want to simulate a gif using canvas.basically creating a canvas component which adds stickers or 3d objects to different frames of an image or video then converts the canvas (server side) to either a video or an audio gif: basically automat a gif with a canvas allow play and pause ,then add an audio file as a constraint to play and pause can you do a basic video on react with canvas thank you 😁 sensei😔🙏
Nice tutorial, I always enjoyed your tutorial...I will be so grateful if you can make a tutorial on user authenticate with social media in mern stack either graphql or restAPI
Thank you! Thats a good video idea!
u dont need to install node-sass ?
What if there is 100s of components? Then there will 100s of sass, css, css.map files how will we manage that?
One doubt that i still have is: Is it bad to use sass/scss with react ?
Crisp!
I love you my Friend
nice
I love code
why not use node-sass?
This video could have been, like, 50% shorter if the first half wasn't an unnecessary CSS tutorial. LIke, yeah, I know how to use CSS, I don't have to watch you write a couple dozen CSS properties before getting to the actual Sass part.
Make a video that involves configuration. Not everyone uses vsCode. Please ༎ຶ‿༎ຶ
Órale wey
rovery
Sass isn't a CSS framework, it is a CSS preprocessor!
Live SASS Compiler is outdated
Bad video, very outdated. file structure is bad and also everything except you main style sass file should have "_" before the first letter, that means its a partial and it wont be compiled. then when everything is merged into main sass file, only that one is compiled into css
S**ass** 😅😅