如何在SASS中使用Bootstrap 4媒體斷點？

在官方bootstrap website它說：如何在SASS中使用Bootstrap 4媒體斷點？

Since we write our source CSS in Sass, all our media queries are available via Sass mixins:

@include media-breakpoint-up(xs) { ... } 
@include media-breakpoint-up(sm) { ... } 
@include media-breakpoint-up(md) { ... } 
@include media-breakpoint-up(lg) { ... } 
@include media-breakpoint-up(xl) { ... } 

// Example usage: 
@include media-breakpoint-up(sm) { 
    .some-class { 
    display: block; 
    } 
}

現在，我使用SASS我的CSS和我也使用引導程序，但我只包括他們在HTML兩者結合。

當我嘗試做這樣的事情在我的SASS文件：

@include media-breakpoint-up(xl) { ... }

我得到一個錯誤：

Undefined Mixin

我想這是因爲我的SASS文件不知道引導，因爲我只在HTML中包含Bootstrap。

如何將Bootstrap 4包含到我的SASS文件中，作爲部分？（我猜這就是我必須要做的......）

PS：我使用的是Bootstrap 4，我更喜歡一個不需要Bower或RubyGems等的解決方案，但只需要下載Bootstrap文件和用老式的方式將它包含到我的SASS中 - 如果可能的話？

來源

2017-06-12 Christian Gärtner

你必須'@import'file_with_mixin_definitions.scss';'然後你可以使用'@ include'。 – Zydnar

謝謝，我明白了。但我在哪裏可以找到bootstrap 4的混合定義？ –

要SCSS使用的mixin你有一個混入的第一@import 'file_with_mixin_definitions.scss';定義看起來像這樣：

@mixin transition($type, $time) { 
    -o-transition: $type $time linear; 
    -ms-transition: $type $time linear; 
    -moz-transition: $type $time linear; 
    -webkit-transition: $type $time linear; 
    transition: $type $time linear; 
    &:hover{background: red} 
}

定義通常存儲在SCSS文件與名稱，如下劃線。 _globals.scss，因爲帶下劃線的文件默認情況下不會被壓縮到CSS，並且是爲導入而編寫的。或者您可以簡單地搜索您的項目文件，其中@mixin s。

來源

2017-06-12 11:19:09 Zydnar

下載整個源代碼，並查看scss/mixins。文件_breakpoints.scss是您應該擁有的文件。我做同樣的事情，我下載了源代碼，並在我自己編譯的CSS中包含了我需要的東西。

@import "_variables"; 
@import "_mixins"; 
@import "_grid";

來源

2017-06-12 11:25:48 Luc

如何在SASS中使用Bootstrap 4媒體斷點？

回答

相關問題