Learn Sass
StartWhy Learn Sass?
Sass is an easy-to-use styling language that helps reduce a lot of the repetition and maintainability challenges of traditional CSS. Learning Sass will not only let you scale styles when working on big web development projects, it will also make it much faster and more efficient to write reusable styles from scratch for smaller projects.
Take-Away Skills:
This course will teach you how to use nesting, variables, mixins, placeholders, and functions to write more expressive and reusable styles. At the end of the course, you will be able to transition a CSS codebase to SCSS and style multiple websites.
Note on Prerequisites:
We recommend you complete Learn CSS, particularly the basics of working with CSS selectors and visual rules, before taking this course.
What you'll learn
- 1Style your own lemonade stand’s website by compiling Sass and learning to use variables and nested selectors.
- 2Learn how to use mixins and the & selector to create an interactive index card that flips when you hover.
- 3Learn to use Sass functions, loops, and conditions to style different components of a webpage.
- 4Learn about the best Sass practices such as partial files, placeholders and @import.
What you'll create
Portfolio projects that showcase your new skills
Refactor CSS to SCSS
Transition a CSS codebase to embrace clean and organized SCSS.
Sassy Parallax Banner
It's time to build fluency in a CSS preprocessor. In this next Pro Project, we're going to practice parallax scrolling in Sass so you can hone your skills and feel confident taking them to the real world. Why? Parallax scrolling is a popular method used on many landing pages to give them a professional feel. What's next? A travel agency, a stylish banner, more Sass. You got this!
Sass Bar Chart
It's time to build fluency in a CSS preprocessor. In this next Pro Project, we're going to practice charts in Sass so you can hone your skills and feel confident taking them to the real world. Why? Sass is a powerful tool that allows you to build awesome visualizations with pure styling. What's next? Top 10 produce, charts without code, more Sass. You got this!
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory
— Madelyn, Pinterest“I know from first-hand experience that you can go in knowing zero, nothing, and just get a grasp on everything as you go and start building right away.”