.b {
  color: rgb(38, 127, 252);
}

.o1 {
  color: rgb(245, 55, 21);
}

.o2 {
  color: rgb(255, 187, 0);
}

.l {
  color: rgb(26, 180, 66);
}

&__img {
    display: inline-block;
    vertical-align: top;
    height: 64px;
    width: 64px;
    background-image: url(../img/sprite.png);

    &--1 {
        background-position-y: 1102px;
    }

    &--2 {
        background-position-y: -203px;
    }

.nav-icon-translate {
    background-position: 8px -2171px;
}

.nav-icon-youtube {
    background-position: -18px -2316px;
}

.nav-icon-search {
    background-position: 8px -1900px;
}

<div class="some-class">
    <div>
        <a class="link mail" href="#">Gmail</a>
    </div>
</div>

.some-class>div {
    display: inline-block;
}

<div class="app">
    <a href="#">
        <span class="iconApp photosIcon"></span>
        <span class="textApp">Photos</span>
    </a>
</div>
<br>
<br>
<br>
<hr>
<br>
<br>
<div class="app disable">
    <a href="#">
        <span class="iconApp"></span>
        <span class="textApp">Documents</span>
    </a>
</div>

<div class="app disable">
    <a href="#">
        <span class="iconApp" 
              style="background-position:0 -1449px"></span>
        <span class="textApp">Documents</span>
    </a>
</div>

<header class="header">
    <div class="container"></div>
</header>
<main class="main">
    <div class="container"></div>
</main>
<footer class="footer">
    <div class="container"></div>
</footer>

.container {
    max-width: 1200px;
    margin: 0 auto;
}

&_listMore {
    animation-name: google;
    animation-duration: 0.5s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
}