What are Sass variables?

SASS (Syntactically Awesome Style Sheets) is a CSS pre-processor that allows you to use variables, functions, and other programming constructs in your CSS. Variables in SASS are used to store values that can be reused throughout the stylesheet, making it easier to maintain and update your CSS.

To declare a variable in SASS, you use the $ symbol followed by the variable name. For example, to declare a variable for the primary color of your website, you would write:

$primary-color: #ff0000;

You can then use the variable throughout your stylesheet by referencing its name. For example, to set the background color of the body element to the value of the $primary-color variable, you would write:

body {
    background-color: $primary-color;
}

You can also use variables to store other values such as lengths, numbers, and even lists of values. For example, you could create a variable for the base font size of your website:

$base-font-size: 16px;

And then use it to set the font size for different elements:

h1 {
    font-size: $base-font-size * 2;
}

p {
    font-size: $base-font-size;
}

It's also possible to use variables as default values for other variables.

$default-color: #ff0000;
$primary-color: $default-color;
$secondary-color: #0000ff;

SASS variables can be very useful for making your CSS more maintainable, especially when you're working on a large project. By using variables, you can centralize the definition of colors, font sizes, and other values, so that you only have to update them in one place if they need to change.