Post on 19-Mar-2017
transcript
Giacomo ZinettiGiko
Action plan
●●●●●●●
Theory �
Define
--your-property: value;
How to define a property
:root {
--button-color: blue;
--align: left;
}
header {
--header-height: 300px;
}
Use
var(--your-property, default-value)
How to use a variable
button {
background-color: var(--button-color);
}
a {
color: var(--link-color, black);
}
Quiz time: Inherited or
not?
Quiz time: Inherited or
not?
VS Preprocessors �
<body>
<a>Link 1</a>
<footer>
<a>Link 2</a>
</footer>
</body>
Inheritance:root { --link: red }
footer { --link: blue }
a { color: var(--link) }
<body>
<a>Link 1</a>
<footer>
<a>Link 2</a>
</footer>
</body>
$link: red
footer { $link: blue }
a { color: $link }
<body>
<a>Link 1</a>
<footer>
<a>Link 2</a>
</footer>
</body>
Inheritance compiled:root { --link: red }
footer { --link: blue }
a { color: var(--link) }
<body>
<a>Link 1</a>
<footer>
<a>Link 2</a>
</footer>
</body>
$link: red
footer { $link: blue }
a { color: $link red }
<body>
<a>Link 1</a>
<footer>
<a>Link 2</a>
</footer>
</body>
Inheritance:root { --link: red }
footer { --link: blue }
a { color: var(--link) }
<body>
<a>Link 1</a>
<footer>
<a>Link 2</a>
</footer>
</body>
$link: red
footer { $link: blue }
a { color: $link }
Preprocessors: N
ope
:root {
--gutter: 10px;
}
@media (min-width: 768px) {
:root {
--gutter: 15px;
}
}
article {
padding: var(--gutter);
}
Media queries
$gutter: 10px;
@media (min-width: 768px) {
$gutter: 15px;
}
article {
padding: $gutter;
}
:root {
--gutter: 10px;
}
@media (min-width: 768px) {
:root {
--gutter: 15px;
}
}
article {
padding: var(--gutter);
}
Media queries compiled
$gutter: 10px;
@media (min-width: 768px) {
$gutter: 15px;
}
article {
padding: $gutter 10px;
}
:root {
--gutter: 10px;
}
@media (min-width: 768px) {
:root {
--gutter: 15px;
}
}
article {
padding: var(--gutter);
}
Media queries
$gutter: 10px;
@media (min-width: 768px) {
$gutter: 15px;
}
article {
padding: $gutter;
}Preprocessors: N
ope
:root {
--gutter: 10px;
}
@media (min-width: 768px) {
:root {
--gutter: 15px;
}
}
article {
padding: var(--gutter);
}
Preprocessors solution
$gutter: 10px;
$gutter-large: 15px;
@media (min-width: 768px) {
article {
padding: $gutter-large;
}
}
article {
padding: $gutter;
}
But… :root {
--gutter: 10px;
}
@media (min-width: 768px) {
:root {
--gutter: 15px;
}
}
article.class {
padding: var(--gutter);
}
$gutter: 10px;
$gutter-large: 15px;
@media (min-width: 768px) {
article {
padding: $gutter-large;
}
}
article.class {
padding: $gutter;
}
But… they can be friends
Example ��
<body>
<a>Link 1</a>
<footer>
<a>Link 2</a>
<section>
<a>Link 3</a>
</section>
</footer>
</body>
Base rule
a { background: var(--link, red) }
<body>
<a>Link 1</a>
<footer>
<a>Link 2</a>
<section>
<a>Link 3</a>
</section>
</footer>
</body>
Override variables, not propertiessection { --link: green }
a { background: var(--link, red) }
<body>
<a>Link 1</a>
<footer>
<a>Link 2</a>
<section>
<a>Link 3</a>
</section>
</footer>
</body>
Make Cascade Love, not Specificity Warsection { --link: green }
footer { --link: blue }
a { background: var(--link, red) }
Old school... section { --link: green }
footer { --link: blue }
a { background: var(--link, red) }
footer section a { background: green }
footer a { background: blue }
a { background: red }
<body>
<a>Link 1</a>
<footer>
<a>Link 2</a>
<section>
<a>Link 3</a>
</section>
</footer>
</body>
Old school... section { --link: green }
footer { --link: blue }
a { background: var(--link, red) }
--------------
footer section a { background: green }
footer a { background: blue }
a { background: red }
<body>
<a>Link 1</a>
<footer>
<a>Link 2</a>
<section>
<a>Link 3</a>
</section>
</footer>
</body>
The end of specific
ity war!
Javascript
ReadgetComputedStyle(element).getPropertyValue('--color');
element.style.setProperty('--color', 'red');
Write
Support �
Browsers
49+ 31+ 15? 36+ 9.1+
Jan 2017: 68.34%
Fallback property
@supports (--foo: green) {
body {
color: var(--my-color);
}
}
Feature query
color: red;
color: var(--my-color, red);
Good news �
<body>
<a>Link 1</a>
<footer>
<a>Link 2</a>
<section>
<a>Link 3</a>
</section>
</footer>
</body>
We already use CSS variablesbody { font-size: 18px }
footer { font-size: 16px }
section { font-size: 14px }
a {
border-width: 0.2em;
padding-right: 2em;
}
<body>
<a>Link 1</a>
<footer>
<a>Link 2</a>
<section>
<a>Link 3</a>
</section>
</footer>
</body>
The superhero: currentColorbody { color: red }
footer { color: blue }
section { color: green }
a {
border-color: currentColor;
}
Use case:
Theming �
.theme(@bg: gray, @col: red, @var: blue) {
.box { background: @bg }
.button { color: @col }
.box .button { color: @var }
}
.theme();
.dark {
.theme(black, orange, lightgreen);
}
Theming with LESS
.box { background: gray }
.button { color: red }
.box .button { color: blue }
.dark .box { background: black }
.dark .button { color: orange }
.dark .box .button { color: lightgreen }
Theming with CSS
.box {
--col: var(--alt, blue);
background: var(--bg, lightgray);
}
.button {
color: var(--col, red);
}
.dark {
--bg: black;
--col: orange;
--alt: lightgreen;
}
Theming with CSS Variables
Questions? �
Grazie! �@giacomozinetti