Last active
August 24, 2019 20:16
-
-
Save existenzial/3fedbcb554ff22b1ae42387d0f0e8800 to your computer and use it in GitHub Desktop.
CSS Variables - a playground (JSBin - https://jsbin.com/kiguwoq)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
margin: 0; | |
padding: 0; | |
box-sizing: border-box; | |
} | |
body { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
flex-direction: column; | |
height: 100vh; | |
width: 100vw; | |
background: whitesmoke; | |
} | |
.color-box { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
height: 300px; | |
width: 300px; | |
cursor: pointer; | |
background: #fff; | |
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), | |
0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
transition: all 0.2s ease-out; | |
} | |
.color-box:hover { | |
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), | |
0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
} | |
.nested-box { | |
height: 75px; | |
width: 75px; | |
transition: all 0.2s ease-out; | |
background: blueviolet; | |
} | |
.title { | |
color: #ccc; | |
font-size: 2.5em; | |
margin: 100px; | |
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
letter-spacing: 0.25em; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> | |
<link rel="stylesheet" href="styles/base.css" /> | |
<link rel="stylesheet" href="styles/main.css" /> | |
<title>CSS Variables</title> | |
</head> | |
<body> | |
<h1 class="title"></h1> | |
<div class="color-box"> | |
<div class="nested-box"></div> | |
</div> | |
<script src="js/main.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* | |
* | |
* | |
******************************** | |
* Feature Query / Check Support | |
******************************** | |
*/ | |
@supports (--css: variables) { | |
.color-box:hover .nested-box { | |
background: turquoise; | |
} | |
} | |
/* | |
* | |
* | |
* | |
******************************** | |
* Global Variables | |
******************************** | |
*/ | |
/* attach to :root pseudo-class */ | |
:root { | |
--my-new-height: 25px; | |
} | |
.color-box:hover .nested-box { | |
height: var(--my-new-height); | |
} | |
/* | |
* | |
* | |
* | |
******************************** | |
* Local Variables | |
******************************** | |
*/ | |
/* attach to element */ | |
.color-box { | |
--bigger: scale(1.2); | |
} | |
.color-box:hover { | |
transform: var(--bigger); | |
} | |
/* | |
* | |
* | |
* | |
******************************** | |
* Internationalization | |
******************************** | |
*/ | |
/* use to for language-dependent values */ | |
:root, | |
:root:lang(en) { | |
--title: 'Box'; | |
} | |
:root:lang(es) { | |
--title: 'Caja'; | |
} | |
:root:lang(fr) { | |
--title: 'Boîte'; | |
} | |
:root:lang(ar) { | |
--title: 'صندوق'; | |
} | |
.title::after { | |
content: var(--title); | |
} | |
/* | |
* | |
* | |
* | |
******************************** | |
* Calculated Values | |
******************************** | |
*/ | |
/* use for dynamically computed values */ | |
.color-box { | |
--x-pos: 0; | |
--y-pos: 0; | |
transform: translate(var(--x-pos), var(--y-pos)); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const colorBox = document.querySelector('.color-box'); | |
// GET PROPERTIES | |
colorBox.style.getPropertyValue('--x-pos'); | |
colorBox.style.getPropertyValue('--y-pos'); | |
// using global getComputedStyle | |
getComputedStyle(colorBox).getPropertyValue('--x-pos'); | |
getComputedStyle(colorBox).getPropertyValue('--y-pos'); | |
console.group('Before'); | |
console.log({ | |
x: colorBox.style.getPropertyValue('--x-pos'), | |
y: colorBox.style.getPropertyValue('--y-pos'), | |
}); | |
console.groupEnd(); | |
// SET PROPERTIES | |
colorBox.style.setProperty('--x-pos', '100px'); | |
colorBox.style.setProperty('--y-pos', '-75px'); | |
console.group('After'); | |
console.log({ | |
x: colorBox.style.getPropertyValue('--x-pos'), | |
y: colorBox.style.getPropertyValue('--y-pos'), | |
}); | |
console.groupEnd(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment