1

I am confused as to what to use for this. Is it possible to use SASS to calculate the padding for an element based on another's height?

for example:

<div class="element-1">
  <h2>Some Title</h2>
</div>

<div class="element-2">
  <h2>Element Contents</h2>
</div>

Styles for the elements (varying according to screen size):

.element-1{
 height:200px;
 @extend .pos-fixed;
 width:$site-width;
 }

.element-2{
 width:$site-width;
 padding-top:calc(element-height(.element-1)+20px);
 }

Compass enables me to do a similar thing with image-height and image-width, but how can apply this with padding-top:element-height(.element-1)+20px;?

Is this possible?

tbodt
  • 16,609
  • 6
  • 58
  • 83
HGB
  • 2,157
  • 8
  • 43
  • 74
  • possible duplicate of [SASS - Manipulate inherited color?](http://stackoverflow.com/questions/14920801/sass-manipulate-inherited-color) – cimmanon Mar 07 '14 at 13:22
  • I don't understand what you mean? – HGB Mar 07 '14 at 14:29
  • 2
    It means the answer is no. See also: http://stackoverflow.com/questions/7691632/get-a-selector-property-value-defined-through-a-mixin-with-sass – cimmanon Mar 07 '14 at 15:00
  • 1
    Just use a variable for `.element-1`'s width and use the same variable to calculate – Zach Saucier Mar 07 '14 at 15:51
  • Hi Zach, this variable in question, can it change according to screen size? – HGB Mar 07 '14 at 17:13
  • The answer is still no. http://stackoverflow.com/questions/18805717/how-to-auto-detect-number-of-li-tag-in-scss, http://stackoverflow.com/questions/22147959/define-variables-in-sass-based-on-classes, http://stackoverflow.com/questions/13501726/access-html-attribute-value-in-sass – cimmanon Mar 07 '14 at 17:25
  • I used a different hack based on an image-size compass extension. Not the best but at least it can change according to screen size. – HGB Mar 10 '14 at 10:33

0 Answers0