andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Autoscoping (#103)

Browse Source 
* Add autoscoping with generated demo

* Remove manual demo from all snippets

* Add JavaScript inside IIFE

* Align mouse-cursor-gradient-tracking.md to demo code

* Match snippets to demo

* Update CONTRIBUTING.md

* Create reusable function for code extraction
This commit is contained in:
atomiks
2018-10-05 09:18:51 +10:00
committed by GitHub
parent 2afb2fe88a
commit 11eff23e47
41 changed files with 107 additions and 1102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
snippets/custom-variables.md
View File

@ -12,13 +12,14 @@ CSS variables that contain specific values to be reused throughout a document.
```css
:root {
/* Place variables within here to use the variables globally. */
}
.custom-variables {
--some-color: #da7800;
--some-keyword: italic;
--some-size: 1.25em;
--some-complex-value: 1px 1px 2px whitesmoke, 0 0 1em slategray, 0 0 0.2em slategray;
}
.custom-variables {
color: var(--some-color);
font-size: var(--some-size);
font-style: var(--some-keyword);
@ -28,28 +29,6 @@ CSS variables that contain specific values to be reused throughout a document.
#### Demo
<div class="snippet-demo">
<div class="snippet-demo__custom-variables">
<p>CSS is awesome!</p>
</div>
</div>
<style>
.snippet-demo__custom-variables {
--some-color: #686868;
--some-keyword: italic;
--some-size: 1.25em;
--some-complex-value: 1px 1px 2px whitesmoke, 0 0 1em slategray , 0 0 0.2em slategray;
}
.snippet-demo__custom-variables p {
color: var(--some-color);
font-size: var(--some-size);
font-style: var(--some-keyword);
text-shadow: var(--some-complex-value);
}
</style>
#### Explanation
The variables are defined globally within the `:root` CSS pseudo-class which matches the root element of a tree representing the document. Variables can also be scoped to a selector if defined within the block.