Variables in SCSS allow you to assign an identifier of your choice to a specific value.

Why is that useful? Unlike in CSS, if you need to tweak a value, you’ll only have to update it in one place and the change will be reflected in multiple rules.

In Sass, $ is used to define and reference a variable:

$translucent-white: rgba(255,255,255,0.3);

Note: It’s important to stick to one naming convention for variables when you first build out your codebase. This will help you reference them easily in the future.



At the top of main.scss, create a new variable:

$translucent-white: rgba(255,255,255,0.3);

Reference that variable as the value for the background-color property inside the .slogan selector:

background-color: $translucent-white;

Click “Run” to see your changes in the browser and inspect the output in main.css.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?