css - 根据类设置 SASS 变量

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 属性保存在一个位置时，这可以使代码保持可读性和可管理性。将 & 字符放在末尾会检查它是否是 .logo 的父项而不是子项。

编译成:

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

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