tránh trùng lặp bằng cách sử dụng bộ chọn giữ chỗ trong Sass 3.2

Question

Vấn đề là mã Sass của tôi đang tạo các khai báo trùng lặp trong tệp CSS đã biên dịch. Mã của tôi Sass được tổ chức ở nhiều partials, và tôi @import chúng thành một tập tin screen.scss thức

Tôi có một _placeholders.scss chứa %alignright và %alignleft. Tôi có tệp _content.scss sử dụng các tệp này, vì vậy, tôi @import "_placeholder.scss" ở đầu tệp đó và tôi cũng làm như vậy trong _footer.scss. Vì vậy, tôi đoán @import "_placeholders.scss" ở 2 nơi đang gây ra sự trùng lặp?

Nếu tôi chỉ @import "_placeholders.scss" vào đầu số screen.scss để làm cho chúng có thể truy cập được trên toàn cầu, thì nó sẽ gây rối với thứ tự của các khai báo CSS. Bộ chọn CSS đầu tiên để sử dụng bộ chọn giữ chỗ sẽ được chèn theo thứ tự mà tôi @import "_placeholders.scss", thay vì vị trí của tôi @import "_conntent.scss".

Ví dụ, trong screen.scss:

@import "placeholders"; 
@import "reset"; 
@import "typography" 
@import "content" // uses placeholder %alignleft 
@import "footer" // uses placeholder alignleft 

tạo CSS:

/* Content styles that use placeholders */ 
/* reset styles */ 
/* typography styles */ 
/* expected order of content styles */ 
/* footer styles */ 

Làm thế nào để tránh trùng lặp và có được phong cách được đầu ra trong đúng vị trí trong CSS biên soạn?

Answer 1

Đây là nơi bạn cần phải @include a @mixin thay vì @extending trình giữ chỗ.

// in _placeholders.scss 

@mixin alignleft { 
    text-align: left; 
} 

// in _content.scss 

div.whatever { 
    @include alignleft; 
} 

// in _footer.scss 

div.whatever-footer { 
    @include alignleft; 
}