icons спрайт, что-то не так?

242

15 декабря 2016, 16:19

Проблема в том что я не могу сделать спрайт. В браузере стилей с этими классами ничего нет.

    <div class="icons">
        <a href="#" class="home"></a>
        <a href="#" class="mail"></a>
        <a href="#" class="folder"></a>
    </div>

css

        a {
        margin-left: 80px;
        background-image: url("../img/nav-sprite.png");
        background-position: 0 0;
        background-repeat: no-repeat;
        display: inline-block;
        width: 11px;
        height: 11px;
        .mail {background-position: -12px 0;}
        .folder {background-position: -24px 0;}
        &:first-child {
            margin-left: 60px;
        }

Вот картинка :

Answer 1

Что-то не так, скорее всего, в бездумной копипасте кода.

Если это CSS, для браузера он невалиден.

Если LESS, компилируется, если добавить закрывающую } как


a {
    margin-left: 80px;
    background-image: url("../img/nav-sprite.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    display: inline-block;
    width: 11px;
    height: 11px;
}
a:first-child {
    margin-left: 60px;
}
a .mail {
    background-position: -12px 0;
}
a .folder {
    background-position: -24px 0;
}

Как результат:

В браузере стилей с этими классами ничего нет

Answer 2

Спасибо но проблема была в стилях надо было вложить все стили в родителя

    .icons {
        float: left;
        .mail {
            background-position: -12px 0;
        }
        .folder {
            background-position: -24px 0;
        }
        a {
            margin-left: 80px;
            background-image: url("../img/nav-sprite.png");
            background-position: 0 0;
            background-repeat: no-repeat;
            display: inline-block;
            width: 11px;
            height: 11px;
            &:first-child {margin-left: 60px;}
        }
    }