我进行了一些谷歌搜索,目前我理解的区别是变量存储单行信息,而混合存储多行变量。
变量以美元符号开头,并像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; }