Как определить ширину одного элемента на основе другого несвязанного элемента?

Question

Я хочу сделать div на 80% шире, чем другой div, но они не являются ни вложенными, ни братьями и сестрами.

Как я могу сделать это с помощью SASS

Answer 1

Вы можете использовать переменную для первоначальной ширины и использовать его для расчета ширины. Я использовал mixin для демонстрации демо с шириной как в пикселях, так и в процентах.

HTML

<div class="parent"> 
    <div class="three">three</div> 
    <div class="four">four</div> 
</div> 
<div class="one">one</div> 
<div class="two">two</div> 

SCSS

@mixin calc_width($obj) { 
    width: calc(0.8 * #{$obj}) 
} 


$width_in_px: 300px; 
$width_in_percentage: 50%; 

.one{ 
    width: $width_in_px; 
    height: 50px; 
    background: red; 
} 
.two { 
    @include calc_width($width_in_px); 
    height: 50px; 
    background: green; 
    } 

.parent { 
    width: $width_in_px; 
    background: orange; 
} 
.three{ 
    width: $width_in_percentage; 
    height: 50px; 
    background: lime; 
} 
.four { 
    @include calc_width($width_in_percentage); 
    height: 50px; 
    background: black; 
    } 

Updated Codepen