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

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!
Dive into a comprehensive tutorial on Sass, the powerful CSS preprocessor. Learn the fundamentals of Sass, including variables, maps, nesting, functions, mixins, extending, and operations. Set up a Sass compiler in Visual Studio Code and explore the syntax and folder structure. Apply your knowledge to a real-world project by building a portfolio website from scratch, covering HTML structure, styling with Sass, and implementing responsive design. Master advanced techniques like creating custom mixins and functions for efficient styling. Conclude the learning experience by deploying the finished portfolio site to GitHub Pages, gaining practical skills in modern web development along the way.

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.