伪类

Each Atomic Props of Fower supports CSS pseudo-classes. The format of the Atomic Props that enable Pseudo-classes style is: {prop}--{pseudo}, for example: bgRed400--hover, bgYellow500--active, opacity-70--disabled, w-20--visited, etc.

Hover#

Use --hover postfix to apply hover style.

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Active#

Use --active postfix to apply active style.

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Disabled#

Use --disabled postfix to apply disabled style.

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Focus#

Use --focus postfix to apply focus style.

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

Child#

Use --first-child postfix to apply first-child style. Use --last-child postfix to apply last-child style.

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

支持的伪类#

By default, Fower supports these pseudo classes:

  • active
  • checked
  • disabled
  • enabled
  • default
  • empty
  • focus
  • focus-within
  • invalid
  • hover
  • link
  • visited
  • first-child
  • last-child
  • after
  • before
  • placeholder
  • selection

If you want more pseudo classes, you can use configure to add it:

import { setConfig } from '@fower/core'
setConfig({  pseudos: ['focus-visible', 'blank'], // will merge to built-in pseudos})

关于文件大小#

Fower 每个原子属性(Atomic Props) 都支持 CSS 伪类,并且支持了 18 常用的伪类。你可能会有疑问,这会不会导致 Fower 包的代码体积爆炸,答案是不会。传统的的 CSS 方案,如果要让每个 CSS 类支持伪类,需要大量的 CSS 代码,因为 CSS 不具备编程性,它只能通过枚举的方式堆积代码。得益于 JS 的灵活性,Fower 只需几十行代码即可让所以原子属性支持伪类。