根据类别设置SASS变量

Question

我需要根据.withtable和.notable并且元素的位置不同的类来设置vars。 查看图片或查看代码示例：

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