2013-11-18 3 views
0

Моей главной цели, чтобы добавить к этому компасу встроенного Mixin sprite-position:Как продлить библиотеку дерзости/компас

@mixin sprite-position($col, $row: 1, $width: $sprite-image-default-width, $height: $sprite-image-default-height, $margin: $sprite-default-margin) { 
    $x: ($col - 1) * -$width - ($col - 1) * $margin; 
    $y: ($row - 1) * -$height - ($row - 1) * $margin; 
    background-position: $x $y; 
} 

и добавить эту сетчатку подмешать sprite-position-retina:

@mixin sprite-position-retina($col, $row: 1, $width: $sprite-image-default-width, $height: $sprite-image-default-height, $margin: $sprite-default-margin) { 
    ... 
    background-position: $x/2 $y/2; 
} 

В конце концов я хочу заменить эту строку кода в моем файле (эта строка работает):

background-position: sprite-position($sprites2x, $name); 

С th является линия (эта линия не работает):

background-position: sprite-position-retina($sprites2x, $name); 

Проблема заключается в том, что она даже не признает sprite-position-retina объявления смешивания и если добавить @include к этой линии, он не признает какой-либо переменные и константы (как если параметр я передаю не являются правильными)

мои вопросы:

  1. Где я должен добавить мой новый подмешать? (Добавление его во встроенный файл _sprite-img.scss кажется неправильной практикой, потому что я не хочу менять внутренние файлы компаса). Добавление его в мои файлы, похоже, не заставляет его работать.
  2. Почему это не работает? Как я могу заставить его работать?

Проект построен с хрюкать/дачу/лет и т.д ..

ответ

0

Я нашел хороший способ решения проблемы:

Я использую это простые подмешать, чтобы получить новую позицию спрайта:

/* Converts sprite position to half of its original size (since we're 'squizing' the retina image by 2)*/ 
@mixin sprite-position-retina($spriteUrl, $name) { 
    $spriteData: sprite-position($spriteUrl, $name); 
    $x: nth($spriteData,1)/2; 
    $y: nth($spriteData,2)/2; 
    background-position: $x $y; 
} 
Смежные вопросы