freeCodeCamp
Free Online Course
English
2-3 hours worth of material
selfpaced
Overview
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.
Syllabus
Intro.
What Is Sass?.
Requirements.
Install/Setup Live Sass Compiler VS Code Extension.
Folder Structure / Sass Syntax.
Variables.
Maps.
Nesting.
Partials.
Functions.
Mixin Example 1.
Mixin Example 2.
Mixin Example 3.
Extend.
Math Operations.
How to Learn More (Documentation).
Real-World Example From Scratch (Portfolio Site).
index.html.
Font Awesome Setup.
main.scss / _config.scss.
_home.scss.
Transition Ease Mixin.
Text Color Function.
_menu.scss.
main.js.
Menu cont..
about.html.
_about.scss.
projects.html.
_projects.scss.
contact.html.
_contact.scss.
_responsive.scss.
Deploy on Github Pages.
Taught by
freeCodeCamp.org
