CSS: Variables

Question 1

What are CSS Custom Properties? (CSS Variables)

Answer 1

CSS custom properties, also known as CSS variables, are entities defined by CSS authors that contain specific values to be reused throughout a document. They are a powerful feature that allows for more efficient, maintainable, and flexible stylesheets. Custom properties are particularly useful in creating themeable designs. You can define a set of properties for different themes:
:root {
–bg-color: white;
–text-color: black;
}

.dark-theme {
–bg-color: #333;
–text-color: white;
}

body {
background-color: var(–bg-color);
color: var(–text-color);
}

Question 2

What is the “@property” Rule?

Answer 2

The @property rule is a powerful CSS feature that allows developers to define custom properties with greater control over their behavior, including how they animate and their initial values.
@property –property-name {
syntax: ‘<type>';
inherits: true | false;
initial-value: <value>;
}</value></type>

Question 3

What is “–property-name” in the @property Rule?

Answer 3

This is the name of the custom property you’re defining. Like all custom properties, it must start with two dashes. –property-name can be things like <color>, <length>, <number>, <percentage>, or more complex types.</percentage></number></length></color>

Question 4

What is the “syntax” in the @property Rule?

Answer 4

This defines the type of the property.

Question 5

What is the “inherits” in the @property Rule?

Answer 5

This specifies whether the property should inherit its value from its parent element.

Question 6

What is the “initial-value” in the @property Rule?

Answer 6

This sets the default value of the property.

Question 7

Gradient Example using the @property Rule

Answer 7

This example creates a gradient that smoothly animates when the element is hovered over.

<div></div>

@property –gradient-angle {
syntax: “<angle>";
inherits: false;
initial-value: 0deg;
}</angle>

.gradient-box {
width: 100px;
height: 100px;
background: linear-gradient(var(–gradient-angle), red, blue);
transition: –gradient-angle 0.5s;
}

.gradient-box:hover {
–gradient-angle: 90deg;
}