SCSS mở rộng một selector lồng nhau và ghi đè lên rulesets lồng nhau

Question

Ok vì vậy tôi có một placeholder với một chọn lồng nhau:

%block { 
    .title { 
    font-size:12px; 
    } 
} 

Tôi muốn mở rộng nó và thêm vào các lớp .title:

.superblock { 
    @extend %block; 
    .title { 
    font-weight:bold; 
    } 
} 

Câu trả lời tôi MUỐN là:

.superblock .title { 
    font-size: 12px; 
    font-weight: bold; } 

Tuy nhiên, câu trả lời tôi nhận được là:

.superblock .title { 
    font-size: 12px; } 

.superblock .title { 
    font-weight: bold; } 

Tôi có làm gì sai hoặc đây có phải là cách hoạt động không? Để làm rõ tôi muốn hợp nhất nó. Nếu tôi thêm nội dung nào đó trực tiếp vào trong số .superblock và thêm giống như một số khác .superblock2 cũng mở rộng% khối mà chúng hợp nhất mà không gặp bất kỳ sự cố nào.

Answer 1

Sass không có chức năng "hợp nhất" các công cụ chọn trùng lặp. Bạn sẽ cần phải tìm một tiện ích khác để làm điều này sau khi CSS đã được biên dịch.

Chỉ thị @extend không chỉ là cách sử dụng các lớp thay vì mixin (tương tự như các cuộc gọi mixin kiểu LESS). Tại sao @extend công trình theo cách nó trở nên rõ ràng khi bạn đang mở rộng các lớp học bình thường thay vì mở rộng các lớp:

.block { 
    font-size:12px; 
} 

.foo { 
    @extend .block; 
    font-weight: bold; 
} 

Output:

.block, .foo { 
    font-size: 12px; 
} 

.foo { 
    font-weight: bold; 
} 

Sử dụng một lớp mở rộng chỉ ngăn chặn sự phát xạ của tên lớp gốc .

Bây giờ bạn đã thấy lý do tại sao @extend hoạt động theo cách của nó, bạn vẫn muốn những gì cung cấp @extend? Nếu câu trả lời là không, thì bạn cần phải sử dụng một mixin:

@mixin block { 
    // styles 
    .title { 
     font-size: 12px; 
     @content; 
    } 
} 

.superblock { 
    @include block { 
     font-weight: bold; 
    } 
} 

Output:

.superblock .title { 
    font-size: 12px; 
    font-weight: bold; 
} 

Answer 2

Đây là khá nhiều đó. SASS tạo riêng các khai báo mở rộng.

Và nó không có chức năng nhóm các khai báo theo bộ chọn, nó không phải là thông minh.

Nhưng bạn không cần phải lo lắng nhiều về độ sạch CSS. Các máy chủ web hiện đại phục vụ CSS gzipped, tất cả các bản sao sẽ được nén độc đáo.

Answer 3

Bạn có thể sử dụng một công cụ, tôi đã sử dụng nó để làm sạch css https://github.com/addyosmani/grunt-uncss

"Một nhiệm vụ grunt để loại bỏ CSS không sử dụng từ các dự án của bạn với UnCSS."

Answer 4

LESS có thể làm điều đó. Tuy nhiên, bạn sẽ viết:

.superblock { 
    .title { 
    .block .title; 
    } 
} 

Không chắc chắn nếu nó hoạt động với @extend quá.