Скачать или смотреть Part 2 - React Redux Tutorial 2025: Install Sass with CSS (@include, @mixin, nesting)

Learn to install #Sass a #CSS Preprocessor to expand the capabilities of CSS, #@include, #@mixin, #nesting to build React CRUD Application. We use Sass to create global variables that we can reuse in various stylesheets in our project. We will demonstrate how to create a variables file and how to install the Live CSS Compiler to watch for updates to the #SCSS file. This is part of a series were we will build a React Redux CRUD Application.

If you are on a journey to learn SCSS and use it to create a React project this is a great tutorial.

What I cover:

00:00 - Intro
00:09 - Overview
01:18 - CSS Framework options
01:41 - CSS Custom Properties explanation
02:29 - What is Sass?
02:53 - Sass Rich features
02:15 - Install Sass into a Vite project
03:32 - Install Sass into a Vite project
05:27 - How to create a Sass variable
08:01 - Define accent colors using Canva
11:22 - Install "Live Sass Compiler" in VSC extensions
11:54 - Watch Sass - CSS Mapping explanation
17:04 - Why use REM, not Pixels
18:41 - @mixin (Sass feature)
21:33 - @include (Sass feature)
23:36 - nesting (Sass Features
28:11 - Outro

******************
Share this video:    • Part 2 - React Redux Tutorial 2025: Instal...  
******************

Welcome Source Coders!

Source Coder Hub is a resource and knowledge base that includes tutorials, insights, and tips. It’s a hub where coders can come together and collaborate. If you are interested in learning modern front-end coding technologies such HTML, CSS, JavaScript, SASS, ReactJS, Redux Toolkit, NodeJs, Express, Algorithms, Recursive, Interviewing Tips, and more please visit frequently for links to tutorials as well as other resources that you will find useful in your coding journey.

January 2023 kicked the start of a series of beginner YouTube tutorials that follow my process for creating a Front-End React Redux project.

Check out all my YouTube videos:

React Tutorials series playlist:
   • React for Beginners: A Step-by-Step Guide ...  

Redux Tutorials series playlist:
   • Redux Toolkit Essentials: A Comprehensive ...  

GitHub series playlist:
   • GitHub  

Quick Tip series:

*Use Blur Feature in YouTube Studio to Blur Text or Hide Personal Info - Quick Tip (hidden gem found) (   • Use Blur Feature in YouTube Studio to Blur...  )

If you want to be the first to know, connect to THE HUB! Source Coder Hub’s newsletter. Together let’s share knowledge, code, and community! There's much more coming, so please subscribe to my channel AND become a member of "The Hub" (https://forms.gle/o1R1QzH8mk3xL4eNA) so that you can stay on track!


Cheers!

Source Coder Hub

_________________________
Connect to the "The Hub"

Website: https://sourcecoderhub.com
Membership: https://forms.gle/o1R1QzH8mk3xL4eNA
YouTube:    / @sourcecoderhub  
Facebook:   / sourcecoderhub  
X/Twitter: https://www.x.com/sourcecoderhub
Instagram:   / sourcecoderhub  
Support: https://buymeacoffee.com/sourcecoderhub

Acknowledgements:

Video production by: https://www.expansivedesigns.com

#SourceCoderHub, #CodingResources, #CodingTutorials, #FrontendDevelopment, #HTML, #CSS, #JavaScript, #SASS, #ReactJS, #ReduxToolkit, #NodeJS, #ExpressJS, #Algorithms, #Recursion, #InterviewTips, #WebDevelopment, #LearnToCode, #CodingJourney, #ProgrammingInsights, #CoderCollaboration, #reactredux, #useparams, #usedispatch, #react, #reduxtoolkit, #reactjs, #jsx, #coding, #programming, #reacthooks, #reactrouter, #statementmanagement, #dynamicrouting, #reduxactions, #reduxstore, #reactstatemanagement, #immerlibrary