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