SCSS基於另一個元素

我寧願不硬編碼爲我的margin-left我的元素之一的像素值的動態分配保證金：SCSS基於另一個元素

.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。

來源

2013-05-17 ardavis

[SASS擴展/共享/繼承父母之間的特定屬性或簽證vera]的可能重複（http://stackoverflow.com/questions/16544361/sass-extend-share-inherit-specific-properties-from-父母對孩子或簽證維拉） – cimmanon

不是。但非常相似。我不僅要從父母那裏獲得財產，還要操縱它。不只是繼承。 – ardavis

答案依然如此，Sass沒有這樣的功能。 – cimmanon

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，或任何工作，以及設計。

來源

2013-05-17 21:00:38

但是，這個問題是我必須在父級上設置一個定義的寬度。我只是想知道是否有可能以某種方式從元素中檢索寬度，並根據它設置另一個寬度。但我認爲jQuery將是唯一不幸的答案。 – ardavis

當您正在尋找動態（運行時）值時，靜態SCSS樣式表將無法完成您正在尋找的任務。你將不得不使用一些JavaScript。 –

我現在意識到這一點，我想我希望瀏覽器能解釋一些CSS值，併爲我做。但我明白，沒有一些JS是不可能的。 – ardavis

SCSS基於另一個元素

回答

相關問題