React and Sass Tutorial - Intro to SASS
HTML-код
- Опубликовано: 8 сен 2024
- Hey guys in this video I will show you how to configure and setup sass in a React environment. Then I will show you the fundamental features existing in the framework and how to do cool stuff like using variables and functions inside your style sheets.
-
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/l...
💻 PedroTech Discord: / discord
-
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Twitter: / pedrotech_
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/mac...
Email: machadop1407@gmail.com
Equipments I Use:
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
🌟 Algorithm Book To Pass Coding Interviews: amzn.to/2Z2CirS
🌟 Microphone: amzn.to/2MKAm4V
🌟 Keyboard: amzn.to/3tvU6ZR
🌟 HD Webcam: amzn.to/3tMpJPD
🌟 Room LED Lights: amzn.to/3a5mFGp
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
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
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!
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
Best explanation of react and sass configuration I’ve seen
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!!
OMG, I'm obsessed with your channel. You deserve way more subscribers. 😍
Hahaha thank you! Appreciate the support!
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!
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 !
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!
Once again, a masterpiece from Pedro Tech
Excellent video. Thank you for your time
You have explained perfect! Thak's!
I promise this is a beautiful tutorial, every part was explained clearly. Thank you.
Live SASS does not support the @use and @forward. SASS is moving away from the @import. Maybe you could redo this video.
Hope so 😪
Pedro, estás salvando mi carrera, te amo!! ❤️
aweaome..you make sass easy and clear..
Glad to hear that!
Thanks a lot for the video Pedro!! Hoping more Sass tutorials from you
Very insightful.
looking forward to advance sass tuitorial brother!
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.
Would appreciate seeing ya make a whole website on sass :)
Great tutorial thank you so much!! 10000x times better than my course :)
Your channel is a gem! I just wanna thank you🙏
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.
You saved me. ❤️
Very good explanation. Thank you!
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
here we go again...thank you bro..
Always welcome!
Yes , nice Pedro , keep up the good work!
Thanks a lot!
Thank you very match bro!
Thanks for the video
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.
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
Hey can you make one small example with HOC and React Router together?
Thanks
would be great
Great tutorial! Thank you very much!
helpful video thanks
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.
Thank you bro ♥👍
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...!!!!!
I have the sass compiler and the sass extensions. however when I save iit the not create the css files with the compiled scss.
Well done my dear friend👍
Kindly help teach us how to use sass and react full tutorial.
Thanks
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!
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😂
hey pedro can you make a cms tutorial or a advanced javascript tutorial because im struggling to learn it. Love your work.
Great video, thanks Pedro
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.
شكرا لك ، قناتك جدً مفيدة
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!
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😔🙏
Crisp!
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?
Thank you 👍🏼
nice
I love code
thanks man🔥❤️
What if there is 100s of components? Then there will 100s of sass, css, css.map files how will we manage that?
Thank you
One doubt that i still have is: Is it bad to use sass/scss with react ?
u dont need to install node-sass ?
I love you my Friend
why not use node-sass?
Make a video that involves configuration. Not everyone uses vsCode. Please ༎ຶ‿༎ຶ
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.
rovery
Órale wey
Live SASS Compiler is outdated
Sass isn't a CSS framework, it is a CSS preprocessor!
S**ass** 😅😅
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