Question

我需要根据 .withtable 和 .notable 这样的类设置变量，并且元素的位置不同。 See the image或查看代码示例：

body.withtable {
 $logo_width: 130px;
 $logo_height: 80px;
}
body.notable {
 $logo_width: 200px;
 $logo_height: 100px;
}

如何解决这个问题？有什么想法吗？

Answer 1

你不能以那种方式传递变量。您可能希望以下列方式处理此问题：

.logo {
    body.withtable & {
        $logo_width: 130px;
        $logo_height: 80px;
        width: $logo_width;
        height: $logo_height;
    }
    body.notable & {
        $logo_width: 200px;
        $logo_height: 100px;
        width: $logo_width;
        height: $logo_height;
    }
}

当您将徽标属性保存在一个位置时，这可以保持代码的可读性和可管理性。在末尾放置&字符会检查这是父母而不是.logo的孩子。

这编译成：

body.withtable .logo {
  width: 130px;
  height: 80px; }

body.notable .logo {
  width: 200px;
  height: 100px; }
}

根据班级设置SASS变量

1 个答案: