10. Co to jest SCSS i jakie są jego główne cechy?

SCSS (Sassy CSS) to preprocesor CSS, który umożliwia użycie bardziej zaawansowanych funkcji niż standardowy CSS. Główne cechy SCSS obejmują:

• Zmienne: umożliwiają przechowywanie wartości (np. kolorów, rozmiarów) i używanie ich w całym arkuszu stylów.
• Zagnieżdżone selektory: pozwalają na zagnieżdżanie selektorów w sposób podobny do struktury HTML, co poprawia czytelność kodu.
• Miksiny (mixins): umożliwiają tworzenie wielokrotnie używalnych fragmentów kodu.
• Dziedziczenie: umożliwia dziedziczenie stylów z jednego selektora do innego.
• Importowanie plików: pozwala na dzielenie kodu na mniejsze, bardziej zarządzalne pliki.

/* Przykłady */
$primary-color: #333; /* Zmienna */

body {
    font: 100% $primary-color; /* Użycie zmiennej */
}

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); /* Użycie mixin */
}