Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    <div class="sized big"><div class="middle"></div>
    </div>
    <div class="sized medium"><div class="middle"></div>
    </div>
    <div class="sized small"><div class="middle"></div>
    </div>
</body>
</html>
 
:root {
  --size: 150px;
}
​
.sized {
  display: inline-block;
  position: relative;
  min-width: 50px;
  min-height: 50px;
  border: solid 3px red;
}
​
.big {
  --cursize: calc(var(--size)*2);
  width: var(--cursize);
  height: var(--cursize);
  /* this works fine */
}
​
.medium {
  width: var(--size);
  height: var(--size);
  /* this also works fine */
}
​
.small {
  --cursize: calc(var(--size)/2);
  width: var(--cursize);
  height: var(--cursize);
  /* this works ok, cursize is a new variable in here */
}
​
/* this is a dot, to be placed in the middle of each element */
.middle {
  display: block;
  position: absolute;
  border: solid 2px black;
}
​
.big .middle {
  /* does not work! Apparently, cursize(from big) did not survive! */
  /* if you replace cursize by size, it works */
  --middle: calc(var(--cursize)/2 - 2px);
  left: var(--middle);
  top: var(--middle);
}
​
.medium .middle {
  --middle: calc(var(--size)/2 - 2px);
  left: var(--middle);
  top: var(--middle);
}
​
.small .middle {
  /* this one does not work, cursize(from small) did not get to here! */
  --middle: calc(var(--cursize)/2 - 2px);
  /* this one works, using size divided by 4 */
  --middle: calc(var(--size)/4 - 2px);
  left: var(--middle);
  top: var(--middle);
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers