sass中的變量和mixin有什麼區別？

Question

我一直在做一些Google搜索，我目前明白區別在於變量存儲單行信息，而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做一些樣式，可以在整個樣式中再次使用，同樣可以儘可能多地使用變量。