Внедрение css-спрайта с заполнением из файла png неуправляемых спрайтов

Question

CSS-новичок здесь. Меня попросили реализовать спрайт для меню, шесть вариантов в сетке 3 x 2, которые непосредственно смежны друг другу в файле .png. Каждый спрайт 20px на 20px (и весь файл, таким образом, 60px на 40px), но кнопка меню должна быть 28px на 28px, т. Е. С дополнением 4px.

Если я реализую это дополнение как-есть, то соседние спрайт-изображения будут отображаться в моем дополнении. Поэтому вместо этого я использую рамку, которая позволяет мне указать фактический цвет фона за пунктом меню и тем самым скрыть другие спрайты.

Вот попытка (с помощью SCSS):

$background-color: #fff; 
/* The background in question is actually a darker grey, 
but I'm using white for simplicity's sake. The real background color 
will be detected. */ 

.nav-home { 
    background-image: url('http://3.bp.blogspot.com/-z7fLYYhBwYk/VK08xu5q00I/AAAAAAAAIAg/_AR083a5biY/s1600/Screen%2BShot%2B2015-01-07%2Bat%2B15.03.31.png'); 
    width: 20px; 
    height: 20px; 
    background-repeat: no-repeat; 
    background-position: -40px -40px; //variable 
    padding: 0px; 
    border: 4px solid $background-color; // my de-facto padding 
    border-radius: 3px; // a radius that belongs to the actual border 
    &:hover{ 
    // ** padding? ** 
    border: 1px solid #e6e6e6; 
    //border-radius: 3px; //this is how my border needs to look if I could specify a padding color 
    } 
} 

(изображение я здесь только ради иллюстрации)

Поскольку я не знаю, как определить цвет фона прописью, я сделал де-факто дополнение, используя атрибут border. К сожалению, кнопка также должна иметь собственную границу, которая видна только при наведении. Мне нужно каким-то образом создать вторую границу? Или можно отменить разметку отдельно от самого изображения?

Сводный вопрос: это стандартная процедура, чтобы попросить дизайнера проложить исходный файл спрайта для меня? Или это общая проблема с хорошо проторенным решением?

Answer 1

Я бы рекомендовал использовать сгенерированный контент с помощью CSS. Затем вы можете установить размер, положение и фон этого сгенерированного элемента. В принципе, вы можете стилизовать его так же, как и любой другой элемент. Таким образом, вы можете эффективно «обрезать» часть спрайта, в котором вы нуждаетесь. В этом примере я использую :before

$background-color: #fff; 

.nav-home { 
    width: 28px; 
    height: 28px; 
    padding: 0px; 
    position: relative; 
    border-radius: 3px; // a radius that belongs to the actual border 
    border: 2px solid #0cf; 

    &:before { 
     background-image: url('http://3.bp.blogspot.com/-z7fLYYhBwYk/VK08xu5q00I/AAAAAAAAIAg/_AR083a5biY/s1600/Screen%2BShot%2B2015-01-07%2Bat%2B15.03.31.png'); 
     width: 20px; 
     height: 20px; 
     outline: 1px dotted #f0f; 
     content: ''; 
     display: block; 
     background-repeat: no-repeat; 
     background-position: -38px -38px; //variable 
     position: absolute; 
     top: 4px; 
     left: 4px; 
    } 
} 

http://codepen.io/goshdarnheck/pen/MwjZyR

Я добавил схему на :before элемента, чтобы понять, что это и где это.