SCSS example

by arohy

SCSS

/* применение переменных */
$link-color: red;

.link{
    color: $link-color;
}

/* что скомипилируется в */
.link{
    color: red;
}

/* так же возможны переменные которые хранят строки */
$link-color-hover: #{'{{ settings.main-font-color }}'};

/*
допустим, что в настройках темы в данное поле сохранен цвет #ECECEC
тогда следующий пример
*/

.link:hover{
    color: $link-color-hover;
}

// скомпилируется в
.link:hover{
    color: #ECECEC;
}

/*
Важной частью препроцессора SCSS являются вложения
*/

.menu{
    color: $link-color;
    
    /*
    простое вложение
    */
    .link{
        color: $link
        
        /*
        более сложное вложение
        & - символ родительского селектора, он указывает препроцессору,
        что необходимо пройтись по селекторам, в который вставлены данные стили и заменить ими этот символ
        */
        &:hover{
            color: $link-color-hover;
        }
    }
}

/* что скомпилируется в */
.menu{
    color: red;
}

/* так выглядит результат вложения после компиляции */
.menu .link{
    color: red;
}

/* как раз здесь мы видим, что & был заменен на цепочку .menu .link */
.menu .link:hover{
    color: #ECECEC;
}