css - 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 或其他任何内容。