Sass Tutorial for Beginners - CSS With Superpowers

Channel:
United States freeCodeCamp.org
Subscribers:
10,700,000
Published on ● Video Link: https://www.youtube.com/watch?v=_a5j7KoflTs


Duration: 2:02:58
788,109 views
17,993

In this course, you will learn the basics of Sass. We will start with a brief overview of what Sass is along with what is required to incorporate Sass into your environment. We will also set up a Sass compiler in Visual Studio Code. You will learn about Sass variables, maps, nesting, functions, mixins, extending, and operations.

Lastly, we will start from scratch on a real-world project (Portfolio website) using Sass. We will go step-by-step through each part, and at the end, we will deploy the site.

🔗 Project Code: https://github.com/codeSTACKr/portfolio-sass

🎥 Tutorial from codeSTACKr. Check out their YouTube Channel: https://www.youtube.com/codeSTACKr

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:00:58) What Is Sass?
⌨️ (0:01:24) Requirements
⌨️ (0:02:15) Install/Setup Live Sass Compiler VS Code Extension
⌨️ (0:04:02) Folder Structure / Sass Syntax
⌨️ (0:08:06) Variables
⌨️ (0:10:03) Maps
⌨️ (0:03:00) Nesting
⌨️ (0:16:54) Partials
⌨️ (0:19:40) Functions
⌨️ (0:21:30) Mixin Example 1
⌨️ (0:24:26) Mixin Example 2
⌨️ (0:28:00) Mixin Example 3
⌨️ (0:30:20) Extend
⌨️ (0:32:05) Math Operations
⌨️ (0:33:49) How to Learn More (Documentation)

⌨️ (0:34:02) Real-World Example From Scratch (Portfolio Site)
⌨️ (0:34:38) index.html
⌨️ (0:40:35) Font Awesome Setup
⌨️ (0:41:29) main.scss / _config.scss
⌨️ (0:48:18) _home.scss
⌨️ (0:52:55) Transition Ease Mixin
⌨️ (0:54:24) Text Color Function
⌨️ (0:57:10) _menu.scss
⌨️ (1:02:38) main.js
⌨️ (1:06:08) Menu cont.
⌨️ (1:19:38) about.html
⌨️ (1:23:51) _about.scss
⌨️ (1:30:37) projects.html
⌨️ (1:35:05) _projects.scss
⌨️ (1:43:57) contact.html
⌨️ (1:47:09) _contact.scss
⌨️ (1:49:56) _responsive.scss
⌨️ (2:01:35) Deploy on Github Pages

✔️ codeSTACKr on Twitter: https://twitter.com/codeSTACKr
✔️ codeSTACKr on Instagram: https://instagram.com/codeSTACKr
✔️ codeSTACKr website: http://codeSTACKr.com

--

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://medium.freecodecamp.org



Other Videos By freeCodeCamp.org


2019-10-22Pygame Tutorial for Beginners - Python Game Development Course
2019-10-16CSS Tutorial - Zero to Hero (Complete Course)
2019-10-14Learn Bootstrap by creating a custom admin theme - Intermediate Tutorial
2019-10-09Algorithms Course - Graph Theory Tutorial from a Google Engineer
2019-10-07Build 5 Dapps on the Ethereum Blockchain - Beginner Tutorial
2019-10-03Netlify Tutorial - How to build and deploy websites using Netlify
2019-10-01React and APIs - Full Tutorial - Hacker News API Application
2019-09-26TensorFlow 2.0 Crash Course
2019-09-19Data Structures Easy to Advanced Course - Full Tutorial from a Google Engineer
2019-09-18Introduction To Responsive Web Design - HTML & CSS Tutorial
2019-09-09Sass Tutorial for Beginners - CSS With Superpowers
2019-09-06CEO can code? Watch Netlify's CEO code a Sudoku app from scratch in a bar on a Saturday night
2019-09-04How to start a coding YouTube channel (with tips from a bunch of successful creators!)
2019-09-03Spring Boot Tutorial for Beginners (Java Framework)
2019-08-29jamovi for Data Analysis - Full Tutorial
2019-08-27Intermediate React Tutorial - Todoist Clone (with Firebase, Custom Hooks, SCSS, React Testing)
2019-08-21Scratch Tutorial for Beginners - Make a Flappy Bird Game
2019-08-19How to Build an E-commerce Website with Django and Python
2019-08-16Docker Tutorial for Beginners - A Full DevOps Course on How to Run Applications in Containers
2019-08-14How to Build Tetris in React - GameDev Tutorial (with React Hooks!)
2019-08-13Learn Angular Material - Full Tutorial


Tags:
learn sass
learn sass css
learn scss
sass tutorial
scss tutorial
how to install sass
visual studio code sass
visual studio code scss
visual studio code
free sass tutorials
scss tutorial for beginners
how to install sass css
free sass course
Learn Sass In 20 Minutes
sass in 20 minutes
sass course
sass compiler