Foundation 6のapp.scssファイルにメディアクエリを配置しても動作しません

Question

私はFoundation 6を初めて使用しました。ビューポートが中程度または小さい場合、私のWebページの見出しテキストを小さくしたいと考えています。

私はメディアクエリを作成することを理解していますが、そのためのCSSは@importセクションのすぐ下のapp.scssファイルにあります。しかし、私は私のページとapp.scssファイルを保存してから、私のブラウザを更新した後、私は自分のページを作る変更はありません

.head { 
    @include breakpoint(medium down) { 
    font-size: 2rem; 
    } 
} 

：私のコードは、財団6でメディアクエリのための新しいアプローチをたどり、このようになります小さい。誰でも助けてくれますか？あなたが制限なしにそれらのほとんどの修正をいじくり回すことができるように

おかげで、 スティーブ

Answer 1

は、私は自分のミックスインをしました。それを試してみるべきです。

p { 
font-size: 18px; 
@include bp-s{font-size:22px;}; 

@include bp-m{font-size:24px;}; 

@include bp-xl{font-size:32px;}; 
} 

¡また、あなたが必要なだけのルールを作成することができます。

//Breakpoints *include 
@mixin bp-xl { 
    @media only screen and (min-width: 1400px){ 
    @content; 
    } 
} 
@mixin bp-l { 
    @media only screen and (min-width: 1024px){ 
    @content; 
    } 
} 
@mixin bp-m { 
    @media only screen and (min-width: 800px) { 
    @content; 
    } 
} 
@mixin bp-s { 
    @media only screen and (min-width: 450px) { 
    @content; 
    } 
} 
@mixin bp-xs { 
    @media only screen and (min-width: 320px) { 
    @content; 
    } 
} 

は次にあなたがすべては一例です！
あなたはそれが好きだと思う：D