10. What is SCSS and what are its main features?

SCSS (Sassy CSS) is a CSS preprocessor that allows for the use of more advanced features than standard CSS. The main features of SCSS include:

• Variables: allow storing values (e.g., colors, sizes) and using them throughout the stylesheet.
• Nested selectors: enable nesting selectors in a way that mirrors the HTML structure, improving code readability.
• Mixins: allow creating reusable chunks of code.
• Inheritance: enables inheriting styles from one selector to another.
• File imports: allow splitting code into smaller, more manageable files.

/* Examples */
$primary-color: #333; /* Variable */

body {
    font: 100% $primary-color; /* Using variable */
}

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

        li {
            display: inline-block;

            a {
                text-decoration: none;
            }
        }
    }
}

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

.box {
    @include border-radius(10px); /* Using mixin */
}