SCSS基于另一个元素动态分配余量

li9yvcax  于 2023-03-24  发布在  其他
关注(0)|答案(1)|浏览(98)

我不想在其中一个元素上硬编码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

l0oc07j2

l0oc07j21#

width: auto在考虑了margin和border之后填充父容器。我假设.other_element是另一个容器的子元素,该容器必须具有一些静态宽度,否则它将填充整个窗口宽度。如果是这样,您可以通过scss变量引用父元素的宽度并减去子元素的任何margin和border。
如下所示:(这里是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或任何东西一起工作。

相关问题