0

ピクセルとレムの両方でフォントサイズを作成するために、SCSS で次の @mixin を定義しています。

@mixin font-size($sizeValue: 1){
font-size: ($sizeValue * 10) + px;
font-size: $sizeValue + rem;
}

次に、次のものがあります。

h1 { @include font-size(1.6) }

h2 { @include font-size(1.4) }

h3 { @include font-size(1.2) }

画面が 480px 未満の場合、フォント サイズを 80% 縮小したいのですが、これまでのところ、次のコードは機能していません。

@media(max-width:480px){ 
@mixin font-size($sizeValue: 1){
font-size: (($sizeValue * 10) * 0.8) + px;
font-size: ($sizeValue * 0.8) + rem;
}}

@media クエリ内で @mixin を再定義することは可能ですか? これを行うための最良の方法は何ですか？h1、h2、h3 ルールを再度含めることなく、これを実行したいと考えています。

4

2 に答える 2

0

追加の引数を mixin に追加します。

@mixin font-size($sizeValue: 1, $ratio: 1){
  font-size: (($sizeValue * 10) * $ratio) + px;
  font-size: ($sizeValue * $ratio) + rem;
}

次に、ヘッダー値を変数として保存します。

$header-1: 1.6;
$header-2: 1.4;
$header-3: 1.2;

ついに：

h1 {
  @include font-size($header-1);
}

@media(max-width:480px) {
  h1 {
    @include font-size($header-1, .8);
  }
}

生成されるもの:

h1 {
  font-size: 16px;
  font-size: 1.6rem;
}

@media (max-width: 480px) {
  h1 {
    font-size: 12.8px;
    font-size: 1.28rem;
  }
}
于 2012-11-04T15:05:26.410 に答える
0

すべてのヘッダーを再定義したくない場合の解決策は、ミックスインを変更してメディア クエリを含めることです。

@mixin font-size($sizeValue: 1){
    font-size: ($sizeValue * 10) + px;
    font-size: $sizeValue + rem;

    @media(max-width:480px) {
        font-size: (($sizeValue * 10) * 0.8) + px;
        font-size: ($sizeValue * 0.8) + rem;
   }
}

ただし、ヘッダーごとに @media ルールが繰り返される css 出力は次のようになることに注意してください。

h1 {
    font-size: 16px;
    font-size: 1.6rem;
}
@media (max-width: 480px) {
    h1 {
        font-size: 12.8px;
        font-size: 1.28rem; 
    }
}
h2 {
    font-size: 14px;
    font-size: 1.4rem;
}
@media (max-width: 480px) {
    h2 {
        font-size: 11.2px;
        font-size: 1.12rem;
    }
}
h3 {
    font-size: 12px;
    font-size: 1.2rem; 
}
@media (max-width: 480px) {
    h3 {
        font-size: 9.6px;
        font-size: 0.96rem;
    }
}
于 2012-11-18T19:29:46.503 に答える