by Miriam Suzanne
.grid-span {
width: 23.7288136%;
margin-right: 01.6949153%;
padding-left: 08.4745763%;
}
.grid-span {
width: span(3);
margin-right: gutter();
padding-left: span(1 wide);
}
2009: Media queries
2011: We get CSS calc
2011: Ethan Marcotte presents "Response Web Design"
.example { $columns: 2; }
.nested-class { /* $columns == undefined */ }
@media (min-width: 30em) {
.example { $columns: 6; }
.nested-class { /* $columns == undefined */ }
}
.example { --columns: 2; }
.nested-class { /* var(--columns) == 2 */ }
@media (min-width: 30em) {
.example { --columns: 6; }
.nested-class { /* var(--columns) == 6 */ }
<button style="--color: blue;">Click me!</button>
button {
background: var(--color, red);
}
button {
background: blue
}
.thing button {
background: red;
}
/* vs */
button {
background: var(--btn-color, blue);
}
.thing {
--btn-color: red;
}
// get
let currentColor = footer.style.getPropertyValue('--color');
// set
footer.style.setProperty('--color', newColor);
<dl class="chart" style="--scale: 100">
<dt class="date">2000</dt>
<dd class="bar" style="--value: 45">45%</dd>
<dt class="date">2001</dt>
<dd class="bar" style="--value: 100">100%</dd>
<!-- etc… -->
</dl>
.bar {
--start: calc(var(--scale) + 1 - var(--value));
grid-row-start: var(--start);
}