Sử dụng cùng một chữ cái La bàn trong các bảng kiểu khác nhau

Question

Tôi đang sử dụng La bàn để tạo các CSS sprites.

Tôi đã tìm ra cách để xác định một sprite một lần và sử dụng nó trên các tệp .scss khác nhau, nhưng tôi không chắc đây là giải pháp phù hợp.

Cách tốt nhất tôi có thể tìm cho đến bây giờ là:

• tạo ra một tập tin _variables.scss phần
• xác định sprite bên trong _variables.scss tập tin phần
• nhập _variables.scss một phần trong mỗi tập tin .scss

Ví dụ

tập

_variables.scss:

$siteSprite-spacing: 20px; 
@import "siteSprite/*.png"; 

firstPage.scss file:

@import "../variables.scss"; 

.close { 
    @include siteSprite-sprite(close, true); 
} 

secondPage.scss file:

@import "../variables.scss"; 

.viewMore { 
    @include siteSprite-sprite(arrow, true); 
} 

Và làm việc này, nhưng ...

vấn đề là mỗi khi Compass biên dịch các tệp scss (firstPage.scss, secondPage.scss) nó đọc phần _variables.scss và sau đó đọc tất cả các hình ảnh, cố gắng tạo ra sprite mỗi lần.

Kết quả là quá trình biên dịch kết thúc trong này:

create generated_images/siteSprite-s526a535d08.png 
unchanged generated_images/siteSprite-s526a535d08.png 
    create css/firstPage.css 
unchanged generated_images/siteSprite-s526a535d08.png 
    create css/secondPage.css 
unchanged generated_images/siteSprite-s526a535d08.png 
    create css/thirdPage.css 
unchanged generated_images/siteSprite-s526a535d08.png 

Và điều này là cực kỳ chậm, bởi vì tôi có nhiều trang và nhiều file bên trong thư mục hình ảnh siteSprite.

Làm cách nào để tránh sự cố này?

Answer 1

Tôi sẽ giải thích cách tôi sử dụng sprites la bàn và hy vọng điều này cũng sẽ hữu ích cho bạn. Tôi thường tạo một tập tin một phần _base.scss, trong đó tôi đặt toàn bộ @ import và @ include cùng với bất kỳ mã css chung nào cho dự án của tôi. Trong _base.scss Tôi cũng thêm sprites cụ thể mã sau (giả định rằng các thư mục, nơi tôi giữ biểu tượng của tôi, được gọi là "biểu tượng" và rằng các biểu tượng của tôi có phần mở rộng .png):

@import "compass/utilities/sprites"; 
@import "icon/*.png"; 
@include all-icon-sprites; 

này _base.scss là tệp đầu tiên tôi nhập vào bất kỳ tệp * .css.scss nào (tương đương với "firstPage.scss" và "firstPage.scss") của dự án của tôi.

Bây giờ, sử dụng bất kỳ các sprites bên trong một div, tôi chỉ làm điều này:

#my_id (or .my_class) { 
    @extend .icon-myicon; 
} 

nơi "myicon" là tên của một file .png bên trong thư mục "biểu tượng".

Điều này compass tutorial thực sự rất hữu ích, vì vậy bạn có thể muốn xem.

Nếu bạn lo lắng rằng một số tệp có thể bị nhập nhiều lần, bạn có thể thử sử dụng plugin compass-import-once.