mixinsを使って変数の値を変更する

Question

mixinsを使って、新しい変数の値を定義することができるのではないかと思っています。

私は私が構築していますウェブサイト全体のパディングサイズを定義するために変数を使用するのが良いだろうと思いました。私はミックスインとメディアのクエリを使って新しい価値を定義することができたという考えです。働く方法がある私は、これは超便利だと思うが、それは...仕事を得ることができない

$site-padding: 40px; 

@include media-over-767 { 
    $site-padding: 20px; 
} 

：

の例では、より多くの意味を作るのでしょうか？

Answer 1

@mixin site-padding{ 
    $site-padding: 20px; 
} 

@include media-over-767 { 
    @include site-padding; 
} 

Answer 2

sass変数をブレークポイント内に設定することはできません。これもあなたは単に

$site-padding: 40px; 
$site-padding-sm: 20px; 

@include media-over-767 { 
    padding: $site-padding-sm; 
} 

行うことができますhttps://github.com/sass/sass/issues/1227

参照してください - -

は、この問題を参照してください Using Sass Variables with CSS3 Media Queries

Answer 3

私は、これはあなたが探して正確に何であるかどうかわからないんだけど、うまくいけば、それをあなたを正しい道に導きます。ミックスイン宣言します。その例では

@mixin site-padding($padding:40px) { 
    padding: $padding; 
} 

を、私は40pxのデフォルト値でミックスインsite-paddingを設定します。

あなたのSASSはこのようなものになります

：@JinuKurianはすでに答えた場合でも、私はあなたが問題のこれらの並べ替えを解決するために別のパスにあなたを置いてもよいSASSでのスコープの変数を見てみるべきだと思い

.element { 
    // Small screens 
    @include site-padding(20px); 

    // Over 767px 
    @media screen and (min-width: 768px) { 
     // Defaults to 40px. 
     @include site-padding(); 
    } 
}