Seven, Nextcss

Syntax: official document

• Custom properties & var ()

In: Definitions of common attributes root {}, a - variable 2. Use the prefix naming var () call

:root{ --mainColor: red;}
a{ color: var(--mainColor); } 编译后：
a{ color: red; }

• Custom property set & @apply

1. In: root {} defined set of attributes, using - a prefix naming attribute set variable name
2. Use @apply call

:root { --centered: { display: flex; align-items: center; justify-content: center; }; }
.centered { @apply --centered; } 编译后：
.centered { display: flex; align-items: center; justify-content: center; }

• calc() & var()

:root{ --fontSize: 1rem; } h1{ font-size: calc(var(--fontSize)*2); } 编译后：
h1{ font-size: calc(1rem*2);}

• Selector Custom & @ custom-selector

@custom-selector :--button button, .button;
@custom-selector :--enter :hover, :focus;
@custom-selector :--heading h1, h2, h3, h4, h5, h6;
:--button{ box-shadow: 0 0 1px black; }
a:--enter{ color: black; }
:--heading { margin-top: 0; }
编译后：
button, .button{ box-shadow: 0 0 1px black; }
a:hover, a:focus{ color: black; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; }

• Nesting: &

Nested outer @nest selector &

a{ & span{ color: white; } @nest span &{ color: blue; } }
编译后：
a span{ color: white;}
span a{color: blue;}

• color

a{color: color(red alpha(-10%));}
a:hover{ color: color(red blackness(80%));}
编译后:
a{ color: #ff0000; color: rgba(255, 0, 0, 0.9);}
a:hover{ color: rgb(51, 0, 0);}