Bootstrap4：訪問變量？

Question

我從Bootstrap 3切換到Bootstrap 4.我使用的是我在運行時編譯的sass源文件。當我改變了圖書館，我開始的錯誤在我的媒體交換機，即對於

@media screen and (min-width: $screen-md-min) { 
    padding: 40px 50px; 
} 

我得到錯誤 未定義的變量：「$屏幕-MD-分鐘」。

什麼是訪問Bootstrap4變量的正確方法？

謝謝你。

Answer 1

BS4用Sass取代Less。減少使用延遲加載變量，而Sass不加載。所以你應該在使用它們之前聲明你的變量。請確保您的媒體交換機之前導入bootstrap/_variables.scss：

@import 'bootstrap/variables'; 
@media screen and (min-width: $screen-md-min) { 
    padding: 40px 50px; 
} 

Answer 2

見the relevant section of the Bootstrap 4 migration documentation.

的@screen-*變量已經與media-breakpoint-up()，media-breakpoint-down()沿換成了$grid-breakpoints變量，media-breakpoint-only()幫手薩斯混入。

用法示例：

@include media-breakpoint-up(md) { 
    padding: 40px 50px; 
}