SASSでブートストラップ4メディアブレークポイントを使用するには？公式<a href="https://v4-alpha.getbootstrap.com/layout/overview/" rel="nofollow noreferrer">bootstrap website</a>で

Question

それは言う：

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; 
    } 
} 

を今、私は私のCSSのためにSASSを使用しています、と私はまた、ブートストラップを使用していますが、私はHTMLのみでそれらを含むことにより、2つを組み合わせています。私は私のSASSファイルにこのような何かをしようとすると

：私は私のSASSファイルは、ブートストラップについて知っていないためであると推測

Undefined Mixin

：

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

私はエラーを取得しますなぜなら私はHTMLにBootstrapだけを含めるからです。

SASSファイルにブートストラップ4を部分的に含めるにはどうすればよいですか？ （これは私がやるべきことだと思います...）

PS：私はBootstrap 4を使用していますが、BowerやRubyGemsなどを必要としないソリューションが好きですが、Bootstrapファイルをダウンロードするだけです。それを私のSASSに昔ながらの方法で含める - それがまったく可能ならば？ミックスインの最初の@import 'file_with_mixin_definitions.scss';定義にあなたが持っているSCSSでミックスインを使用するには

Answer 1

は、以下のようになります。

@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です。

Answer 2

ソースコード全体をダウンロードし、scss/mixinsを見てください。 _breakpoints.scssというファイルが必要です。私は同じことをして、私はソースコードをダウンロードし、自分のコンパイル済みのCSSに必要なものを含めます。

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