LESS: lớp truy cập bên trong truy vấn phương tiện truyền thông như mixin

Question

Giả sử có một tuyên bố như thế này (đó là Bootstrap thực tế):

@media screen and (min-width: 768px) { 
    .navbar { 
    padding-top: 0; 
    } 
} 

Có thể truy cập .navbar bên trong truy vấn phương tiện truyền thông này (nó cũng có một tuyên bố outsides nó) như bất kỳ lớp học khác hoặc mixin? Tôi muốn tái sử dụng tờ khai của nó ở một nơi khác (tốt, không chính xác một điều này, nhưng bạn sẽ có được ý tưởng :-)), ví dụ .:

.left-nav { 
    .navbar; // Use the one from the media query here. 
} 

Đây có phải là có thể với LESS?

Tôi đã nhìn thấy very similar question, mặc dù sự khác biệt ở đây là tôi không thể refactor .navbar để ở bên ngoài truy vấn phương tiện vì đây là tệp LESS của Bootstrap. Tôi hiểu mũ LESS không quan tâm đến truy vấn phương tiện vì chúng chỉ là một loại bộ chọn khác; nhưng làm thế nào bạn có thể truy cập vào các khai báo bên trong các bộ chọn này (tôi đã thử một số những cái hiển nhiên nhưng không hoạt động).

Mọi trợ giúp sẽ được đánh giá cao.

Answer 1

Tôi không biết bất cứ cách nào mà bạn có thể trừ từ trong các @media chính nó, ví dụ:

này LESS

@media screen and (min-width: 768px) { 
    .navbar { 
    padding-top: 0; 
    } 
    .left-nav { 
    .navbar; // Use the one from the media query here. 
    } 
} 

.navbar { 
    padding: 20px; 
} 

Tạo CSS này

@media screen and (min-width: 768px) { 
    .navbar { 
    padding-top: 0; 
    } 
    .left-nav { 
    padding-top: 0; 
    } 
} 
.navbar { 
    padding: 20px; 
} 

Tôi công bằng y nhất định là không phải điều bạn muốn làm.

Tuy nhiên, tôi tin rằng vì @media không phải là một bộ chọn (nó là chuỗi truy vấn cho trình duyệt), sau đó không thể truy cập vào chính nó dưới dạng mixin hoặc không gian tên trong LESS và do đó nội dung của nó không thể tiếp cận theo cách bạn mong muốn.

Nếu tôi sai, tôi hy vọng ai đó đăng câu trả lời khác - nhưng tôi không mong đợi nó.

Answer 2

@media thực sự được hiểu là biến LESS khi sử dụng LESS. Nếu nó không được khai báo là bất cứ thứ gì thì nó sẽ không hoạt động, nhưng bạn có thể sử dụng nó như một biến LESS được đặt thành ý nghĩa CSS gốc với một chuỗi chữ, vì vậy biến LESS tôi có @media thiết lập như thế này :

@media: "@media"; 

sau đó tôi có thể sử dụng @media nhiều như tôi mong chờ với css bản xứ, ví dụ:

.random-widget { 
    height: 100px;  
    @media (min-width: @screen-sm) {   
     height: 300px; 
    } 
}