Skip to content

Instantly share code, notes, and snippets.

@tomhodgins
Last active July 14, 2019 19:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tomhodgins/edb1f5f86991efe880ececd808771c4b to your computer and use it in GitHub Desktop.
Save tomhodgins/edb1f5f86991efe880ececd808771c4b to your computer and use it in GitHub Desktop.
/*
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')
};
}
/* 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;
}
};
}
/* 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