Why do you use SASS?

To improve the organization, readability, and maintainability of CSS code. Main reasons:

• Variables: Allow storing values (colors, fonts, sizes) in one place and reuse.
• Nesting: Allows structuring CSS rules, mimicking the DOM structure.
• Mixins: Enable reusing blocks of CSS code.
• Functions: Allow performing complex calculations and operations with values.
• Import (@import): Allows splitting code into small, manageable files.
• Conditional operators and loops: Enable creating more flexible and dynamic styles.

Example of using variables:

$primary-color: #007bff;

body {
  color: $primary-color;
}

Example of using nesting:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: inline-block;
    }
  }
}

Example of using a mixin:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box {
  @include border-radius(10px);
}