SCSS Variables

Using variables to build clean, reusable CSS components.

Create a Button Using SCSS Variables

Variables make styling reusable, maintainable, and easier to update. Here’s how you can build a button using SCSS variables.

SCSS Code:

$primary: #0077ff;
$hover: #005fcc;
$padding: 14px 22px;
$radius: 8px;
$font-size: 16px;

.button {
  background: $primary;
  padding: $padding;
  border-radius: $radius;
  color: white;
  border: none;
  font-size: $font-size;
  cursor: pointer;
  transition: 0.3s;

  &:hover {
    background: $hover;
  }
}

Output:

Why Use Variables?