2014-10-29 1 views
0

Я использую компас для создания спрайта, который он отвлекает магически. Моя проблема в том, что когда я пытаюсь включить один png через div {@include folder-sprite(js);}, он включает весь спрайт-лист, как я могу это исправить? Любая помощь очень ценится, спасибо :)Compass mixin - folder-sprite (imagename) - печатает все изображения, когда это не должно

тока Неисправный Реализация:

sass 
    $icons-layout: horizontal; 
    @import "icons/*.png"; 
    div {@include icons-sprite(js);} 

    css 
    .icons-sprite, div { 
    background-image: url('../images/generated/icons-s119197eae9.png'); 
    background-repeat: no-repeat; } 

CSS-код должен загрузить спрайт-лист и автоматически использовать background-position, но это не

EDIT: compass config.rb

## 
## This file is only needed for Compass/Sass integration. If you are not using 
## Compass, you may safely ignore or delete this file. 
## 
## If you'd like to learn more about Sass and Compass, see the sass/README.txt 
## file for more information. 
## 

# Default to development if environment is not set. 
saved = environment 
if (environment.nil?) 
    environment = :development 
else 
    environment = saved 
end 

# Location of the theme's resources. 
css_dir = "css" 
sass_dir = "sass" 
images_dir = "images" 
generated_images_dir = images_dir + "/generated" 
javascripts_dir = "js" 

# Require any additional compass plugins installed on your system. 
require 'compass-normalize' 
require 'rgbapng' 
require 'toolkit' 
require 'breakpoint' 
require 'singularitygs' 
require 'susy' 
require 'sass-globbing' 

## 
## You probably don't need to edit anything below this. 
## 

# You can select your preferred output style here (:expanded, :nested, :compact 
# or :compressed). 
output_style = (environment == :production) ? :expanded : :nested 

# To enable relative paths to assets via compass helper functions. Since Drupal 
# themes can be installed in multiple locations, we don't need to worry about 
# the absolute path to the theme from the server omega. 
relative_assets = true 

# Output source maps in development mode. 
sass_options = (environment == :production) ? {} : {:sourcemap => true} 

ответ

0

W ell после прочтения сайта компаса x12/онлайн-уроков/просмотра спрайт-видео, я нашел свою ошибку, к сожалению, это так просто, что я бы хотел, чтобы я узнал это раньше, мое оправдание я все еще не знаю :) Решение: HTML должен иметь sprite name/sprite как класс, поскольку компас выводит этот класс. Что касается того, почему все изображения напечатаны, просто потому, что я не задал ширину/высоту для указанного класса, и весь спрайт был выведен. Медленно соединяя это вместе, живи и учись, спасибо за время :)

Смежные вопросы