SCSS根据另一个元素动态分配边距

Question

我宁愿不在我的一个元素上为我的margin-left硬编码像素值：

.my_element {
  margin-left: 75px;
}

我想做的是让margin-left等于另一个元素+ 20px的宽度。

.other_element {
  width: auto;
}

.my_element {
  margin-left: [somehow-reference-other-element-width];
}

我知道如果我有静态宽度，我可以使用.scss变量（$myWidth: 75px;）并将其设置为两者，但我认为我宁愿使用auto。

Answer 1

在计算保证金和边界后，

width: auto填充父容器。我假设.other_element是另一个容器的子容，它必须有一些静态宽度，否则它会填满整个窗口宽度。如果是这样，您可以通过scss变量引用父宽度，并减去子元素的任何边距和边框。

如下所示:(这是fiddle）

$parent_width: 150px;
$other_margin: 20px;
$other_border: 5px;

.some_parent {
    width: $parent_width;
}

.other_element {
    width: auto;
    // optional margin and border
    margin: $other_margin;
    border: $other_border;
}

.my_element {
    margin-left: $parent_width - $other_margin - $other_border + 20;
}

很难想象你正在寻找什么，但如果你正在做出响应式设计，这应该适用于百分比，ems或其他任何东西。