Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

freeCodeCamp

Sass Tutorial for Beginners - CSS With Superpowers

via freeCodeCamp

Overview

This course aims to teach learners the basics of Sass, a CSS preprocessor. By the end of the course, students will be able to set up a Sass compiler, work with variables, maps, nesting, functions, mixins, extending, and operations. The teaching method includes hands-on practice on a real-world project (Portfolio website) using Sass. The course is designed for beginners interested in enhancing their CSS skills with Sass.

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

Reviews

5.0 rating, based on 1 Class Central review

Start your review of Sass Tutorial for Beginners - CSS With Superpowers

  • Profile image for Arsenio Ambayec
    Arsenio Ambayec
    I have fun doing sass tutorial. I love the video and it really hooks me to do the scss style of web designing. As someone who has been using CSS for a while, I was curious about learning SCSS and decided to give a video tutorial a try. I found a gre…

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.