Last active
July 14, 2019 19:17
-
-
Save tomhodgins/edb1f5f86991efe880ececd808771c4b to your computer and use it in GitHub Desktop.
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
/* | |
Custom Property Values | |
*/ | |
/* Native CSS stuff */ | |
example { | |
--empty: ; | |
--ident: hello; | |
--string: "hello"; | |
--number: 5; | |
--function: hello(); | |
--round-block: (hello); | |
--square-block: [hello]; | |
--curly-block: {hello}; | |
--at-rule: @something; | |
} | |
demo { | |
--element-query: @element div and (min-width) { | |
:self { | |
background: lime; | |
} | |
}; | |
} | |
/* Natural Overlap with JSON */ | |
example { | |
--number: 1; | |
--string: "hello"; | |
--true: true; | |
--false: false; | |
--null: null; | |
--array: []; | |
--object: {}; | |
} | |
demo { | |
--json: [ | |
{ | |
"name": "five" | |
"value": 5, | |
"best": false | |
}, | |
{ | |
"name": "ten" | |
"value": 10, | |
"best": true | |
} | |
] | |
} | |
/* | |
Other languages: | |
- EQCSS | |
- Sass | |
- Less | |
- JS | |
- anything valid as CSS custom property value, which is basically anything that's valid in CSS grammar and syntax | |
*/ | |
/* Explore nesting */ | |
/* nested declaration list */ | |
div { | |
--nest: { | |
color: red | |
}; | |
} | |
/* nested rule */ | |
div { | |
--nest: &.active { | |
color: green; | |
}; | |
} | |
/* nested at-rule */ | |
div { | |
--nest: @media (min-width: 500px) { | |
color: blue; | |
}; | |
} | |
/* rule nested in an at-rule */ | |
@supports (--nest(div)) { | |
[--self] { | |
color: purple; | |
} | |
} | |
/* Explore embedding data in CSS to be read by JS */ | |
div { | |
--colors: ["red", "green", "blue"]; | |
} | |
div { | |
--jitter: .5; | |
} | |
div { | |
--palette: { | |
"primary": "#06f", | |
"secondary": "#0cf", | |
"grey": "#ccc", | |
"red": "#c00" | |
} | |
} | |
/* Explore embedding JS in CSS */ | |
div { | |
--random: Math.random(); | |
} | |
div { | |
--on-click: event => { | |
alert('hello') | |
}; | |
} |
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
/* Using CSS grammar in CSS custom property values */ | |
selectors { | |
--example-1: div; | |
--example-2: div.class#id[attr]:nth-of-type(even); | |
--example-3: :fake-selector(a, b); | |
--example-4: :--custom-selector(a, b); | |
--example-5: [--custom-selector-workaround="a, b"]; | |
} | |
declarations { | |
--example-1: display: none; | |
--example-2: border-top-right-radius: 1em; | |
--example-3: fake-property: value; | |
--example-4: --custom-property: value; | |
} | |
declaration lists { | |
--example: { | |
display: none; | |
color: red; | |
}; | |
} | |
rules { | |
--example: div { | |
color: green; | |
}; | |
} | |
at-rules { | |
--example-1: @media; | |
--example-2: @fake-at-rule; | |
--example-3: @--custom-at-rule; | |
--example-4: @supports (--custom-at-rule-workaround()); | |
} | |
at-rule with string { | |
--example-1: @import "path/to/url.css"; | |
--example-2: @fake-at-rule "string"; | |
--example-3: @--custom-at-rule "string"; | |
} | |
at-rule with function { | |
--example-1: @import url(path/to/url.css); | |
--example-3: @fake-at-rule fake-func(); | |
--example-3: @--custom-at-rule --custom-func(); | |
} | |
at-rule with group body rule { | |
--example-1: @media (min-width: 500px) { | |
div { | |
background: lime; | |
} | |
}; | |
--example-2: @fake-at-rule (fake-condition: value) { | |
:fake-selector { | |
background: hotpink; | |
} | |
}; | |
--example-3: @--custom-at-rule (custom-condition: value) { | |
:--custom-selector { | |
background: magenta; | |
} | |
} | |
--example-4: @supports (--custom-at-rule-workaround("condition", "value")) { | |
[--custom-selector-workaround] { | |
background: hotpink; | |
} | |
}; | |
} |
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
/* Using JSON-parsable values with CSS custom properties */ | |
booleans { | |
--example-1: true; | |
--example-2: false; | |
} | |
strings { | |
--example-1: "red"; | |
--example-2: "This is a string of text"; | |
} | |
numbers { | |
--example-1: 5; | |
--example-2: .5; | |
--example-3: 1e3; | |
} | |
lists { | |
--example-1: [1, 2, 3]; | |
--example-2: ["black", "white"]; | |
--example-3: [ | |
["blue", 50, 100], | |
["red", 16, 150], | |
["green", 100, 100] | |
]; | |
} | |
objects { | |
--example-1: {"x": 0, "y": 100}; | |
--example-2: {"one": 1, "two": 2, "three": 3}; | |
--example-3: { | |
"primary": "red", | |
"secondary": "green", | |
"tertiary": "blue" | |
}; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment