Sass/Compass sprites

Question

안녕하세요 모든 스프라이트 파일 생성에 문제가 있습니다. 파일 끝에 새 파일을 추가하고 싶지만 나침반은 알파벳순으로 새 파일을 추가 한 다음 모든 위치가 변경되고 나침반을 사용하여 파일을 추가하는 방법 스프라이트 파일

on_sprite_saved do |filename| 
    if File.exists?(filename) 
    FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png') 
    end 
end 

on_stylesheet_saved do |filename| 
    if File.exists?(filename) 
    css = File.read filename 
    File.open(filename, 'w+') do |f| 
     f << css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png') 
    end 
    end 
end 

Answer 1

수동 배경 위치를 설정하지 마십시오

SASS

$sprite-spacing: 20px; 
$sprite-layout: horizontal; 
@import "sprite/*.png"; 
@include all-sprite-sprites; 

CONFIG의 끝에. Compass가 클래스를 생성하지 않고도 자동으로 그렇게 할 수 있습니다.

twitter.png

을 facebook.png

• 이미지/
  • 사회/
    • :

      말은 다음과 같은 스프라이트가

      SASS는 @ piouPiouM의 suggestoin에 따라 업데이트 :

      $social-sprite-dimensions: true 
      @import "social/*.png"; 
      
      #my-semantic-selector { 
          @include social-sprite(facebook); 
      } 
      
      #another .semantic > selector { 
          @include social-sprite(twitter); 
      } 
      

      이 다음 깨끗한 CSS 결과 :

      .social-sprite, #my-semantic-selector, #another .semantic > selector { 
          background: url('/images/social-sa75ff48010.png') no-repeat; 
      } 
      
      #my-semantic-selector { 
          background-position: 0 -50px; 
          width: 27px; 
          height: 25px; 
      } 
      
      #another .semantic > selector { 
          background-position: 0 -25px; 
          width: 27px; 
          height: 25px; 
      } 
      

      그것은 여러 스프라이트 컬렉션을 위해 할 수있는 더 보편적 인 믹스 인을 작성할 수 있습니다. Compass sprite helpers 및 sprite base이 필요합니다. 여러 스프라이트 콜렉션이 필요하고 예제가 필요하다면 주석에서 설명하십시오.