七、Nextcss

语法：官方文档

• 自定义属性 & var()

在 :root{} 中定义常用属性，使用--前缀命名变量 2. 使用 var() 调用

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

• 自定义属性集 & @apply

1. 在 :root{} 中定义属性集，使用 -- 前缀命名属性集变量名
2. 使用 @apply 进行调用

: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);}

• 自定义选择器 & @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; }

• 嵌套: &

@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);}