�ݺ�ߣ

CSS
proměnné
Martin Michálek
Frontendisti Praha, 13. 12. 2017

html {
--color: blue;
}
.box {
color: var(--color);
}
https://codepen.io/machal/pen/mBOZZK
Custom Properties
(Nastavitelné vlastnosti)

CSS proměnné (Custom Properties)

:root {
--color: black;
}
@media screen and (max-width: 768px) {
:root {
--color: red;
}
}
:root {
color: var(--color);
}
https://codepen.io/machal/pen/rGWdpV
Živé v prohlížečích

// číst hodnotu
$('#box1').css('--color');
// zapsat hodnotu
$('#box2').css('--color', 'blue');
https://codepen.io/machal/pen/rGWdpV
Sdílené v JS

/* 1 */
@media --var(breakpoint-medium) {
…
}
/* 2 */
.el {
--var(jmeno-vlastnosti): 1px solid red ;
}
/* 3 */
--var(jmeno-selektoru) {
…
}
/* 4 */
.el {
border-radius: calc(--var(cislo) * 1px)
}
Náhrada preprocesorů?

:root {
/* 1 */
--color: #f00;
/* 2 */
--header-height: 68px;
/* 3 */
--line-height: 1.35;
/* 4 */
--padding: 10px 20px;
/* 5 */
--selector: padding;
/* 6 */
--text: "text";
/* 7 */
--a: var(--text);
/* 8 */
--height: calc(2vh + 20px);
/* 9 */
--javascript: if(x > 5) this.width = 10;
}
Možné hodnoty

.box {
box-shadow:
var(--box-shadow-offset)
var(--box-shadow-offset)
.5em
rgba(0, 0, 0, .5);
}
.box:hover {
--box-shadow-offset: .5em;
}
Příklad: Emulace
vlastnosti
https://codepen.io/machal/pen/KyeqzE

Příklad: Inverzní
schéma
https://codepen.io/machal/pen/POajOd?editors=1100
.inverted {
--bg-color: black;
--text-color: white;
--link-color: yellow;
}

Příklad: Různá baseline
na breakpointech
https://codepen.io/machal/pen/JOZrMP
@media (min-width: 640px) {
:root {
--baseline-multiplier: 10;
}
}

Příklad: Jednodušší
responzivní ﬂexbox
https://codepen.io/machal/pen/XzYzXJ?editors=1100
:root {
--layout-gap: 1em;
--layout-column-width: 50%;
}
}
:root {
--layout-column-width: 25%;
}
}

Příklad: Sdílení
breakpointů v JS
https://codepen.io/machal/pen/JOZpKV
:root {
--breakpoint-xs-value: (max-width: 479px);
--breakpoint-sm-value: (min-width: 480px) and (max-width: 639px);
--breakpoint-md-value: (min-width: 640px);
}
var
mqXS
= window.matchMedia( $('html').css('--breakpoint-xs-value').trim() ),
mqSM
= window.matchMedia( $('html').css('--breakpoint-sm-value').trim() ),
mqMD
= window.matchMedia( $('html').css('--breakpoint-md-value').trim() );

�ݺ�ߣ

CSS proměnné (Custom Properties)

Recommended

More Related Content

More from Martin Michálek (20)

CSS proměnné (Custom Properties)