1

How would I access previously defined styles in CSS (3) to be used in my calc()? I'd like to know how because then I can use something like width: calc(80% - calc(padding / 2)), but I'm not sure how to get padding directly within CSS.

#main {
    padding: 10px;
    /* This is how we might do it - remember, we want our width to be 100% - 20px. */
    /* See this.padding? */
    width: calc(80% - calc(this.padding * 2));
    /* Of course, it could be something like self.padding: */
    width: calc(80% - calc(self.padding * 2));
    /* Or even just (and best of all): */
    width: calc(80% + calc(padding * 2));
}

/* What would be even more awesome is if we could get properties from other styles: */

#demo1 {
    font-family: Monaco;
}

#demo2 {
    font-family: #demo1;
}

/* Of course, we can do this if #demo2 is inside of #demo1: */

#demo1 {
    font-family: Monaco;
}

#demo2 {
    font-family: inherit;
}

/* But we want to do this without having it use inherit. */

Any idea how to do any of these? I don't want to use SASS, or var because it's only supported in Firefox.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Aqua the SeaWing
  • 333
  • 4
  • 16
  • 1
    A closer duplicate: [Is there anything in the CSS spec that allows a percentage property to be relative to a specific element/property?](http://stackoverflow.com/questions/25451809/is-there-anything-in-the-css-spec-that-allows-a-percentage-property-to-be-relati) my answer to which mentions `var`, but only because it is the only possible solution. `var` wouldn't have to exist if `calc()` allowed referencing other properties directly. – BoltClock Feb 16 '15 at 07:22
  • 1
    For your specific question, use `border-sizing: border-box;`. This lets the padding be a part of the width and your problem gets fixed without crazy calculations. – Gasim Feb 16 '15 at 07:28

0 Answers0