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
And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp
