sass中的变量和mixin有什么区别? [英] What is the difference between a variable and a mixin in sass?

问题描述

我一直在进行谷歌搜索，目前我了解的区别是变量存储单行信息，而mixin存储多行变量.

I have been doing some googling and I currently understand the difference being that a variable stores a single line of information whereas, a mixin stores multiple lines of variables.

推荐答案

来自sass文档

变量以美元符号开头，并设置为CSS属性.然后，您可以在属性中引用它们:

Variables begin with dollar signs, and are set like CSS properties. You can then refer to them in properties:

$width: 5em;

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

另一方面，Mixins允许您定义可以在整个样式表中重复使用的样式

On the other hand, Mixins allow you to define styles that can be re-used throughout the stylesheet

@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; }

这篇关于sass中的变量和mixin有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！