sassの変数とmixinの違いは何ですか？

Question

私はいくつかのグーグルをしていますが、私は現在、変数が1行の情報を格納しているのに対し、mixinは複数行の変数を格納しています。

Answer 1

From the sass documentation

変数はドル記号で始まり、およびCSSプロパティのように設定されています。 あなたはその後、プロパティでそれらを参照することができます

$width: 5em; 

#main { 
    width: $width; // width is set as 5em 
} 

を一方、ミックスインを使用すると、スタイルシート

@mixin large-text { // defining mixing 
    font: { 
    family: Arial; 
    size: 20px; 
    weight: bold; 
    } 
    color: #ff0000; 
} 

.page-title { // applying mixin 
    @include large-text; 
    padding: 4px; 
    margin-top: 10px; 
} 

全体で再利用できるスタイルを定義することができます上記のコードは次のようにコンパイルされています：

.page-title { 
    font-family: Arial; 
    font-size: 20px; 
    font-weight: bold; 
    color: #ff0000; 
    padding: 4px; 
    margin-top: 10px; } 

Answer 2

C++や他のプログラミング言語を知っているなら、sass変数をcまたはC++のグローバル変数として、そしてsass mixinをcまたはC++の関数として参照することができます。

Mixinあなたの全体のスタイリングでもう一度使うことができる何らかの種類のスタイリングを行います。同じように変数をできるだけ多く使うことができます。