七、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);}

猜你喜欢

转载自blog.51cto.com/14533658/2436794