Андрей Б.

evgemiil Если я вас правильно понял.
Добавьте к .rating_i vertical-align: middle;

В ошибке ведь все написано
Error: File to import not found or unreadable - Файл для импорта не найден
И файл со строчкой указаны - on line 3 of assets/scss/app.scss

Исправьте './partials/base' на '../partials/base'

Ответ тут: https://habrahabr.ru/post/166435/ и как дополнение к пониманию https://habrahabr.ru/post/225721/

codepen.io/anon/pen/qaympZ

С такой структурой проще всего включать горизонтальную прокрутку на моб. устройствах.
Пример v4-alpha.getbootstrap.com/content/tables/#responsi...
Тут еще разные примеры https://elvery.net/demo/responsive-tables/

Вам нужно подняться на уровень выше в пути к изображению.
Путь должен быть таким
url('../img/stance.png')
То есть вы сначала выходите из папки css (../) далее заходите в папку img (img/) и в ней ищите нужный файл

Так чоли?

Как уже ответили - БЭМ, достаточно только принципа именования. Или вот еще один из способов rscss.io
Когда собираешь страницу нужно мыслить компонентами и стараться чтобы стили компонентов не пересекались.

Тут без скриптов не обойтись к сожалению.

// jquery
$(".catalog-item").hover(function(){
    $(this).closest('.slick-list').toggleClass('slider-hover');
});

//css
.catalog-slider .slider-hover {
    z-index: 1;
}

Или так:

$(".catalog-item").hover(
    function(){      
        $(this).closest('.slick-list').css('z-index', 1)
    },function(){   
        $(this).closest('.slick-list').css('z-index', 0)  
});

stackoverflow.com/questions/36133715/google-chrome...

один из способов https://jsfiddle.net/r1wtjrys/